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

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.

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.

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

Also the build is stuck at 99%

Still seeing “Conflicting values for process.env” 😞 . Upgraded from 6.2.9 to 6.3.4:

Great Caesar’s ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.1 containing PR #15365 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

Is this because of: https://github.com/storybookjs/storybook/blob/75e2b73964dab1e10576ad6b43fbb4f5bf0e3640/lib/core-server/src/manager/manager-webpack.config.ts#L109?

According to the Webpack docs, one should avoid overriding upper-level portions of process: https://webpack.js.org/plugins/define-plugin/.

@WalterWeidner since I’m using storybook with angular, all of them stand out for me 😅

Hey guys, I was able to overcome the build warning issue with the solution from this thread: https://github.com/storybookjs/storybook/issues/6763#issuecomment-491415516

Like this:

config.plugins = [
  ...config.plugins.filter((plugin) => !plugin.definitions),
  new webpack.DefinePlugin({
    "process.env.NODE_ENV": JSON.stringify(
      configType === "DEVELOPMENT" ? "development" : "production"
    ),
    "process.env.NODE_PATH": JSON.stringify([]),
    "process.env.STORYBOOK": JSON.stringify('true'),
    "process.env.PUBLIC_PATH": JSON.stringify("."),
  })
];

💪

We’re seeing this error with 6.3.6.

Also looking for work around for this issue.

Hey everyone, is there any temporary work around for this issue?

I have the same issue as well, Storybook works nonetheless, but the live reload is not working when doing edits to components. I need to manually refresh the Storybook webpage in order to see my changes.

confirming for 6.3.10 and 6.3.12

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

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

still present, i just tested with 6.4.0-alpha.1

@shilman Same here, I played with 6.4.0-alpha.0 yesterday and still have the waning without .env file.

Yes. I still get the warning without the .env file. I’ve completely removed the file for now (the .env file is only used for a separate CLI tool that doesn’t touch Storybook) to remove it from the equation.

@WalterWeidner did you even get the warning when you removed your .env file?

@shilman the empty define plugin doesn’t exist any more in 6.4.0-alpha.0 but I still get that warning about process.env.

I was adding my own define like so:

		config.plugins = [
			...config.plugins,
			new DefinePlugin({
				IS_DEV: configType === 'DEVELOPMENT',
			}),
		];

but I removed it and still got the warning (even after clearing node_modules/.cache).

@WalterWeidner please give 6.4.0-alpha.0 a try which should fix the problem when there’s no .env file. If that works, I’ll patch it back to 6.3.x.

npx sb upgrade --prerelease

I have the same issue as well, Storybook works nonetheless, but the live reload is not working when doing edits to components. I need to manually refresh the Storybook webpage in order to see my changes.

We’re also seeing this behavior in our private repository (using builder-webpack5). We have Webpack 5.38.1 as a direct dependency at the root of our repository (no fancy monorepo setup here).

This is the config as it comes through storybook’s main.js:

{
  ...
  DefinePlugin {
    definitions: { 'process.env': [Object], NODE_ENV: '"development"' }
  },
  ...
  DefinePlugin { definitions: { 'process.env': '{}' } },
  ....
}

I was seeing stuff from our .env file in the second define plugin and removed the file to see if it would go away completely but I was left with the empty object. We’re not even using the .env as this part of the build so it seems something in Storybook is picking up our .env file.

Removing the yarn resolutions removed the error on build-storybook and storybook however I am still having an issue with process not being defined

@dewinterjack Have you solved the error?

I tried to add process/browser as suggested here to storybooks main.js, but without any luck.

const webpack = require('webpack')

module.exports = {
...
    config.plugins.push(
      new webpack.ProvidePlugin({
        process: 'process/browser',
      })
    );

additionally when running build-storybook the task gets stuck and never finish, even though the files are created in storybook-static folder

Removing the yarn resolutions removed the error on build-storybook and storybook however I am still having an issue with process not being defined

@shilman i have updated original linked project to 6.3-beta.10

we are running into this issue as well when using yarn resolutions for webpack 5 in our workspaces monorepo