Error: Can't resolve http

[ratasorin]

Hello,

I am trying to use rewiremock alongside storybook to mock the behavior of some functions used by React components. Storybook uses webpack5. When trying to npm run storybook I get two errors:

First error: (http polyfill)

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
        - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "http": false }
 @ ./node_modules/node-libs-browser/index.js 14:21-56
 @ ./node_modules/rewiremock/lib/plugins/node-lib-browser.js 16:12-40
 @ ./node_modules/rewiremock/lib/plugins/index.js 51:22-51
 @ ./node_modules/rewiremock/lib/index.js 16:13-39
 @ ./node_modules/rewiremock/webpack.js 7:13-38
 @ ./src/pages/Manage/Client/ViewClient/components/ViewClientBody/Configuration/stories/report.stories.tsx 5:0-44 12:0-10 19:4-21
 @ ./src/ lazy ^\.\/.*$ include: (?%21.*node_modules)(?:\/src(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.stories\.(js%7Cjsx%7Cmjs%7Cts%7Ctsx))$ chunkName: [request] namespace object ./pages/Manage/Client/ViewClient/components/ViewClientBody/Configuration/stories/report.stories.tsx ./pages/Manage/Client/ViewClient/components/ViewClientBody/Configuration/stories/report.stories
 @ ./storybook-stories.js 25:11-29:5
 @ ./storybook-config-entry.js 8:0-50 20:31-39 27:0-30:2 27:56-30:1 29:27-35

I will attach my storybook config:

Storybook config:

import type { StorybookConfig } from "@storybook/react-webpack5";
import path from "path";

const config: StorybookConfig = {
  stories: [...],
  addons: [...],

  webpackFinal: async (config) => {
    if (config.resolve) {
      config.plugins?.push(new (require('rewiremock/webpack/plugin'))());

      config.resolve.alias = {
        ...config.resolve.alias,
        "@src": path.resolve(__dirname, "../src"),
        "@mocks": path.resolve(__dirname, "../src/mocks"),

        "@security/Can$": path.resolve(
          __dirname,
          "../src/mocks/_security/Can.tsx"
        ),
        "@services/ticket.service$": path.resolve(
          __dirname,
          "../src/mocks/_services/ticket.service.ts"
        ),

        "@services": path.resolve(__dirname, "../src/_services"),
        "@store-types": path.resolve(__dirname, "../src/store/types"),
        "#types": path.resolve(__dirname, "../src/types"),
        "@scss": path.resolve(__dirname, "../src/scss"),
        "@assets": path.resolve(__dirname, "../src/assets"),
        "@security": path.resolve(__dirname, "../src/_security"),

        "@utils/user$": path.resolve(__dirname, "../src/mocks/utils/user.ts"),
        "@utils": path.resolve(__dirname, "../src/utils"),

        "@shared": path.resolve(__dirname, "../src/shared"),
        "@components": path.resolve(__dirname, "../src/components"),
        "@form-validation": path.resolve(__dirname, "../src/FormValidation"),
      };
    }

    config.optimization = {
      ...config.optimization,
      moduleIds: "named"
    }

    return config;
  },

  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {},
};
export default config;

I will also attach the second error:

Second error:

Error: Unexpected token 'if'
  
  - node:vm:116 new Script
    node:vm:116:7
  
  - index.js:513 HtmlWebpackPlugin.evaluateCompilationResult
    [ui]/[html-webpack-plugin]/index.js:513:22
  
  - index.js:1105 
    [ui]/[html-webpack-plugin]/index.js:1105:23
  
  - task_queues:95 process.processTicksAndRejections
    node:internal/process/task_queues:95:5
  
  - async Promise.all
  
  - async Promise.all

I should mention I also use CRA for react. I read that I should make some configurations to my .babelrc, but is there a way to do that only for the Storybook config?

What is my configuration missing, that's causing the issue?

[ratasorin]

I would appreciate a lot if someone could create a complete demo repository for react + storybook + rewiremock

[theKashey]

Webpack is a little 🤒 right now, but there is a solution found at #134

Speaking of react + storybook - I would recommend something I am using myself - https://github.com/albertogasparin/react-magnetic-di/tree/master

[ratasorin]

Thank you! This looks very promising! I will give it a try!