Webpack5: `start-storybook` fails when `.env` is present

Describe the bug This was a doozy to track down! 😅 The gist is, you get a failure with a strange error if you have a .env file under the right npm conditions. This happens because @storybook/builder-webpack4 and @storybook/core-server depend on dotenv-webpack 1.8, which does not support Webpack 5.

If npm hoists dotenv-webpack 6.0.4 to the node_modules root, everything works fine. However, if npm hoists dotenv-webpack 1.8, and the user has a .env file present, start-storybook fails to run.

Unless the user is already pinning dotenv-webpack, the version that gets hoisted depends on how many dependencies are using 1.8 vs 6.0.4. (For example, in the repro steps below, if you remove @storybook/addon-essentials, npm hoists 6.0.4 and things work normally.) This makes for some extremely surprising and hard-to-pin-down behavior.

I believe the proper remedy is to update all Storybook libraries that depend on dotenv-webpack to v6, which supports Webpack 4 and 5. I am happy to open a PR if desired.

For context, here is the error when the wrong version of dotenv-webpack is hoisted:

TypeError: Cannot read property 'get' of undefined
    at /Users/paul/Development/balsa/storybook-repro/node_modules/webpack/lib/DefinePlugin.js:549:57
    at Array.forEach (<anonymous>)
    at walkDefinitionsForValues (/Users/paul/Development/balsa/storybook-repro/node_modules/webpack/lib/DefinePlugin.js:545:31)
    at /Users/paul/Development/balsa/storybook-repro/node_modules/webpack/lib/DefinePlugin.js:571:5
    at SyncHook.eval [as call] (eval at create (/Users/paul/Development/balsa/storybook-repro/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/Users/paul/Development/balsa/storybook-repro/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Users/paul/Development/balsa/storybook-repro/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:631:26)
    at /Users/paul/Development/balsa/storybook-repro/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/paul/Development/balsa/storybook-repro/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/paul/Development/balsa/storybook-repro/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Users/paul/Development/balsa/storybook-repro/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:662:28)
    at /Users/paul/Development/balsa/storybook-repro/node_modules/@storybook/core-server/node_modules/webpack/lib/Watching.js:77:18
    at _next0 (eval at create (/Users/paul/Development/balsa/storybook-repro/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at eval (eval at create (/Users/paul/Development/balsa/storybook-repro/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:34:1)
    at watchRunHook (/Users/paul/Development/balsa/storybook-repro/node_modules/webpack-virtual-modules/index.js:173:5)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/paul/Development/balsa/storybook-repro/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:30:1)

To Reproduce Steps to reproduce the behavior:

# From an empty directory
npm init -y
npm install react{,-dom}@16
npm install --save-dev webpack
npm install --save-dev --legacy-peer-deps @storybook/{addon-essentials,builder-webpack5,react}
mkdir .storybook
echo "module.exports = { core: { builder: 'webpack5' } };" > .storybook/main.js
echo "FOO=bar" > .env
npx start-storybook

Expected behavior Storybook should start.

System

System:
    OS: macOS 11.2.3
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 15.12.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.7.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Firefox: 86.0
    Safari: 14.0.3
  npmPackages:
    @storybook/addon-essentials: ^6.2.0 => 6.2.0
    @storybook/builder-webpack5: ^6.2.0 => 6.2.0
    @storybook/react: ^6.2.0 => 6.2.0

┆Issue is synchronized with this Asana task by Unito

[michael-woodward-spok]

I think it’s worth trying @paulrosania’s suggestion:

I believe the proper remedy is to update all Storybook libraries that depend on dotenv-webpack to v6, which supports Webpack 4 and 5. I am happy to open a PR if desired.

[michael-woodward-spok]

The workaround is to add dotenv-webpack@6.0.4 to your devDependencies list