Storybook couldn't resolve fs

Question

I am setting up a Storybook with RemixJS. I got the following error when trying to import a component

ERROR in ./node_modules/@remix-run/node/errors.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/@remix-run/node'
ERROR in ./node_modules/@remix-run/node/node_modules/source-map/lib/read-wasm.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/@remix-run/node/node_modules/source-map/lib'
ERROR in ./node_modules/@remix-run/node/sessions/fileStorage.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/@remix-run/node/sessions'
ERROR in ./node_modules/busboy/lib/main.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/busboy/lib'
ERROR in ./node_modules/@remix-run/node/errors.js
Module not found: Error: Can't resolve 'fs/promises' in '/Users/ht/Desktop/a/node_modules/@remix-run/node'
ERROR in ./node_modules/@remix-run/node/upload/fileUploadHandler.js 124:15
Module parse failed: Unexpected token (124:15)
You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| class NodeOnDiskFile {
>   lastModified = 0;
|   webkitRelativePath = "";
| 
ERROR in ./node_modules/@remix-run/node/formData.js 53:73
Module parse failed: Unexpected token (53:73)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   get(name) {
|     let arr = this._fields[name];
>     return (arr === null || arr === void 0 ? void 0 : arr.slice(-1)[0]) ?? null;
|   }
| 

I got the suggestion that I should add this to the web pack

{
  resolve: {
    fallback: {
      fs: false
    }
  }
}

How could I do it with a storybook? I use storybook version 6.4.19

I added this to .storybook/main.js but without success

 webpackFinal: async (config, { configType }) => {
      config.node = {
        ...config.node,
        fs: 'empty'
      };
      return config;
    },

Thank you

Answer 1

Upgrade storybook to use webpack 5 https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324

Update .storybook/main.js

module.exports = {
    stories: ["../.slicemachine/assets/**/*.stories.@(js|jsx|ts|tsx)"],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/addon-interactions",
    ],
    framework: "@storybook/react",
    core: {
        builder: "webpack5",
    },
    webpackFinal: async (config, { configType }) => {
        config.resolve = {
            ...config.resolve,
            fallback: {
                ...(config.resolve || {}).fallback,
                fs: false,
                stream: false,
                os: false,
            },
        }

        // Return the altered config
        return config
    },
}

Answer 2

Depending on the webpack version you are using to build your Storybook you need to add fs, stream and other Node core module used by Remix packages.

As a rule of thumb you can use the list from Webpack documentation on resolve.fallback here.

If you are using Stroybook with Webpack 4 the config should look like :

module.exports = {
// Storybook config
webpackFinal: async (config, { configType }) => {
    config.node = {
      ...config.node,
      fs: "empty",
      assert: "empty",
      buffer: "empty",
      console: "empty",
      constants: "empty",
      crypto: "empty",
      domain: "empty",
      events: "empty",
      http: "empty",
      https: "empty",
      os: "empty",
      path: "empty",
      punycode: "empty",
      process: "empty",
      querystring: "empty",
      stream: "empty",
      string_decoder: "empty",
      sys: "empty",
      timers: "empty",
      tty: "empty",
      url: "empty",
      util: "empty",
      vm: "empty",
      zlib: "empty",
    };
    return config;
  },
};

Or with Webpack 5

module.exports = {
// Storybook config
webpackFinal: async (config, { configType }) => {
    config.resolve.fallback = {
      fs: false,
      assert: false,
      buffer: false,
      console: false,
      constants: false,
      crypto: false,
      domain: false,
      events: false,
      http: false,
      https: false,
      os: false,
      path: false,
      punycode: false,
      process: false,
      querystring: false,
      stream: false,
      string_decoder: false,
      sys: false,
      timers: false,
      tty: false,
      url: false,
      util: false,
      vm: false,
      zlib: false,
    };
    return config;
  },
};