search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.03k stars 9.24k forks source link

Cannot find module './src/stories/MyStoryName.story.mdx' while using 'storyStoreV7: true' for lazy compilation #18537

Closed myheadgonnablow closed 1 year ago

myheadgonnablow commented 2 years ago

Describe the bug While trying to use lazy compilation after configuring both webpack5 and Storybook 6.5.9 storybook is loading sidebar correctly, however when I try to navigate to any story, I'm getting the error below.

Cannot find module './src/stories/Accordion.story.mdx'
Error: Cannot find module './src/stories/Accordion.story.mdx'
    at webpackEmptyContext (http://localhost:9001/main.iframe.bundle.js:10:10)
    at http://localhost:9001/main.iframe.bundle.js:383:87

It only appears when storyStoreV7: true in my main.js

To Reproduce main.js

module.exports = {
    stories: ['../src/**/*.story.@(tsx|js|mdx)'],
    addons: ['@storybook/addon-essentials'],
    features: {
        postcss: false,
        storyStoreV7: true,
    },
    core: {
        builder: {
            name: 'webpack5',
            options: {
                lazyCompilation: true,
                fsCache: true,
            },
        },
    },
};

webpack.config (same for ui lib and storybook itself)

const path = require('path');

module.exports = {
    context: path.resolve(__dirname),
    resolve: {
        modules: [path.join(__dirname, '../'), 'node_modules'],
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        alias: {
            '@company-ui/core': path.resolve(__dirname, '../packages/company-ui/src'),
            '@company-ui/next': path.resolve(__dirname, '../packages/company-ui-next/src'),
            '@company-ui/utils': path.resolve(__dirname, '../packages/company-ui-utils/src'),
            '@company-ui/styles': path.resolve(__dirname, '../packages/company-ui-styles/src'),
            '@company-ui/icons': path.resolve(__dirname, '../packages/company-ui-icons/src'),
            test: path.resolve(__dirname, '../test'),
        },
    },
    output: {
        path: path.join(__dirname, 'build'),
        filename: 'bundle.js',
        publicPath: '/build/',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    cacheDirectory: true,
                },
            },
            {
                test: /\.md$/,
                loader: 'raw-loader',
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
            },
        ],
        node: {
            Buffer: false,
            process: false,
        },
        experiments: {
            lazyCompilation: {
                entries: true,
                imports: true,
            },
        },
    },
};

our ui lib's package.json

{
    "version": "0.11.0",
    "engines": {
        "npm": ">=7",
        "node": ">=16"
    },
    "private": true,
    "scripts": {
        "start": "npm run start -w=docs",
        "build": "npm run build --workspaces",
        "build:docs": "npm run build -w=docs",
        "lint": "eslint . --ext .js,.jsx,.ts,.tsx --cache --report-unused-disable-directives",
        "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --cache --fix",
        "lint:styles": "stylelint \"packages/{company-ui,company-ui-next,company-ui-styles,company-ui-icons}/**/*.{ts,tsx,js,jsx}\"",
        "format": "prettier --check .",
        "format:fix": "prettier --write .",
        "check-types": "tsc --noEmit",
        "test": "jest --maxWorkers=4 --projects packages/*",
        "test:watch": "npm run test -- --watch",
        "test:coverage": "npm run test -- --coverage",
        "prerelease": "npm run build",
        "release": "lerna publish from-package --contents build",
        "prepare": "husky install"
    },
    "workspaces": [
        "packages/*",
        "docs"
    ],
    "devDependencies": {
        "@babel/cli": "7.17.10",
        "@babel/core": "7.18.5",
        "@babel/plugin-proposal-class-properties": "7.17.12",
        "@babel/plugin-proposal-object-rest-spread": "7.18.0",
        "@babel/plugin-transform-modules-commonjs": "7.18.2",
        "@babel/plugin-transform-object-assign": "7.16.7",
        "@babel/plugin-transform-react-constant-elements": "7.17.12",
        "@babel/plugin-transform-runtime": "7.18.5",
        "@babel/preset-env": "7.18.2",
        "@babel/preset-react": "7.17.12",
        "@babel/preset-typescript": "7.17.12",
        "@babel/register": "7.17.7",
        "@material-ui/core": "4.12.3",
        "@material-ui/lab": "4.0.0-alpha.60",
        "@testing-library/jest-dom": "5.14.1",
        "@testing-library/react": "12.0.0",
        "@testing-library/react-hooks": "7.0.1",
        "@types/fs-extra": "8.1.0",
        "@types/glob": "7.1.4",
        "@types/jest": "26.0.24",
        "@types/lodash": "4.14.149",
        "@types/material-ui": "0.21.9",
        "@types/prettier": "2.3.2",
        "@types/react": "17.0.15",
        "@types/react-redux": "7.1.18",
        "@types/react-router-dom": "5.1.8",
        "@types/react-table": "7.7.2",
        "@types/redux-saga-routines": "3.1.2",
        "@types/styled-components": "5.1.12",
        "@types/yargs": "15.0.5",
        "@typescript-eslint/eslint-plugin": "4.29.1",
        "@typescript-eslint/parser": "4.29.1",
        "babel-loader": "8.2.5",
        "babel-plugin-module-resolver": "4.1.0",
        "babel-plugin-styled-components": "1.12.0",
        "babel-plugin-transform-imports": "2.0.0",
        "babel-plugin-transform-react-remove-prop-types": "0.4.24",
        "connected-react-router": "6.9.1",
        "copyfiles": "2.4.1",
        "eslint": "7.32.0",
        "eslint-config-airbnb": "18.2.1",
        "eslint-config-prettier": "8.3.0",
        "eslint-import-resolver-webpack": "0.13.2",
        "eslint-plugin-import": "2.26.0",
        "eslint-plugin-jsx-a11y": "6.4.1",
        "eslint-plugin-prettier": "3.4.0",
        "eslint-plugin-react": "7.24.0",
        "eslint-plugin-react-hooks": "4.2.0",
        "fs-extra": "8.1.0",
        "glob": "7.1.6",
        "glob-gitignore": "1.0.14",
        "husky": "7.0.1",
        "identity-obj-proxy": "3.0.0",
        "jest": "26.6.3",
        "jest-cli": "26.6.3",
        "jest-dom": "4.0.0",
        "jest-fetch-mock": "3.0.3",
        "jest-html-reporter": "3.4.1",
        "jest-styled-components": "7.0.3",
        "lint-staged": "11.1.2",
        "prettier": "2.3.2",
        "prop-types": "15.7.2",
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "react-polymorphic-box": "3.0.3",
        "react-redux": "7.2.4",
        "react-router-dom": "5.2.0",
        "react-table": "7.7.0",
        "react-test-renderer": "17.0.2",
        "redux": "4.1.1",
        "redux-devtools-extension": "2.13.9",
        "redux-saga": "1.1.3",
        "redux-saga-routines": "3.2.3",
        "rimraf": "3.0.2",
        "store2": "2.12.0",
        "styled-components": "5.3.0",
        "stylelint": "13.13.1",
        "ts-jest": "26.3.0",
        "typescript": "4.7.4",
        "webpack": "5.73.0",
        "webpack-cli": "4.10.0",
        "yargs": "16.0.3"
    }
}

Storybook's package.json

{
    "name": "docs",
    "description": "Storybook docs for @company-ui library",
    "version": "0.14.5",
    "author": "Company-UI Team",
    "private": true,
    "engines": {
        "npm": ">=6",
        "node": ">=12"
    },
    "scripts": {
        "start": "start-storybook -p 9001 --docs --no-manager-cache",
        "prebuild": "rimraf build",
        "build": "build-storybook --docs -o ./build"
    },
    "dependencies": {
        "@company-ui/next": "1.0.0-alpha.0",
        "@company-ui/core": "0.14.5",
        "@company-ui/icons": "0.8.6",
        "@company-ui/styles": "0.8.3",
        "@company-ui/utils": "0.9.0",
        "@storybook/addon-docs": "6.5.9",
        "@storybook/addon-essentials": "6.5.9",
        "@storybook/addons": "6.5.9",
        "@storybook/react": "6.5.9",
        "react-router-dom": "5.2.0"
    },
    "peerDependencies": {
        "@material-ui/core": "4.x",
        "@material-ui/lab": ">= 4.0.0-alpha.50",
        "prop-types": "15.x",
        "react": "17.x",
        "react-dom": "17.x",
        "react-table": ">= 7.7.0",
        "styled-components": "5.x"
    },
    "sideEffects": false,
    "devDependencies": {
        "@babel/plugin-syntax-dynamic-import": "7.8.3",
        "@storybook/builder-webpack5": "6.5.9",
        "@storybook/manager-webpack5": "6.5.9",
        "webpack": "5.72.1"
    }
}

babel.config.js (same for ui lib and storybook)

const defaultAlias = {
    '@company-ui/core': './packages/company-ui/src',
    '@company-ui/next': './packages/company-ui-next/src',
    '@company-ui/utils': './packages/company-ui-utils/src',
    '@company-ui/styles': './packages/company-ui-styles/src',
    '@company-ui/icons': './packages/company-ui-icons/src',
};

const productionPlugins = [
    '@babel/plugin-transform-react-constant-elements',
    [
        'babel-plugin-transform-react-remove-prop-types',
        {
            mode: 'unsafe-wrap',
        },
    ],
];

const muiPlugins = [
    [
        'babel-plugin-transform-imports',
        {
            '@material-ui/core': {
                // eslint-disable-next-line no-template-curly-in-string
                transform: '@material-ui/core/esm/${member}',
                preventFullImport: true,
            },
            '@material-ui/icons': {
                // eslint-disable-next-line no-template-curly-in-string
                transform: '@material-ui/icons/esm/${member}',
                preventFullImport: true,
            },
            '@material-ui/lab': {
                // eslint-disable-next-line no-template-curly-in-string
                transform: '@material-ui/lab/esm/${member}',
                preventFullImport: true,
            },
        },
    ],
];

module.exports = {
    presets: [
        [
            '@babel/env',
            {
                modules: ['esm'].includes(process.env.BABEL_ENV) ? false : 'commonjs',
                loose: true,
                include: [
                    '@babel/plugin-proposal-class-properties',
                    '@babel/plugin-proposal-export-namespace-from',
                    '@babel/plugin-proposal-optional-catch-binding',
                    '@babel/plugin-proposal-nullish-coalescing-operator',
                    '@babel/plugin-proposal-optional-chaining',
                ],
            },
        ],
        '@babel/react',
        '@babel/typescript',
    ],
    plugins: [
        ['@babel/plugin-proposal-class-properties', { loose: true }],
        ['@babel/plugin-proposal-object-rest-spread', { loose: true }],
        '@babel/plugin-transform-runtime',
        // for IE 11 support
        '@babel/plugin-transform-object-assign',
    ],
    ignore: [/@babel[\\|/]runtime/], // Fix a Windows issue.
    env: {
        cjs: {
            plugins: productionPlugins,
        },
        esm: {
            plugins: [
                ...muiPlugins,
                ...productionPlugins,
                ['@babel/plugin-transform-runtime', { useESModules: true }],
            ],
        },
        test: {
            sourceMaps: 'both',
            plugins: [
                '@babel/plugin-transform-modules-commonjs',
                'dynamic-import-node',
                [
                    'babel-plugin-module-resolver',
                    {
                        root: ['./'],
                        alias: defaultAlias,
                    },
                ],
                [
                    'babel-plugin-styled-components',
                    {
                        ssr: false,
                        displayName: false,
                    },
                ],
            ],
        },
    },
};

node console output

> docs@0.14.5 start
> start-storybook -p 9001 --docs --no-manager-cache

info @storybook/react v6.5.9
info 
info => Loading presets
info => Loading custom babel config as JS
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modules
info => Cleared cached manager config
<i> [webpack-dev-middleware] wait until bundle finished
assets by chunk 5.62 MiB (id hint: vendors)
  assets by status 5.21 MiB [big]
    asset 3.manager.bundle.js 4.07 MiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_formatter-9dc562d4_js.manager.bundle.js 873 KiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_OverlayScrollbars-26c4a78d_js.manager.bundle.js 294 KiB [emitted] [big] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_syntaxhighlighter-82dea71a_js.manager.bundle.js 200 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_WithTooltip-508b8277_js.manager.bundle.js 124 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_Color-3c22bb81_js.manager.bundle.js 81.3 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_GlobalScrollAreaStyles-8793ce4a_js.manager.bundle.js 15.3 KiB [emitted] (id hint: vendors)
asset runtime~main.manager.bundle.js 14.6 KiB [emitted] (name: runtime~main)
asset index.html 4 KiB [emitted]
asset main.manager.bundle.js 1.24 KiB [emitted] (name: main)
asset 8.manager.bundle.js 1.2 KiB [emitted]
Entrypoint main [big] 4.08 MiB = runtime~main.manager.bundle.js 14.6 KiB 3.manager.bundle.js 4.07 MiB main.manager.bundle.js 1.24 KiB
orphan modules 1000 KiB [orphan] 117 modules
runtime modules 9.02 KiB 15 modules
javascript modules 5.13 MiB 851 modules
json modules 1.52 KiB
  ../node_modules/character-entities-legacy/index.json 1.24 KiB [built] [code generated]
  ../node_modules/character-reference-invalid/index.json 289 bytes [built] [code generated]
manager (webpack 5.73.0) compiled successfully in 3396 ms
99% done plugins webpack-hot-middlewarewebpack built preview 4d8d8bf516410962ba51 in 7145ms
╭──────────────────────────────────────────────────╮
│                                                  │
│   Storybook 6.5.9 for React started              │
│   4.98 s for manager and 8.53 s for preview      │
│                                                  │
│    Local:            http://localhost:9001/      │
│    On your network:  http://192.168.1.8:9001/    │
│                                                  │
╰──────────────────────────────────────────────────╯

browser console output

index.js:56 Unable to load story 'components-accordion--basic':
error @ index.js:56
renderStoryLoadingException @ PreviewWeb.js:829
_callee8$ @ PreviewWeb.js:592
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ PreviewWeb.js:15
_next @ PreviewWeb.js:17
Promise.then (async)
asyncGeneratorStep @ PreviewWeb.js:15
_throw @ PreviewWeb.js:17
Promise.then (async)
asyncGeneratorStep @ PreviewWeb.js:15
_next @ PreviewWeb.js:17
Promise.then (async)
asyncGeneratorStep @ PreviewWeb.js:15
_next @ PreviewWeb.js:17
(anonymous) @ PreviewWeb.js:17
(anonymous) @ PreviewWeb.js:17
renderSelection @ PreviewWeb.js:661
onSetCurrentStory @ PreviewWeb.js:362
(anonymous) @ index.js:168
handleEvent @ index.js:167
(anonymous) @ index.js:52
handler @ index.js:101
handleEvent @ index.js:286
postMessage (async)
(anonymous) @ 3.manager.bundle.js:19268
send @ 3.manager.bundle.js:19266
handler @ 3.manager.bundle.js:14721
emit @ 3.manager.bundle.js:14731
emit @ 3.manager.bundle.js:11281
(anonymous) @ 3.manager.bundle.js:19048
invokePassiveEffectCreate @ 3.manager.bundle.js:85659
callCallback @ 3.manager.bundle.js:66122
invokeGuardedCallbackDev @ 3.manager.bundle.js:66171
invokeGuardedCallback @ 3.manager.bundle.js:66233
flushPassiveEffectsImpl @ 3.manager.bundle.js:85746
unstable_runWithPriority @ 3.manager.bundle.js:92602
runWithPriority$1 @ 3.manager.bundle.js:73453
flushPassiveEffects @ 3.manager.bundle.js:85619
(anonymous) @ 3.manager.bundle.js:85496
workLoop @ 3.manager.bundle.js:92551
flushWork @ 3.manager.bundle.js:92524
performWorkUntilDeadline @ 3.manager.bundle.js:92291
index.js:56 Error: Cannot find module './src/stories/Accordion.story.mdx'
    at webpackEmptyContext ( sync:2:1)
    at storybook-stories.js:2:1

System

Environment Info:

  System:
    OS: macOS 11.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.13.0 - ~/.volta/tools/image/node/16.13.0/bin/node
    npm: 8.1.0 - ~/.volta/tools/image/node/16.13.0/bin/npm
  Browsers:
    Chrome: 102.0.5005.115
    Edge: 99.0.1150.55
    Firefox: 100.0.2
    Safari: 14.0.1

Additional context It only appears when storyStoreV7: true in my main.js

BohdanOther commented 2 years ago

I was able to fix the same issue by adding babelModeV7: true to features flags. But it's not stated anywhere in the storybook docs. Could we consider adding it?

UPD: also you need to provide your own babel config, if babelModeV7 is set to true This worked for me (as an example)

// babel.config.js
module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                modules: false,
                useBuiltIns: 'entry',
                corejs: 3,
                include: [
                    '@babel/plugin-proposal-class-properties',
                    '@babel/plugin-proposal-export-namespace-from',
                    '@babel/plugin-proposal-optional-catch-binding',
                    '@babel/plugin-proposal-nullish-coalescing-operator',
                    '@babel/plugin-proposal-optional-chaining',
                ],
            },
        ],
        ['@babel/preset-react', { runtime: 'automatic' }],
        '@babel/preset-typescript',
    ],
    plugins: ['@babel/plugin-proposal-export-default-from'],
};
shilman commented 1 year ago

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if: