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
    },
}