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

tessro · 2021-03-30T20:10:14Z

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

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

TheFirstMe · 2021-04-03T21:27:37Z

I am also facing this issue. Is there a temporary fix for this?

michael-woodward-spok · 2021-04-05T17:29:00Z

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

to win over the outdated one used in storybook, which does not support webpack 5. (see storybookjs/storybook#14403)

shilman · 2021-04-06T10:51:50Z

Thanks for tracking this down @paulrosania @michael-woodward-spok. Since this is a hoisting issue, I'm not sure whether there's much more we can do other than perhaps document the workaround better. Any ideas?

michael-woodward-spok · 2021-04-06T15:12:56Z

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.

tessro · 2021-04-06T15:23:40Z

@shilman I think Storybook can solve this, since the hoisting issue is caused by incompatible dotenv-webpack versions used by Storybook itself. (You can reproduce this issue just by installing Storybook, without bringing in your own conflicting versions of the library.)

I believe this issue would be resolved if all versions of dotenv-webpack used by Storybook were v6+. In particular, @storybook/builder-webpack4 and @storybook/core-server are using v1.8; I imagine there may be other uses across all of Storybook but those are the two that are causing problems for us.

Here's the tree in our repository, for example:

$ npm ls dotenv-webpack
my-project@1.0.0
├─┬ @storybook/addon-essentials@6.2.2
│ └─┬ @storybook/addon-docs@6.2.2
│   └─┬ @storybook/builder-webpack4@6.2.2
│     └── dotenv-webpack@1.8.0
├─┬ @storybook/builder-webpack5@6.2.2
│ └── dotenv-webpack@6.0.4
└─┬ @storybook/react@6.2.2
  └─┬ @storybook/core@6.2.2
    └─┬ @storybook/core-server@6.2.2
      └── dotenv-webpack@1.8.0 deduped

I'm happy to post a PR if that would be helpful! Let me know.

shilman · 2021-04-06T15:34:58Z

@paulrosania Totally missed that part! Yes please create a PR and let's see what happens. 🙏🙏🙏

tessro · 2021-04-06T19:18:17Z

I put up a PR. The new library version seems to work fine without code changes; it appears the major version bumps were related to dropping very old Node versions that are already unsupported by Storybook.

shilman · 2021-04-07T04:31:04Z

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.4 containing PR #14492 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

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

TheFirstMe · 2021-04-10T13:40:18Z

@shilman The PR seems to be reverted. Is there some issue? I am renaming my .env file for now :(

shilman · 2021-04-10T13:42:33Z

@TheFirstMe yes, the PR caused storybook to break for a bunch of people so I'm waiting for a better fix. I've re-opened this issue.

- Fix breaking changes for husky and eslint-config-prettier - Remove the .ts extension from several imports (typescript doesn't like it) - Update react-spring - Update calls to faker.random - Add dotenv-webpack as our own dev dependency to win over the outdated one used in storybook, which does not support webpack 5. (see storybookjs/storybook#14403)

storybookjs/storybook#14497 and storybookjs/storybook#14403 tl;dr: Happo stopped working after #818 was merged, it turns out it is because `npm run build-storybook` crashed due to the above issue(s). Theoretically this is a workaround and can be removed after storybookjs/storybook#14403 is resolved, but there is no sign of when that'll happen Deep technical reasons from the linked issue for why this fails: > 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.

shilman added bug builder-webpack5 P0 labels Mar 30, 2021

shilman changed the title ~~start-storybook fails when .env is present and Webpack 5 builder is used~~ Webpack5: start-storybook fails when .env is present Mar 30, 2021

azangru added a commit to Ensembl/ensembl-client that referenced this issue Apr 5, 2021

Add dotenv-webpack as our own dev dependency

622badc

to win over the outdated one used in storybook, which does not support webpack 5. (see storybookjs/storybook#14403)

shilman added the has workaround label Apr 5, 2021

shilman added this to the 6.2 stabilization milestone Apr 5, 2021

shilman added P2 and removed P0 labels Apr 6, 2021

tessro mentioned this issue Apr 6, 2021

Upgrade dotenv-webpack to v6 #14492

Merged

shilman closed this as completed Apr 7, 2021

shilman reopened this Apr 10, 2021

johanvanhelden mentioned this issue Apr 12, 2021

[6.2.7] [Webpack 5] [Laravel] [Vue] Cannot GET / #14565

Closed

norbitrial mentioned this issue Apr 13, 2021

[webpack5] DefinePlugin cannot read property 'get' of undefined #14497

Closed

shilman modified the milestones: 6.2 stabilization, 6.3 webpack Apr 15, 2021

shilman mentioned this issue Apr 15, 2021

Core: Resolve builders relatively to config file #14576

Merged

huyenltnguyen mentioned this issue Apr 24, 2021

feat(tools): create ui-components package and setup Storybook freeCodeCamp/freeCodeCamp#41920

Merged

4 tasks

shilman removed this from the 6.3 webpack milestone Jun 8, 2021

leonm1 mentioned this issue Jun 9, 2021

Add dotenv-webpack to work around storybookjs/storybook#14403 VandyHacks/vaken#821

Merged

Stephen-ONeil mentioned this issue Jun 14, 2021

Problem with storybook build failing depending on the state of package lock TBS-EACPD/infobase#1092

Closed

shilman removed the P2 label Oct 18, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

tessro commented Mar 30, 2021 •

edited by sync-by-unito bot

TheFirstMe commented Apr 3, 2021

michael-woodward-spok commented Apr 5, 2021

shilman commented Apr 6, 2021 •

edited

michael-woodward-spok commented Apr 6, 2021

tessro commented Apr 6, 2021

shilman commented Apr 6, 2021

tessro commented Apr 6, 2021

shilman commented Apr 7, 2021

TheFirstMe commented Apr 10, 2021

shilman commented Apr 10, 2021 •

edited

Webpack5: start-storybook fails when .env is present #14403

Webpack5: start-storybook fails when .env is present #14403

Comments

tessro commented Mar 30, 2021 • edited by sync-by-unito bot

TheFirstMe commented Apr 3, 2021

michael-woodward-spok commented Apr 5, 2021

shilman commented Apr 6, 2021 • edited

michael-woodward-spok commented Apr 6, 2021

tessro commented Apr 6, 2021

shilman commented Apr 6, 2021

tessro commented Apr 6, 2021

shilman commented Apr 7, 2021

TheFirstMe commented Apr 10, 2021

shilman commented Apr 10, 2021 • edited

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

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

tessro commented Mar 30, 2021 •

edited by sync-by-unito bot

shilman commented Apr 6, 2021 •

edited

shilman commented Apr 10, 2021 •

edited