search

ReactLibraries / storybook-addon-module-mock

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

Support/Bug when used in Storybook v8 #16

Open kasir-barati opened 5 months ago

kasir-barati commented 5 months ago

Hey,

I decided to give this addon a go and the first thing I encountered was this error when I tried to start my storybook nx storybook frontend:

<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modules(node:18156) [DEP_WEBPACK_MAIN_TEMPLATE_REQUIRE] DeprecationWarning: MainTemplate.hooks.require is deprecated (use JavascriptModulesPlugin.getCompilationHooks().renderRequire instead)
(Use `node --trace-deprecation ...` to show where the warning was created)
ERROR in ./node_modules/storybook-addon-module-mock/dist/esm/mocks/index.js 2:0-39
Module not found: Error: Can't resolve '@storybook/jest' in '/home/kasir/projects/you-say/node_modules/storybook-addon-module-mock/dist/esm/mocks'
 @ ./node_modules/storybook-addon-module-mock/dist/esm/index.js 2:0-33 2:0-33
 @ ./apps/frontend/src/shared/components/sign-up-form/sign-up-form.component.stories.tsx 6:0-57 36:29-39
 @ ./apps/frontend/src/ lazy ^\.\/.*$ include: (?%21.*node_modules)(?:\/apps\/frontend\/src(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.stories\.(js%7Cjsx%7Cts%7Ctsx%7Cmdx))$ chunkName: [request] namespace object ./shared/components/sign-up-form/sign-up-form.component.stories.tsx ./shared/components/sign-up-form/sign-up-form.component.stories
 @ ./storybook-stories.js 12:11-16:5
 @ ./storybook-config-entry.js 8:0-50 20:31-39 27:2-30:4 27:58-30:3 29:31-39

preview compiled with 1 error
=> Failed to build the preview
99% end closing watch compilationWARN Force closed preview build

 NX   There were problems when compiling your code with Webpack.

Run Storybook with --debug-webpack for more information.
Pass --verbose to see the stacktrace.

Not sure what is wrong but here is my conf and everything else that I could think of:

main.ts

import type { StorybookConfig } from '@storybook/nextjs';
import { join, resolve } from 'path';

export default {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    'storybook-addon-module-mock',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {
      nextConfigPath: resolve(
        process.cwd(),
        'apps',
        'frontend',
        'next.config.js',
      ),
    },
  },
  staticDirs: [join(__dirname, '..', 'public')],
  core: {
    disableProjectJson: true,
    enableCrashReports: true,
  },
} satisfies StorybookConfig;

Versions

And here is my repo if you like you can look it up there: https://github.com/kasir-barati/you-say/tree/storybook-bug

JFI: will remove the branch after a while.

Demianeen commented 2 weeks ago

Have you tried to install a @storybook/jest that it asks about?

kasir-barati commented 2 weeks ago

Thanks @Demianeen, will give it a shot.