ReactLibraries / storybook-addon-module-mock

Provides module mocking functionality like jest.mock on Storybook.
MIT License
42 stars 5 forks source link

Message `__esModule was not supported :( !` on console.log #2

Closed takano-hi closed 1 year ago

takano-hi commented 1 year ago

I installed storybook-addon-module-mock and added it to addons in main.js. Then I found messages like following in Chrome console:

スクリーンショット 2023-03-23 13 13 25

.storybook/main.js

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "storybook-addon-module-mock",
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  },
};

dependencies in package.json

  "dependencies": {
    "@types/node": "18.14.1",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "eslint": "8.34.0",
    "eslint-config-next": "13.2.1",
    "next": "13.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.5"
  },
  "devDependencies": {
    "@babel/core": "^7.21.0",
    "@storybook/addon-actions": "^6.5.16",
    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/addon-interactions": "^6.5.16",
    "@storybook/addon-links": "^6.5.16",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/react": "^6.5.16",
    "@storybook/testing-library": "^0.0.13",
    "babel-loader": "^8.3.0",
    "eslint-plugin-storybook": "^0.6.11",
    "prettier": "^2.8.4",
    "storybook-addon-module-mock": "^1.0.8"
  }

How can I resolve the messages?

SoraKumo001 commented 1 year ago

It cannot be reproduced, so please compare with the sample here and make adjustments. https://github.com/SoraKumo001/storybook-module-mock

takano-hi commented 1 year ago

@SoraKumo001 Thank you for your quick response 😄

I created a sample to reproduce the issue. https://github.com/takano-hi/storybook-addon-module-mock-sample

$ git clone git@github.com:takano-hi/storybook-addon-module-mock-sample.git
$ cd storybook-addon-module-mock-sample
$ npm install
$ npm run storybook

スクリーンショット 2023-03-23 17 53 26

SoraKumo001 commented 1 year ago

The message seems to disappear if you add storyStoreV7: true.

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "storybook-addon-module-mock",
  ],
  framework: "@storybook/react",
  features: {
    storyStoreV7: true,
  },
  core: {
    builder: "@storybook/builder-webpack5",
  },
};
takano-hi commented 1 year ago

@SoraKumo001 Thank you for investigation! It worked for me 😄

📝 https://storybook.js.org/docs/react/configure/overview#on-demand-story-loading