How to enable storybook on node/server?

[sibelius]

I'd like to run storybook on a server project, so I can have a storybook of all emails that we send

the problem with run at is that some dependencies requires node dependencies like this error message:

Module not found: Error: Can't resolve 'fs' in

how can we solve this?
can we polyfill these?

[igor-dv]

You can mock anything using babel or webpack. But IMO the proper solution is to isolate UI out of any logic that is using state and of course file system.
Can you provide an example of the "email"?

[sibelius]

email is just a react component, and we use renderToString to send in email.

the problem is that it can use any function of our server codebase, doing this we hit this problem

do you have any example of how to mock using babel or webpack?

[igor-dv]

Babel - https://github.com/tleunen/babel-plugin-module-resolver
Webpack - https://webpack.js.org/configuration/resolve/#resolve-alias

[sibelius]

The path I'm trying to follow is a custom webpack config

I've tried some approaches:

1 - use fs: 'empty':

module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.node = {
     fs: 'empty',
     global: true,
  };

  return storybookBaseConfig;
};

this gave me fs.readFileSync is not a function webpack

2. try to target: 'node'

module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.target = 'node'

  return storybookBaseConfig;
};

then I've got global is not defined

Try to fix this, using DefinePlugin

new webpack.DefinePlugin({
      'global': {},
    }),

then I've got a require is not a function

[igor-dv]

let's say you have .storybook dir like this:

.storybook
  fsMock.js
  webpack.config.js

fsMock.js:

module.exports = {
  readFileSync: () => 'mocked file',
  // other things in fs that you are using
}

webpack.config.js:

const path = require('path');

module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.resolve.alias = {
    ...storybookBaseConfig.resolve.alias,
    'fs': path.resolve(__dirname, 'fsMock.js')
  };

  return storybookBaseConfig;
};

[sibelius]

it worked well, tks

[sibelius]

can we use WebpackNodeExternals https://github.com/liady/webpack-node-externals/issues with storybook?

[igor-dv]

What do you mean?

[sibelius]

instead of using alias, why not use webpack-node-externals to not bundle anything inside node_modules

I've tried, but got require is not a function

[igor-dv]

Can you share an example of the usage?

[sibelius]

const path = require('path');
const WebpackNodeExternals = require('webpack-node-externals');

module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.resolve.alias = {
    ...storybookBaseConfig.resolve.alias,
    'fs': path.resolve(__dirname, 'fsMock.js')
  };

  storybookBaseConfig.externals: [
    WebpackNodeExternals({
      whitelist: ['webpack/hot/poll?1000'],
    }),
  ],

  return storybookBaseConfig;
};

related to this https://github.com/entria/entria-fullstack/blob/master/packages/server/webpack/webpack.dev.js#L16

[igor-dv]

What is the error log by the way?

[miketdonahue]

webpack-node-externals is not meant to be used for the web (target: web). That is why you get the require error.

Seems like you have to mock fs.

[Drillibit]

Here is a better solution for it:
config.node = { fs: 'empty', tls: 'empty', net: 'empty', module: 'empty', console: true };

[ericsoco]

Putting together answers from @igor-dv and @Drillibit, and bumping to Storybook v5+:

Add a Webpack config override as .storybook/webpack.config.js with the following content:

const path = require('path');

module.exports = async ({config, mode}) => {
  config.node = {fs: 'empty'};
  return config;
};

You can replace/add fs in config.node with any other modules you need to mock.

Docs on overriding Storybook's Webpack config here
Docs on Webpack's config.node here

[Vadorequest]

Slightly better, and documented version of .storybook/webpack.config.js:

/**
 * The doc doesn't really mention using webpack.config.js, but .storybook/main.js instead.
 *
 * Nevertheless, configuring the webpack.config.js seems to work fine.
 *
 * @param config
 * @param mode
 * @return {Promise<*>}
 * @see https://storybook.js.org/docs/react/configure/webpack
 * @see https://storybook.js.org/docs/react/configure/webpack#using-your-existing-config
 */
module.exports = async ({
  config,
  mode,
}) => {
  /**
   * Fixes npm packages that depend on `fs` module, etc.
   *
   * E.g: "winston" would fail to load without this, because it relies on fs, which isn't available during browser build.
   *
   * @see https://github.com/storybookjs/storybook/issues/4082#issuecomment-495370896
   */
  config.node = {
    fs: 'empty',
    tls: 'empty',
    net: 'empty',
    module: 'empty',
    console: true,
  };

  return config;
};

See full PR, adding Storybook to Next.js (TypeScript): UnlyEd/next-right-now#251

[sibelius]

config.node = {
    fs: 'empty',
    tls: 'empty',
    net: 'empty',
    module: 'empty',
    console: true,
  };

does not work with webpack 5, is there a workaround for webpack 5?

[pliao1996]

Can anybody explain why it works?

[sibelius]

it replaces the module to something else

[Vadorequest]

@PeiLiao Instead of trying to load fs, it will mock it (empty), thus not trying to load a server-side library that doesn't exist on the browser, thus not crashing.

That's my own understanding, not an authoritative answer.

[natterstefan]

config.node = {
    fs: 'empty',
    tls: 'empty',
    net: 'empty',
    module: 'empty',
    console: true,
  };

does not work with webpack 5, is there a workaround for webpack 5?

Hi @sibelius,

I had the same issue until I discovered this note in the migration guide:

If you are using something like node.fs: 'empty' replace it with resolve.fallback.fs: false.

I ended up adding this to my main.js:

  /**
     * Fixes issue with `next-i18next` and is ready for webpack@5
     * @see https://github.com/isaachinman/next-i18next/issues/1012#issuecomment-792697008
     * @see https://github.com/storybookjs/storybook/issues/4082#issuecomment-758272734
     * @see https://webpack.js.org/migrate/5/
     */
    config.resolve.fallback = {
      fs: false,
      tls: false,
      net: false,
      module: false,
      path: require.resolve('path-browserify'),
    }

[sibelius]

I did a lot of fallback and it is compiling now

the only problem is process is not defined

[julio-akomplice]

I ended up adding this to my main.js:

/**
* Fixes issue with next-i18next and is ready for webpack@5
* @see i18next/next-i18next#1012 (comment)
* @see #4082 (comment)
* @see https://webpack.js.org/migrate/5/
*/
config.resolve.fallback = {
fs: false,
tls: false,
net: false,
module: false,
path: require.resolve('path-browserify'),
}

It will end up looking like this

import type { StorybookConfig } from "@storybook/nextjs";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
  ...
  ],
 ...
  webpackFinal: async (config) => {

    if (config?.resolve?.fallback) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false,
        tls: false,
        net: false,
        module: false,
        dns: false,
        child_process: false,
        // path: require.resolve("path-browserify"), // Adding `path-browserify` as a replacement for `path`
      };
    }

    return config;
  },
};
export default config;