Storybook: Storybook crashes on initial run using webpack 4.3

[silicakes]

Summary

Storybook fails on the first run using webpack 4.3:

EDIT
I guess it has something to do with the following deprecated API:

 DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:3244) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

So my immediate guess is it has to do with on of SB's dependencies.

$ npm run storybook

> [email protected] storybook /Users/silicakes/dev/xxx
> start-storybook -p 6006

info @storybook/react v3.3.15
info
info => Loading custom webpack config (full-control mode).
/Users/silicakes/dev/xxx/node_modules/webpack/lib/DefinePlugin.js:42
                compiler.hooks.compilation.tap(
                              ^

TypeError: Cannot read property 'compilation' of undefined
    at DefinePlugin.apply (/Users/silicakes/dev/xxx/node_modules/webpack/lib/DefinePlugin.js:42:17)
    at Compiler.apply (/Users/silicakes/dev/xxx/node_modules/@storybook/react/node_modules/tapable/lib/Tapable.js:375:16)
    at webpack (/Users/silicakes/dev/xxx/node_modules/@storybook/react/node_modules/webpack/lib/webpack.js:33:19)
    at exports.default (/Users/silicakes/dev/xxx/node_modules/@storybook/react/dist/server/middleware.js:29:40)
    at Object.<anonymous> (/Users/silicakes/dev/xxx/node_modules/@storybook/react/dist/server/index.js:153:34)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/silicakes/dev/xxx/node_modules/@storybook/react/bin/index.js:3:1)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
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.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/silicakes/.npm/_logs/2018-03-29T16_06_16_648Z-debug.log

configuration

.storybook

config.js

import { configure } from '@storybook/react';

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.tsx?$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);

webpack.config.js

const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('ts-loader')
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

projects webpack config

const path = require('path');

module.exports = {
    entry: './src/index.tsx',
    mode: "development",
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: "ts-loader"
        }],
    }
};

other relevant versions/dependencies

{
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^3.3.15",
    "@storybook/addon-links": "^3.3.15",
    "@storybook/addons": "^3.3.15",
    "@storybook/react": "^3.3.15",
    "@types/react": "^16.1.0",
    "@types/react-dom": "^16.0.4",
    "@types/storybook__react": "^3.0.7",
    "babel-core": "^6.26.0",
    "ts-loader": "^4.1.0",
    "typescript": "^2.8.1",
    "webpack": "^4.3.0",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  }
}

Steps to reproduce

just run start-storybook -p 6006 (or npm run storybook)

I've tried to short circuit the process on various points, but it seems like the issue is caused by a fundamental change in webpack's plugin architecture.
If that's the case, are there any plans to move the project to the new structure?
I really don't wanna fall back to webpack 3 unless it's an absolute must.

Thanks!

Affected platforms

MacOS high sierra

[danielduan]

3.3.15 is not compatible with Webpack 4.

We have an alpha version 4.0.0-alpha which enables webpack. there's a hotfix that will probably be published soon at 4.0.0-alpha.1 https://github.com/storybooks/storybook/pull/3312 https://github.com/storybooks/storybook/pull/3148

[silicakes]

Thanks @danielduan!

[dkushner]

Currently experiencing this exact issue with @storybook/vue: ^4.0.0-alpha.21 and webpack: ^4.18.0..

[michaelpumo]

I was getting the same error with Vue Storybook, so I decided to upgrade to @storybook/vue: ^4.0.0-alpha.22 and now I get the following error:

info => Loading presets
Error: Cannot find module 'babel-preset-vue'
    at Function.Module._resolveFilename (module.js:543:15)
    at Function.resolve (internal/module.js:18:19)
    at Object.babelDefault (/Users/paranoidandroid/Documents/websites/vuer/node_modules/@storybook/vue/dist/server/framework-preset-vue.js:38:79)
    at /Users/paranoidandroid/Documents/websites/vuer/node_modules/@storybook/core/dist/server/presets.js:73:26
    at Array.reduce (<anonymous>)
    at applyPresets (/Users/paranoidandroid/Documents/websites/vuer/node_modules/@storybook/core/dist/server/presets.js:66:18)
    at Object.apply (/Users/paranoidandroid/Documents/websites/vuer/node_modules/@storybook/core/dist/server/presets.js:84:14)
    at /Users/paranoidandroid/Documents/websites/vuer/node_modules/@storybook/core/dist/server/core-preset-dev.js:31:20
    at _default (/Users/paranoidandroid/Documents/websites/vuer/node_modules/@storybook/core/dist/server/loadCustomBabelConfig.js:88:29)
    at Object.babel (/Users/paranoidandroid/Documents/websites/vuer/node_modules/@storybook/core/dist/server/core-preset-dev.js:30:45)

This is all from following the guide for Vue at https://storybook.js.org/basics/guide-vue/

I am installing Storybook into a Vue Cli 3 project, with Vue version "vue": "^2.5.17". I don't think it's set up to even use babel-preset-vue

If I then go on to install babel-preset-vue anyway and try to run, I get the following error:

ERROR in ./.storybook/config.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: programPath.hub.addHelper is not a function
    at wrapInterop (/Users/paranoidandroid/Documents/websites/vuer/node_modules/@babel/helper-module-transforms/lib/index.js:165:45)
    at PluginPass.exit (/Users/paranoidandroid/Documents/websites/vuer/node_modules/@babel/plugin-transform-modules-commonjs/lib/index.js:174:70)
    at newFn (/Users/paranoidandroid/Documents/websites/vuer/node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:237:21)
    at NodePath._call (/Users/paranoidandroid/Documents/websites/vuer/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:65:20)
    at NodePath.call (/Users/paranoidandroid/Documents/websites/vuer/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/Users/paranoidandroid/Documents/websites/vuer/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:109:8)
    at TraversalContext.visitQueue (/Users/paranoidandroid/Documents/websites/vuer/node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:142:16)
    at TraversalContext.visitSingle (/Users/paranoidandroid/Documents/websites/vuer/node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:102:19)
    at TraversalContext.visit (/Users/paranoidandroid/Documents/websites/vuer/node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:182:19)
    at Function.traverse.node (/Users/paranoidandroid/Documents/websites/vuer/node_modules/@babel/core/node_modules/@babel/traverse/lib/index.js:106:17)
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true iframe[2]
ℹ ｢wdm｣: Failed to compile.

You just have to love modern web development eh? An absolute minefield.

[B3nnyL]

@michaelpumo an upgrade your "@storybook/vue" to ^4.0.0-alpha.24 will fix your issue

[michaelpumo]

Thanks for that @B3nnyL but now I get a new issue.

UnhandledPromiseRejectionWarning: Error: Cannot find module 'babel-preset-vue'

I'm within a Vue Cli 3 project and I believe the default Babel preset for these projects (in the babel.config.js) is: @vue/app

babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ]
}

Does Storybook require this specific Babel preset or can it work with the one in the current project, whatever it may be?

Apologies if I'm misunderstanding Storybook for Vue. As far as the installation notes go, I didn't see anything regarding installing the preset separately.

Thanks

[B3nnyL]

@michaelpumo you still need babel-preset-vue. I drafted a gist as a guide for you. https://gist.github.com/B3nnyL/154982fda63a955e1423e4966e982ebe