Storybook: Webpack 4 support?

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

Anyone doing this yet?

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

Great, thanks so much!

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.

I believe the above is caused by a bug in npm: https://github.com/npm/npm/issues/19944

Checklist of things that block the migration on our side right now moved to https://github.com/storybooks/storybook/pull/3148

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

You can subscribe to https://github.com/storybooks/storybook/pull/3148 updates

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

Released as v4.0.0-alpha.0

@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

> [email protected] 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.

v4.0.0-alpha.0 was broken, please use a later alpha (e.g. v4.0.0-alpha.3)

Do rm -rf node_modules and then use yarn install. Its working with storybook v3.4.1 and webpack v4.6.0

specifically yarn solves the problem by installing storybook dependency seperatly.

I also tried v4.0.0-alpha.3 but @storybook/[email protected] doesn't seem to be working with it.

Which error do you get @ankibalyan ? This addon seems to work OK in our official examples

@danmakenoise's solution works for me, it seems to be fine with yarn instead of npm.

FYI if anybody else is trying to install with npm instead of yarn, v4.0.0-alpha.3 seems to work now 👍

Getting the same error as TomFoyster on 4.6.0 and yarn workspaces

@AlastairTaft which storybook version is it in your case?

Oops sorry, I'm not on Story books, this was the only Google hit for the error.

Update: For my case I was hitting TomFoyster's error when running webpack in the console. Instead, running npx webpack gets around it.

Quite silly that yarn is a dependency for this. Any plans to not require yarn to use this project?

EDIT: npm i -g @storybook/cli@alpha fixes this issue 👍

Confirming that using @storybook/cli@alpha and @storybook/react@alpha (if using React) helps fixes the issues of loading storybook.

@Hypnosphi I am trying to use v4.0.0-alpha.3 with webpack ^4.8.1.
I am getting below mentioned error
Error: Cannot find module '@storybook/react/dist/server/config/defaults/webpack.config.js'
Any pointers?

@anujparikh I could be wrong, but I believe its now replaced with

const { createDefaultWebpackConfig } 
 = require('@storybook/core/dist/server/config/defaults/webpack.config.js');

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

We encountered the same problem that @TomFoyster mentions in https://github.com/storybooks/storybook/issues/3044#issuecomment-371071093 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...)

@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;
};

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

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:

ERROR in ./node_modules/@company/styled-theme/build/index.js 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.

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

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

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

@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?

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

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

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

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

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.

[email protected] 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\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93
compiler.hooks.compilation.tap(
^

TypeError: Cannot read property 'compilation' of undefined
at DefinePlugin.apply (C:\work\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93:18)
at Compiler.apply (C:\work\reactProject\node_modules\@storybook\corenode_modules\tapable\lib\Tapable.js:375:16)
at webpack (C:\work\reactProjectnode_modules\@storybook\corenode_moduleswebpack\libwebpack.js:33:19)
at exports.default (C:\work\reactProjectnode_modules\@storybook\core\dist\server\middleware.js:29:40)
at buildDev (C:\work\reactProjectnode_modules\@storybook\core\dist\server\build-dev.js:163:36)
at Object. (C:\work\reactProjectnode_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\reactProjectnode_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! [email protected] storybook: start-storybook -p 6006
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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.

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?

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

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.

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.

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

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.

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

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

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