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

myheadgonnablow · 2022-06-22T12:32:55Z

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

> [email protected] 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

The text was updated successfully, but these errors were encountered:

BohdanOther · 2022-07-01T17:29:20Z

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 · 2023-06-08T10:52:03Z

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:

this is still a problem in SB 7.x
you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).

myheadgonnablow added bug needs triage labels Jun 22, 2022

Klarence mentioned this issue Dec 21, 2022

[Bug]: storyStoreV7 completely break stories #19701

Open

shilman added core mdx and removed needs triage labels Jun 8, 2023

shilman closed this as not planned Won't fix, can't repro, duplicate, stale Jun 8, 2023

vivshaw mentioned this issue Aug 3, 2023

[Bug]: storeStoreV7 will not work when @babel/preset-env is loaded in babel.config.js, only in .babelrc.json #23712

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

myheadgonnablow commented Jun 22, 2022

BohdanOther commented Jul 1, 2022 •

edited

Loading

shilman commented Jun 8, 2023

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

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

Comments

myheadgonnablow commented Jun 22, 2022

BohdanOther commented Jul 1, 2022 • edited Loading

shilman commented Jun 8, 2023

BohdanOther commented Jul 1, 2022 •

edited

Loading