TypeError: dep.getModuleEvaluationSideEffectsState is not a function

[lifeiscontent]

Describe the bug
using 6.3.0-rc.4 I'm getting an error when running storybook

To Reproduce
@shilman I can show you on lifetime, not sure how to reproduce in paired down example.

System
Environment Info:

System:
OS: Linux 5.4 Zorin OS 15.3
CPU: (4) x64 Intel(R) Core(TM) i3-10110U CPU @ 2.10GHz
Binaries:
Node: 14.16.1 - ~/.asdf/installs/nodejs/14.16.1/bin/node
Yarn: 1.22.10 - ~/.asdf/installs/nodejs/14.16.1/.npm/bin/yarn
npm: 6.14.12 - ~/.asdf/installs/nodejs/14.16.1/bin/npm
Browsers:
Firefox: 89.0

Additional context

Logs:

> start-storybook -c .storybook -p 6006 -s .storybook/static

info @storybook/react v6.3.0-rc.4
info 
info => Loading presets
info => Serving static files from ./.storybook/static at /
info => Loading 1 config file in "/home/lifeiscontent/Sources/lifetime/website/.storybook"
info => Loading 10 other files in "/home/lifeiscontent/Sources/lifetime/website/.storybook"
info => Loading custom manager config
info => Adding stories defined in "/home/lifeiscontent/Sources/lifetime/website/.storybook/main.js"
info => Loading custom manager config
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 => Using cached manager
71% sealing dependencies optimization SideEffectsFlagPlugin/home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/NormalModule.js:1056
                                const state = dep.getModuleEvaluationSideEffectsState(moduleGraph);
                                                  ^

TypeError: dep.getModuleEvaluationSideEffectsState is not a function
    at NormalModule.getSideEffectsConnectionState (/home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/NormalModule.js:1056:23)
    at /home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/optimize/SideEffectsFlagPlugin.js:244:19
    at Hook.eval [as call] (eval at create (/home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:14:16)
    at Hook.CALL_DELEGATE [as _call] (/home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/tapable/lib/Hook.js:14:14)
    at Compilation.seal (/home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/Compilation.js:2246:42)
    at /home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/Compiler.js:1097:20
    at /home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/Compilation.js:2213:4
    at eval (eval at create (/home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:50:1)
    at /home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:376:11
    at /home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/neo-async/async.js:2830:7
    at Object.each (/home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/neo-async/async.js:2850:39)
    at /home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:355:18
    at /home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/neo-async/async.js:2830:7
    at Object.each (/home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/neo-async/async.js:2850:39)
    at /home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:48:16
    at Hook.eval [as callAsync] (eval at create (/home/lifeiscontent/Sources/lifetime/node_modules/.pnpm/[email protected]/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)

[bdefore]

I'm also experiencing this since upgrading from Webpack 4 to a non-PNP Webpack 5 setup. From 6.2.9 to 6.3.0-rc.5. Looks like @lifeiscontent is using PNP.

[bdefore]

Following this issue mrsteele/dotenv-webpack#275, I was able to avoid this error by adding to my config:

  optimization: {
    sideEffects: false
  },

Storybook builds, but I am now encountering an error when viewing in browser: #15097 EDIT: rc.8 fixed that issue

[Julianwan]

Having the same issue here... And I wasn't able to bypass by changing optimization settings like @bdefore did

[7rulnik]

Seems that it's problem in docgen plugin. As I understand it should implement getModuleEvaluationSideEffectsState method like this: https://github.com/webpack/webpack/blob/4837c3ddb9da8e676c73d97460e19689dd9d4691/lib/dependencies/ConstDependency.js#L52-L54

[shilman]

Thanks @7rulnik -- will follow up with @bebraw to see if we can get this fixed!

[bebraw]

I have an initial fix at hipstersmoothie/react-docgen-typescript-plugin#46 .

@shilman Can you cut a canary version to test?

[shilman]

Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-rc.11 containing PR #15287 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.