Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
khats opened this issue Mar 17, 2021 · 61 comments

Comments

@khats
Copy link

khats commented Mar 17, 2021

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

image

image

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
Copy link
Member

shilman commented Mar 19, 2021

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.

@shilman shilman removed this from the 6.2 blocking milestone Mar 22, 2021
@azvfx
Copy link

azvfx commented Apr 8, 2021

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
Copy link

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
Copy link

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
Copy link

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

@jqrun
Copy link

jqrun commented Apr 21, 2021

Is this because of:

'process.env': stringifyEnvs(envs),
?

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

@tourze
Copy link

tourze commented Apr 22, 2021

same problem

@rbatsenko
Copy link

rbatsenko commented May 17, 2021

Hey guys,
I was able to overcome the build warning issue with the solution from this thread:
#6763 (comment)

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
Copy link

@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
Copy link

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

@ritchieanesco
Copy link

ritchieanesco commented May 28, 2021

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
Copy link
Member

shilman commented Jun 3, 2021

@ritchieanesco

Try upgrading to the latest prerelease:

npx sb@next upgrade --prerelease

Does that fix it?

@gertsonderby
Copy link

@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
Copy link
Member

shilman commented Jun 3, 2021

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

@Jispry
Copy link

Jispry commented Jun 3, 2021

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
Copy link

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

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

@shilman
Copy link
Member

shilman commented Jun 3, 2021

@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
Copy link

@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
Copy link

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

Screen Shot 2021-06-04 at 7 46 21 am

@shilman shilman closed this as completed Jun 25, 2021
@stefan-schweiger
Copy link
Contributor

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

@shilman
Copy link
Member

shilman commented Jun 25, 2021

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

@WalterWeidner
Copy link

WalterWeidner commented Jun 25, 2021

@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:
image

@stefan-schweiger
Copy link
Contributor

stefan-schweiger commented Jun 25, 2021

@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
Copy link

WalterWeidner commented Jun 25, 2021

I just removed my node_modules/ 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
Copy link
Contributor

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

@shilman
Copy link
Member

shilman commented Jun 28, 2021

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
Copy link

Thanks! Looks good to me

@azangru
Copy link

azangru commented Jul 11, 2021

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

image

@npc-allanb
Copy link

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
Copy link

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
Copy link

We're seeing this error with 6.3.6.

@khats
Copy link
Author

khats commented Aug 11, 2021

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")

@khats
Copy link
Author

khats commented Aug 18, 2021

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
Copy link
Contributor

usrrname commented Aug 26, 2021

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

@aleksanderfret
Copy link

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

@ebalder
Copy link

ebalder commented Nov 4, 2021

confirming for 6.3.10 and 6.3.12

@cosmin-dev
Copy link

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

@khats
Copy link
Author

khats commented Dec 23, 2021

@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
Copy link

cosmin-dev commented Dec 23, 2021

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

Screenshot 2021-12-23 at 13 24 44

Also the build is stuck at 99%

@WodenWang820118
Copy link

WodenWang820118 commented Jun 29, 2022

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
Copy link

aaronjones1 commented Sep 20, 2022

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
Copy link

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

@nstuyvesant
Copy link

nstuyvesant commented Mar 9, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests