Storybook with builder-webpac5 complains about conflicting values in DefinePlugin and not redefine custom variables

[khats]

Describe the bug I am using Storybook6-rc01 with builder-webpack5. I define several variables with patching webpack config and DefinePlugin through function webpackFinal:

plugins: [
      new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("development"),
      "window.FAKE_GLOBAL_FUNCTION": "(function() { return false; })",
    }),
],

Function FAKE_GLOBAL_FUNCTION call is added to test story

But there is error about Conflicting values for 'process.env' in build console and there is error on rendered story on UI about window.FAKE_GLOBAL_FUNCTION is not defined

To Reproduce Steps to reproduce the behavior:

1. Go to https://github.com/khats/storybook-demo
2. Pull project
3. Install dependencies with yarn
4. Start storybook with yarn start-storybook

Expected behavior

1. No error in build console: Conflicting values for 'process.env' '{NODE_ENV: "development", NODE_PATH: [], STORYBOOK: "true", PUBLIC_URL: "."}' !== '{}'
2. window. FAKE_GLOBAL_FUNCTION is defined and story is rendered without error

Screenshots

Code snippets If applicable, add code samples to help explain your problem.

System Environment Info:

System: OS: macOS 11.0.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Binaries: Node: 14.15.3 - ~/.nvm/versions/node/v14.15.3/bin/node Yarn: 2.4.0 - /usr/local/bin/yarn npm: 6.14.9 - ~/.nvm/versions/node/v14.15.3/bin/npm Browsers: Chrome: 89.0.4389.90 Firefox: 76.0.1 Safari: 14.0.1

Additional context Add any other context about the problem here.

┆Issue is synchronized with this Asana task by Unito

[khats]

i found that this line not replacing with DefinePlugin:

window.FAKE_GLOBAL_FUNCTION();

but this one:

const tempVariable = window.FAKE_GLOBAL_FUNCTION; 
tempVariable();

will be compiled to:

var tempVariable = (function() { return console.log('log from define plugin function'); });
tempVariable();

[usrrname]

Seeing this error with Storybook 6.3.7. I'm using node 14.17.0

[aleksanderfret]

I still see this warning with Storybook 6.3.8. (node 14.17.6)

[ebalder]

confirming for 6.3.10 and 6.3.12

[cosmin-dev]

Hi all, I'm facing the same issue with "@storybook/react": "^6.4.9, any way to solve this?

[khats]

@cosmin-dev if you are talking about that defining value not working:

"window.FAKE_GLOBAL_FUNCTION": "(function() { return false; })",

so i have fixed in my storybook it by moving this code to preview.js:/

[cosmin-dev]

hi @khats thanks for the quick response, I'm talking about this issue

Also the build is stuck at 99%

[WodenWang820118]

Hi, any update regarding this issue? Storybook version: 6.5.9 I am using Angular 13 with @storybook/angular and @storybook/builder-webpack5 without any manually added plugin, but how should I fix it? Thanks.

[aaronjones1]

Storybook v6.5.12 Angular v14.2.2

I'm seeing this warning as well, but SB seems to run fine.

WARNING in DefinePlugin
Conflicting values for 'process.env.NODE_ENV'

1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)

1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

manager (webpack 5.74.0) compiled with 2 warnings in 88502 ms

1. I have webpack5 installed as a dev dependency in the workspace.
2. My workspace contains an Angular component library and a test app.
3. The test app has environment files.
4. The component library is the default project.
5. I have Storybook configured in angular.json.

[andrewluetgers]

I am running into this error with a CRA app with storyobook 6.5.16

[nstuyvesant]

Storybook 6.5.16 Angular 14.2.2 Yarn 1.22.19

% yarn why webpack
yarn why v1.22.19
[1/4] 🤔  Why do we have the module "webpack"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "webpack@4.46.0"
info Has been hoisted to "webpack"
info Reasons this module exists
   - Hoisted from "@storybook#addon-essentials#@storybook#core-common#webpack"
   - Hoisted from "@storybook#angular#@storybook#core#@storybook#core-server#webpack"
   - Hoisted from "@storybook#angular#@storybook#core#@storybook#core-server#@storybook#builder-webpack4#webpack"
   - Hoisted from "@storybook#angular#@storybook#core#@storybook#core-server#@storybook#manager-webpack4#webpack"
info Disk size without dependencies: "6.21MB"
info Disk size with unique dependencies: "17.99MB"
info Disk size with transitive dependencies: "38.2MB"
info Number of shared dependencies: 107
=> Found "@angular-devkit/build-angular#webpack@5.74.0"
info This module exists because "@angular-devkit#build-angular" depends on it.
=> Found "@storybook/angular#webpack@5.76.0"
info This module exists because "@storybook#angular" depends on it.
info Disk size without dependencies: "6.22MB"
info Disk size with unique dependencies: "16.13MB"
info Disk size with transitive dependencies: "33.01MB"
info Number of shared dependencies: 69
=> Found "@storybook/builder-webpack5#webpack@5.76.0"
info This module exists because "@storybook#builder-webpack5" depends on it.
info Disk size without dependencies: "6.17MB"
info Disk size with unique dependencies: "16.07MB"
info Disk size with transitive dependencies: "32.96MB"
info Number of shared dependencies: 69
=> Found "@storybook/manager-webpack5#webpack@5.76.0"
info This module exists because "@storybook#manager-webpack5" depends on it.
info Disk size without dependencies: "5.94MB"
info Disk size with unique dependencies: "15.84MB"
info Disk size with transitive dependencies: "32.73MB"
info Number of shared dependencies: 69
✨  Done in 0.87s.

I also tried

yarn add webpack@5 --dev