Storybook crashes on initial run using webpack 4.3 #3313

silicakes · 2018-03-29T16:11:57Z

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

The text was updated successfully, but these errors were encountered:

danielduan · 2018-03-29T16:27:59Z

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 #3312 #3148

silicakes · 2018-03-29T17:03:21Z

Thanks @danielduan!

dkushner · 2018-09-13T21:48:59Z

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

michaelpumo · 2018-09-24T14:43:32Z

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 · 2018-10-11T04:54:36Z

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

michaelpumo · 2018-10-11T11:18:07Z

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 · 2018-10-14T12:57:02Z

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

Fixes issue described in storybookjs/storybook#3313

danielduan added configuration babel / webpack merged labels Mar 29, 2018

danielduan closed this as completed Mar 29, 2018

issue-sh bot removed the merged label Mar 29, 2018

CodyReichert mentioned this issue Jun 24, 2018

storybook is not building storybookjs/react-inspector#56

Closed

kurodakazumichi mentioned this issue Oct 21, 2018

create-react-appでstorybookを利用する kurodakazumichi/react-lab#16

Open

rrjoson mentioned this issue Jan 18, 2019

fix: update storybook jquense/react-big-calendar#1184

Merged

jquense pushed a commit to jquense/react-big-calendar that referenced this issue Jan 18, 2019

chore: update storybook (#1184)

6ba089a

Fixes issue described in storybookjs/storybook#3313

This was referenced Jan 15, 2021

Update 25 dependencies from npm #2724

Merged

Update 2 dependencies from npm #2430

Merged

RistoZoric pushed a commit to RistoZoric/react-big-calendar that referenced this issue Oct 6, 2022

chore: update storybook (#1184)

6420876

Fixes issue described in storybookjs/storybook#3313

WillingDev0812 added a commit to WillingDev0812/React-Big-Calendar that referenced this issue Oct 2, 2024

chore: update storybook (#1184)

ade5abc

Fixes issue described in storybookjs/storybook#3313

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storybook crashes on initial run using webpack 4.3 #3313

Storybook crashes on initial run using webpack 4.3 #3313

silicakes commented Mar 29, 2018 •

edited

Loading

danielduan commented Mar 29, 2018 •

edited

Loading

silicakes commented Mar 29, 2018

dkushner commented Sep 13, 2018

michaelpumo commented Sep 24, 2018 •

edited

Loading

B3nnyL commented Oct 11, 2018

michaelpumo commented Oct 11, 2018 •

edited

Loading

B3nnyL commented Oct 14, 2018

Storybook crashes on initial run using webpack 4.3 #3313

Storybook crashes on initial run using webpack 4.3 #3313

Comments

silicakes commented Mar 29, 2018 • edited Loading

Summary

configuration

.storybook

config.js

webpack.config.js

projects webpack config

other relevant versions/dependencies

Steps to reproduce

Affected platforms

danielduan commented Mar 29, 2018 • edited Loading

silicakes commented Mar 29, 2018

dkushner commented Sep 13, 2018

michaelpumo commented Sep 24, 2018 • edited Loading

B3nnyL commented Oct 11, 2018

michaelpumo commented Oct 11, 2018 • edited Loading

B3nnyL commented Oct 14, 2018

silicakes commented Mar 29, 2018 •

edited

Loading

danielduan commented Mar 29, 2018 •

edited

Loading

michaelpumo commented Sep 24, 2018 •

edited

Loading

michaelpumo commented Oct 11, 2018 •

edited

Loading