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 crashes on initial run using webpack 4.3 #3313

Closed
silicakes opened this issue Mar 29, 2018 · 7 comments
Closed

Storybook crashes on initial run using webpack 4.3 #3313

silicakes opened this issue Mar 29, 2018 · 7 comments

Comments

@silicakes
Copy link

silicakes commented Mar 29, 2018

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

> xxx@1.0.0 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! xxx@1.0.0 storybook: `start-storybook -p 6006`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the xxx@1.0.0 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
Copy link
Member

danielduan commented Mar 29, 2018

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

Thanks @danielduan!

@dkushner
Copy link

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

@michaelpumo
Copy link

michaelpumo commented Sep 24, 2018

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

B3nnyL commented Oct 11, 2018

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

@michaelpumo
Copy link

michaelpumo commented Oct 11, 2018

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

B3nnyL commented Oct 14, 2018

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

jquense pushed a commit to jquense/react-big-calendar that referenced this issue Jan 18, 2019
RistoZoric pushed a commit to RistoZoric/react-big-calendar that referenced this issue Oct 6, 2022
WillingDev0812 added a commit to WillingDev0812/React-Big-Calendar that referenced this issue Oct 2, 2024
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

5 participants