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

[shilman]

I took a look at the repo:

MMBP15:storybook-demo shilman$ yarn why webpack
yarn why v1.22.10
[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#react#webpack"
   - Hoisted from "@storybook#builder-webpack5#@storybook#core-common#webpack"
   - Hoisted from "@storybook#addon-essentials#@storybook#addon-docs#@storybook#builder-webpack4#webpack"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#core-server#webpack"
info Disk size without dependencies: "5.21MB"
info Disk size with unique dependencies: "11.82MB"
info Disk size with transitive dependencies: "31.31MB"
info Number of shared dependencies: 122
=> Found "@storybook/builder-webpack5#webpack@5.26.2"
info This module exists because "@storybook#builder-webpack5" depends on it.
info Disk size without dependencies: "5MB"
info Disk size with unique dependencies: "9.96MB"
info Disk size with transitive dependencies: "26.17MB"
info Number of shared dependencies: 97
✨  Done in 0.95s.

The issue is that webpack4 is hoisted, but because you're using builder-webpack5, this code is executing using a webpack4 instance of DefinePlugin, that's being executed inside webpack5:

const patchWebpackConfig = async (defaultConfig, options) => {
  return mergeConfigs(defaultConfig, {
    stats: "detailed",
    resolve: {},
    plugins: [
      new webpack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify("development"),
        "window.FAKE_GLOBAL_FUNCTION": "(function() { return false; })",
      }),
    ],
  });
};

I installed webpack5 at the root to force it to be hoisted:

yarn add webpack@5.26.2 --dev

However that leads to a different error.

[azvfx]

We are experiencing this issue as well, however it's hit and miss, sometimes it works sometimes it doesn't. Our project has to use Yarn dependency resolution for webpack 5, it may have something to do with that as some parts of storybook is still using webpack 4.

[VincentLanglet]

I also experience the issue

WARN Unexpected webpack version in manager-builder
WARN - Received: 5.32.0
WARN - Expected: 4.x
WARN 
WARN For more info: https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#troubleshooting

WARNING in DefinePlugin
Conflicting values for 'process.env'

With

module.exports = {
    stories: ['../client/stories/**/*.stories.js'],
    addons: [
        '@storybook/addon-actions/register',
        {
            name: '@storybook/addon-postcss',
            options: {
                postcssLoaderOptions: {
                    implementation: require('postcss'),
                },
            },
        },
    ],
    core: {
        builder: 'webpack5',
    },
};

and the conflict resolution

    "resolutions": {
        "css-loader": "^5.0.0",
        "dotenv-webpack": "^7.0.0",
        "html-webpack-plugin": "^5.0.0",
        "style-loader": "^2.0.0",
        "terser-webpack-plugin": "^5.0.0",
        "webpack": "^5.24.0",
        "webpack-dev-middleware": "^4.1.0",
        "webpack-virtual-modules": "^0.4.2"
    },

But the storybook seems to work even with this warning

[alexbchr]

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.

[dontsave]

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

[jqrun]

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/.

[tourze]

same problem

[rbatsenko]

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("."),
  })
];

💪

[ritchieanesco]

@rbatsenko suggestion doesn't work if you run --no-manager-cache. Would this mean its related to manager-webpack5? I'm lost for ideas as most solutions are very similar.

[rbatsenko]

@ritchieanesco interesting 🤔 I don't have time to investigate now, maybe you can try to ask Webpack guys

[ritchieanesco]

Thought i'd document more of my findings... the warning goes away once the build is cached when running start-storybook. Just to be clear i'm not redefining the process.env as per comment

The warning still appears when you run build-storybook.

package.json @storybook/addon-actions: "^6.3.0-alpha.31" @storybook/addon-essentials: "^6.3.0-alpha.31" @storybook/addon-links: "^6.3.0-alpha.31" @storybook/addon-svelte-csf: "^1.0.0", @storybook/builder-webpack5: "^6.3.0-alpha.31" @storybook/manager-webpack5: "^6.3.0-alpha.41" @storybook/svelte: "^6.3.0-alpha.31" dotenv-webpack: "^7.0.2" webpack: "^5.37.0" webpack-cli: "^4.7.0" webpack-dev-server: "^3.11.2"

[shilman]

@ritchieanesco

Try upgrading to the latest prerelease:

npx sb@next upgrade --prerelease

Does that fix it?

[gertsonderby]

@ritchieanesco

Try upgrading to the latest prerelease:

npx sb@next upgrade --prerelease

Does that fix it?

I just experienced this error with beta 10.

[shilman]

@gertsonderby did you try installing webpack5 as a project dev dependency?

[Jispry]

still present in beta.10 even with webpack 5.x in dev dependencies.

when running start-storybook --smoke-test fails

adding does however have slight effect

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('.')
      })
    ];

with it

preview (webpack 5.38.1) compiled with 2 warnings in 28721 ms
WARN manager: [object Object]
WARN preview: [object Object],[object Object]

without it

WARNING in DefinePlugin
Conflicting values for 'process.env'
'{NODE_ENV: "development", NODE_PATH: [], STORYBOOK: "true", PUBLIC_URL: "."}' !== '{}'

preview (webpack 5.38.1) compiled with 4 warnings in 31451 ms
WARN manager: [object Object]
WARN preview: [object Object],[object Object],[object Object]

[gertsonderby]

@gertsonderby did you try installing webpack5 as a project dev dependency?

I'm working with the prereleases specifically because we use Webpack 5.

[shilman]

@gertsonderby not all projects that use webpack5 have webpack as a direct project dependency. sometimes it's hidden beneath NextJS/Angular/etc. indirectly and NPM/Yarn hoisting can mess things up. having it as a project dep forces webpack5 to be hoisted. If it's not hoisted properly, this DefinePlugin error shows up.

[gertsonderby]

@gertsonderby not all projects that use webpack5 have webpack as a direct project dependency.

Fair enough, and apologies if I came off snippy. And to clarify, webpack is a direct dependency in the projects I've seen this happen in.

[ritchieanesco]

@gertsonderby i'm on v6.3.0-beta.10 and still getting the warning.

[shilman]

Can somebody please create a reproduction by running npx sb@next repro, following the instructions, and linking it in your issue description? We prioritize issues with reproductions over those without. Thank you! 🙏

[khats]

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

[jdelStrother]

In case another reproduction is useful - https://github.com/jdelStrother/conflicting-process-env

Not sure if relevant, but it seems like the process.env error is sometimes only reproducible when using start-storybook --smoke-test. At least, that what I was finding while narrowing down that reproduction ... until right at the end when I deleted yarn.lock & node_modules and reinstalled, at which point I could reproduce the error with or without --smoke-test 😖

[Jispry]

In case another reproduction is useful - https://github.com/jdelStrother/conflicting-process-env

Not sure if relevant, but it seems like the process.env error is sometimes only reproducible when using start-storybook --smoke-test. At least, that what I was finding while narrowing down that reproduction ... until right at the end when I deleted yarn.lock & node_modules and reinstalled, at which point I could reproduce the error with or without --smoke-test 😖

yep, this was kinda mentioned already in this comment #850037904 above

[thutinavaneethreddy]

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

[npc-allanb]

Also looking for work around for this issue.

[dewinterjack]

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

[Jispry]

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

[zerocewl]

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',
      })
    );

[WalterWeidner]

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.

[shilman]

@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

[WalterWeidner]

@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 _nodemodules/.cache).

[shilman]

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

[WalterWeidner]

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.

[jogelin]

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

[Jispry]

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

[jdelStrother]

I've updated my demo repo here with 6.4.0-alpha.1 - https://github.com/jdelStrother/conflicting-process-env

It still emits a process.env warning during build, and causes yarn start-storybook --smoke-test to fail entirely.

(The latter is the more frustrating bit for me: I can ignore the warning, but we use the smoke-test check in our tests, and the process.env warning causes our CI to fail...)

[shilman]

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.2 containing PR #15365 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.

[stefan-schweiger]

@shilman the error is now gone for me, thank you very much :) Are you planing on patching this back to 6.3?

[shilman]

@stefan-schweiger yup, will patch back in a day or two!

[WalterWeidner]

@shilman the warning is gone for me as well.

One of the other issues, mentioned by someone else in this ticket, was about the hot update not working. That's the issue that is really what we were hoping to get fixed. We thought the warning could maybe be related but it sounds like it isn't?

This is the error we see in the console:

[stefan-schweiger]

@WalterWeidner for me the hot reload is working fine now again with 6.4.0-alpha.2, so I think this actually should have been related?

[WalterWeidner]

I just removed my _nodemodules/ folder so there shouldn't be a cache problem, reinstalled, and ran start-storybook but the problem still persists. Also, deleted yarn.lock and re-installed my node_modules and that didn't make any difference.

These are what I have configured as dev dependencies currently:

{
    "@storybook/addon-actions": "6.4.0-alpha.2",
    "@storybook/addon-essentials": "6.4.0-alpha.2",
    "@storybook/addon-links": "6.4.0-alpha.2",
    "@storybook/builder-webpack5": "6.4.0-alpha.2",
    "@storybook/manager-webpack5": "6.4.0-alpha.2",
    "@storybook/react": "6.4.0-alpha.2",
    "@storybook/theming": "6.4.0-alpha.2",
    "@testing-library/react-hooks": "^3.4.1",
    "@types/classnames": "2.2.6",
    "@types/dompurify": "2.0.1",
    "@types/enzyme": "3.10.5",
    "@types/jest": "26.0.14",
    "@types/jquery": "3.5.1",
    "@types/lodash": "4.14.161",
    "@types/luxon": "1.25.1",
    "@types/node": "13.7.0",
    "@types/react": "16.9.19",
    "@types/react-modal": "3.10.6",
    "@types/react-router-dom": "^5.1.7",
    "@types/react-test-renderer": "16.9.3",
    "@types/sinon": "7.5.1",
    "@typescript-eslint/eslint-plugin": "4.2.0",
    "@typescript-eslint/parser": "4.2.0",
    "babel-loader": "8.2.2",
    "babel-plugin-add-react-displayname": "^0.0.5",
    "babel-plugin-class-name": "zeddidragon/babel-plugin-class-name#a25cb60",
    "babel-plugin-export-toplevel": "^1.0.0",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-preval": "^4.0.0",
    "babel-plugin-react-require": "^3.1.3",
    "babel-plugin-rewire-ts": "^1.3.3",
    "babel-plugin-transform-rename-import": "2.3.0",
    "chalk": "^4.1.0",
    "cli-spinners": "^2.3.0",
    "commander": "^5.0.0",
    "core-js": "^3.6.5",
    "cross-env": "^7.0.2",
    "css-loader": "5.2.6",
    "date-fns": "^2.17.0",
    "del": "^6.0.0",
    "dotenv": "^8.2.0",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.2",
    "enzyme-to-json": "^3.6.1",
    "eslint": "6.8.0",
    "eslint-config-prettier": "^6.12.0",
    "eslint-plugin-jest": "23.6.0",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "7.18.3",
    "eslint-plugin-react-hooks": "2.3.0",
    "fs-extra": "^9.0.0",
    "gulp": "4.0.2",
    "gulp-replace": "^1.0.0",
    "husky": "^4.3.0",
    "inquirer": "^7.1.0",
    "jest": "26.6.3",
    "jest-emotion": "^10.0.32",
    "jest-extended": "^0.11.5",
    "jest-junit": "^10.0.0",
    "lingo-sdk": "^0.1.2",
    "lint-staged": "^10.4.0",
    "luxon": "^1.25.0",
    "mini-css-extract-plugin": "1.6.0",
    "moment": ">=2.21.0 <2.25.0",
    "node-sass": "^5.0.0",
    "node-sass-json-importer": "^4.3.0",
    "ora": "^4.0.4",
    "prettier": "^2.1.2",
    "raw-loader": "^4.0.2",
    "react-is": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-test-renderer": "^16.13.1",
    "resolve-from": "^5.0.0",
    "resolve-url-loader": "^3.1.2",
    "rewire": "^4.0.1",
    "sass-inline-svg": "BambooHR/sass-inline-svg",
    "sass-loader": "12.0.0",
    "style-loader": "^2.0.0",
    "stylelint": "13.1.0",
    "tsc-files": "^1.1.0",
    "typescript": "4.0.3",
    "webpack": "5.38.1",
    "webpack-bundle-analyzer": "4.4.2",
    "webpack-cli": "4.7.0",
    "webpack-merge": "^5.7.3"
}

I'm curious if any of them stand out to you as important diferences @stefan-schweiger

[stefan-schweiger]

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

[shilman]

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

[jdelStrother]

Thanks! Looks good to me

[azangru]

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

[npc-allanb]

was still getting error message but ran once with --stats-children appended as suggested in warning message and message disappeared. Now no error message without option appended which is good but doesn't seem right.

[dewinterjack]

We do not have a .env file, we are having an issue with process not being defined. Some of them are inconsistent with build-storybook and running storybook. The issue used to come up as a warning saying conflicting values for process.env but now the warning is gone but the issue is still there. Currently using 6.3.4

[csantos-nydig]

We're seeing this error with 6.3.6.

[khats]

i have updated repository with demo story, there is no warnings in console, but DefinePlugin not working( in demo there is error: "window.FAKE_GLOBAL_FUNCTION is not a function")