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

Webpack 4 support? #3044

Closed
jrmyio opened this issue Feb 21, 2018 · 48 comments
Closed

Webpack 4 support? #3044

jrmyio opened this issue Feb 21, 2018 · 48 comments

Comments

@jrmyio
Copy link

jrmyio commented Feb 21, 2018

Webpack 4 is releasing in a couple days that could potentially speed up the build process.

Is storybook ready for webpack 4?

I tried to use the beta versions of ts-loader and webpack together with storybook but running into errors that most likely indicate storybook isn't compatible yet with the upcoming webpack 4.

I tried to use:
"ts-loader": "^4.0.0-beta.0",
"webpack": "^4.0.0-beta.2",

and I am running into problems:
`Module build failed: TypeError: Cannot set property 'tsLoaderFileVersion' of undefined at successLoader `
@Hypnosphi
Copy link
Member

Storybook uses webpack as direct dependency. So you can't replace its version on your side. Instead, you can fork our repo and try to update corresponding packages to beta version. If things go well, we'll be able to do the upgrade as soon as it becomes stable

@walfly
Copy link

walfly commented Feb 27, 2018

Anyone doing this yet?

@Hypnosphi Hypnosphi self-assigned this Feb 27, 2018
@Hypnosphi
Copy link
Member

I'll do that, and it will be a breaking change in storybook. The thing is that custom webpack configs may contain plugins, and plugins targeted for webpack 4 are most of the times (if not always) not backwards compatible with webpack 3

@walfly
Copy link

walfly commented Feb 27, 2018

Great, thanks so much!

@patrys
Copy link

patrys commented Feb 28, 2018

Currently it's broken as even though storybook explicitly requires webpack==3.11.0 and gets a private copy of Webpack 3 in its node_modules subdirectory, it also requires dotenv-webpack.

Now dotenv-webpack lists a peer dependency of webpack==^1 || ^2 || ^3 || ^4 which makes npm consider it a good idea to install it in the main node_modules next to Webpack 4 instead of next to Webpack 3 under @storybook/react/node_modules.

Now as soon as storybook loads dotenv-webpack it in turns causes Webpack 4 to be invoked.

@patrys
Copy link

patrys commented Feb 28, 2018

I believe the above is caused by a bug in npm: npm/npm#19944

@Hypnosphi
Copy link
Member

Hypnosphi commented Mar 3, 2018

Checklist of things that block the migration on our side right now moved to #3148

@TomFoyster
Copy link

I'm getting the below error when running Storybook with a project using Webpack 4;

node_modules/webpack/lib/DefinePlugin.js:42
		compiler.hooks.compilation.tap(
		               ^

TypeError: Cannot read property 'compilation' of undefined

This is preventing us proceeding with Webpack 4

@Hypnosphi
Copy link
Member

You can subscribe to #3148 updates

@danmakenoise
Copy link

@TomFoyster I had the same issue, temporarily working around it with using yarn instead of npm install. Seems to fix it in my case.

@Hypnosphi
Copy link
Member

Hypnosphi commented Mar 29, 2018

Released as v4.0.0-alpha.0

@wkentdag
Copy link

@Hypnosphi after updating to v4.0.0-alpha.0, my storybook compilation stalls and hangs on the compat plugin, never moving past 95%:

⚡️ frontend@feature/data-integration ~ npm run storybook

> frontend@0.0.1 storybook /Users/will/projects/frontend
> start-storybook -p 6006 -s ./assets

info @storybook/react v4.0.0-alpha.0
info
info => Loading static files from: /Users/will/projects/frontend/assets .
info => Loading custom .babelrc
info => Loading custom webpack config (extending mode).
 10% building modules 2/2 modules 0 activeℹ 「wdm」: wait until bundle finished:
(node:85321) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
 95% emitting unnamed compat plugin

Before upgrading to the alpha build, I was running into @TomFoyster's issue.

I can still get it to compile now by using yarn instead of npm, but the newest build doesn't appear to have fixed the problem.

@Melocaster
Copy link

Is @storybook/react deprecated because of @storybook/core now? @pollen8

@hanshenrik
Copy link

hanshenrik commented Jul 13, 2018

We encountered the same problem that @TomFoyster mentions in #3044 (comment) when trying to use webpack.DefinePlugin() in the Webpack config for Storybook, but ran into a bunch of new problems that we were unable to solve when upgrading to v4.0.0-alpha.14.

The somewhat ugly solution was to require Storybook's Webpack 3 dependency in .storybook/webpack.config.js instead of our Webpack 4 dependency:

// .storybook/webpack.config.js

const webpack = require('webpack');
// ^ Causes the TypeError: Cannot read property 'compilation' of undefined

const webpack = require('../node_modules/@storybook/core/node_modules/webpack');
// ^ Works (for us...)

@adyz
Copy link

adyz commented Jul 30, 2018

@hanshenrik -- Can you please show an example of a complete webpack.config.js file? I am not sure how would your line fit in my config:

const path = require("path");

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test:  /\.(ts|tsx)$/,
    use: [
      require.resolve("awesome-typescript-loader"),
      require.resolve("react-docgen-typescript-loader"),
    ],
  },
  {
    test: /\.scss$/,
    use: [
      "style-loader", "css-loader", "sass-loader"
    ]
  });

  config.resolve.extensions.push(".ts", ".tsx");

  return config;
};

@hanshenrik
Copy link

@adyz Sure!

const path = require('path');
const webpack = require('../node_modules/@storybook/core/node_modules/webpack');

module.exports = {
  module: {
    rules: [
      // ...
    ],
  },

  plugins: [
    new webpack.DefinePlugin({ // <-- Uses DefinePlugin from the imported webpack library
      HELLO: 'world',
    }),
  ],

  resolve: {
    // ...
  },
};

You should only need this if you need to use a plugin from the webpack library, though. We needed it to use the DefinePlugin.

@wsrast
Copy link

wsrast commented Aug 6, 2018

I'm running into the same issue around DefinePlugin, but my .storybook/webpack.config.js file remains devoid of any references to DefinePlugin, those references are only located in my main project's webpack.config.js. I'm unsure why Storybook would be accessing the main file when it has its own inside the .storybook folder.

I've tried upgrading to the @storybook/react@alpha package and am seeing a massive list of other issues when attempting to start the server. One of the more interesting ones:

Module build failed (from ../node_modules/babel-loader/lib/index.js):
TypeError: Plugin 2 specified in "C:\\sources\\demoapp\\node_modules\\@company\\styled-theme\\.babelrc" was expected to return a function but returned "undefined"
    at Function.normalisePlugin (C:\sources\demoapp\node_modules\babel-core\lib\transformation\file\options\option-manager.js:148:15)

I've verified that swapping the same project to Yarn allows everything to work with no issues.

@davek1979
Copy link

How would one go about applying this fix to a Vue-CLI 3 project?

@mauricius
Copy link

@davek1979 npm install @storybook/vue@alpha does the trick!

@wsrast
Copy link

wsrast commented Aug 21, 2018

Yesterday I reverified the Yarn fix, then wiped out my node_modules folder and tried npm install. The error on DefinePlugin returned. I wiped out my node_modules folder again, and changed the version to @storybook/react@alpha then redid npm install. That does the trick. The version of the alpha that seemed to work for me was v4.0.0-alpha.16

@Hypnosphi
Copy link
Member

@anujparikh @pollen8 requiring our default config directly is deprecated, you should see a deprecation message when using it. The correct way is to use third argument: https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default

@Melocaster no, @storybook/core is an internal library shared by storybooks for different frameworks. You still should use @storybook/react

@hanshenrik

ran into a bunch of new problems that we were unable to solve when upgrading to v4.0.0-alpha.14

Can you please try it again with 4.0.0-alpha.20 and share the issues you encounter if any?

@nerdmax
Copy link

nerdmax commented Sep 10, 2018

Tried with 4.0.0-alpha.20 and webpack4.10.2, DefinePlugin doesn't work.

@Hypnosphi
Copy link
Member

@nerdmax can you please provide some reproduction example? We use this plugin ourselves and it works for us

@nerdmax
Copy link

nerdmax commented Sep 11, 2018

@Hypnosphi Thank you for your response. I'm so sorry, I just checked, it's working fine with 4.0.0-alpha.20. My project is using yarn's workspaces and it seems like the storybook got installed in the root node_module. After deleting that folder and reinstall all packages, it works.

@ridhoq
Copy link

ridhoq commented Sep 11, 2018

I was able to get this working after upgrading to "@storybook/react": "^4.0.0-alpha.21" with "webpack": "^4.17.2"

@datatribe
Copy link

I'm having the issue with the DefinePlugin problem as well. I've tried above recommended alpha fixes with no luck. I'm following this tutorial out of the box: https://www.valentinog.com/blog/react-webpack-babel/, which with the latest versions of all listed dependencies works fine.

getstorybook works fine, but npm run storybook throws the exception many others seem to have encountered in one form or another.

reactProject@1.0.0 storybook C:\work\reactProject
start-storybook -p 6006

info @storybook/react v3.4.11
info
exec: fatal: Not a git repository (or any of the parent directories): .git

exec: fatal: Not a git repository (or any of the parent directories): .git

info => Loading custom .babelrc
info => Loading custom webpack config (extending mode).
C:\work\reactProject\node_modules\webpack\lib\DefinePlugin.js:93
compiler.hooks.compilation.tap(
^

TypeError: Cannot read property 'compilation' of undefined
at DefinePlugin.apply (C:\work\reactProject\node_modules\webpack\lib\DefinePlugin.js:93:18)
at Compiler.apply (C:\work\reactProject\node_modules@storybook\core\node_modules\tapable\lib\Tapable.js:375:16)
at webpack (C:\work\reactProject\node_modules@storybook\core\node_modules\webpack\lib\webpack.js:33:19)
at exports.default (C:\work\reactProject\node_modules@storybook\core\dist\server\middleware.js:29:40)
at buildDev (C:\work\reactProject\node_modules@storybook\core\dist\server\build-dev.js:163:36)
at Object. (C:\work\reactProject\node_modules@storybook\react\dist\server\index.js:23:22)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object. (C:\work\reactProject\node_modules@storybook\react\bin\index.js:3:1)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactProject@1.0.0 storybook: start-storybook -p 6006
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactProject@1.0.0 storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I would love to give Storybook a try, but it looks like I'm thwarted by using the html-webpack-plugin in this instance.

@relaxedtomato
Copy link

relaxedtomato commented Oct 4, 2018

I was able to get this working after upgrading to "@storybook/react": "^4.0.0-alpha.21" with "webpack": "^4.17.2"

@ridhoq - can you share your config.js and webpack.config.js for storybook. I have the same versions, and am still receiving the below error:

Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (MenuLink.js:12)

Also, are you using npm or yarn?

@ridhoq
Copy link

ridhoq commented Oct 4, 2018

Sure - https://gist.github.com/ridhoq/bfeb7688994cb8fe25f481671bf4d3b4. I don't know how helpful this will be for you as we may have different build requirements. I'm using npm for this project

@palodelincak
Copy link

I had same issue after upgrading create-react-app to 2.0.3 and this issue was resolved by upgrading @storybook/react to ^4.0.0-alpha.21.

@svenliebig
Copy link

I created a working version with the following (latest) versions:

"@storybook/react": "4.0.0-alpha.24"
"ts-loader": "5.2.1"
"typescript": "3.1.1"
"webpack": "4.20.2"

added some Addon too, hope this example will help someone.

@henryw374
Copy link

e../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15) at webpack_require (bootstrap:724) at fn (bootstrap:101) at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1) at webpack_require (bootstrap:724) at fn (bootstrap:101) at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1) at webpack_require (bootstrap:724) at fn (bootstrap:101) at Object../node_modules/@storybook/components

@relaxed-tomato did you resolve this? I have the same issue. thanks

@jackdbd
Copy link

jackdbd commented Oct 11, 2018

I created a working version with the following (latest) versions:

"@storybook/react": "4.0.0-alpha.24"
"ts-loader": "5.2.1"
"typescript": "3.1.1"
"webpack": "4.20.2"

added some Addon too, hope this example will help someone.

Thanks, that did the trick for me. But I also had to install babel-core and babel-loader.

@ghost
Copy link

ghost commented Oct 17, 2018

I created a working version with the following (latest) versions:

"@storybook/react": "4.0.0-alpha.24"
"ts-loader": "5.2.1"
"typescript": "3.1.1"
"webpack": "4.20.2"

added some Addon too, hope this example will help someone.

Thanks, that did the trick for me. But I also had to install babel-core and babel-loader.

Same here. I had to use following babel core & loader versions:

"babel-core": "^6.26.3",
"babel-loader": "^7.0.4",

adamchenwei added a commit to adamchenwei/vuejs-storybook-storyshot-jest-webpack-boilerplate that referenced this issue Oct 25, 2018
@developer239
Copy link

I accidentally run into this issue when I upgraded to the newest webpack. Version 4.20.2 works fine.

"@babel/cli": "7.1.2", // babel 7
"webpack": "4.20.2", // webpack 4
"@storybook/react": "^3.4.11", // storybook 3

@0nn0
Copy link

0nn0 commented Nov 20, 2018

Got the error as well. Manually installing webpack 4.20.2 as mentioned above does the trick for now.

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