compiler.hooks.compilation.tap broken setup webpack problem setup bug

[travis5491811]

Bug or support request summary

I'm following the guide https://storybook.js.org/basics/guide-vue/ for vue. As soon as i try to run the storybook it breaks

Steps to reproduce

Follow all the steps from https://storybook.js.org/basics/guide-vue/ on a Linux/Ubuntu Machine (18 LTS). As soon as you get to "npm run storybook" you get the following:

> start-storybook -p 9001 -c .storybook

info @storybook/vue v3.4.11
info 
exec: fatal: No such remote 'origin'

=> Using default webpack setup based on "vue-cli".
/home/travis/Documents/jtlprograms/hellovue/node_modules/webpack/lib/DefinePlugin.js:93
		compiler.hooks.compilation.tap(
		               ^

TypeError: Cannot read property 'compilation' of undefined
    at DefinePlugin.apply (/home/travis/Documents/jtlprograms/hellovue/node_modules/webpack/lib/DefinePlugin.js:93:18)
    at Compiler.apply (/home/travis/Documents/jtlprograms/hellovue/node_modules/@storybook/core/node_modules/tapable/lib/Tapable.js:375:16)
    at webpack (/home/travis/Documents/jtlprograms/hellovue/node_modules/@storybook/core/node_modules/webpack/lib/webpack.js:33:19)
    at exports.default (/home/travis/Documents/jtlprograms/hellovue/node_modules/@storybook/core/dist/server/middleware.js:29:40)
    at buildDev (/home/travis/Documents/jtlprograms/hellovue/node_modules/@storybook/core/dist/server/build-dev.js:163:36)
    at Object.<anonymous> (/home/travis/Documents/jtlprograms/hellovue/node_modules/@storybook/vue/dist/server/index.js:23:22)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/home/travis/Documents/jtlprograms/hellovue/node_modules/@storybook/vue/bin/index.js:3:1)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] storybook: `start-storybook -p 9001 -c .storybook`
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!     /home/travis/.npm/_logs/2018-10-12T20_23_31_894Z-debug.log
$ vue --version
3.0.5

Please specify which version of Storybook and optionally any affected addons that you're running

package.json

{
  "name": "hellovue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "storybook": "start-storybook -p 9001 -c .storybook"
  },
  "dependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "@storybook/vue": "^3.4.11",
    "@vue/cli-plugin-babel": "^3.0.5",
    "@vue/cli-plugin-eslint": "^3.0.5",
    "@vue/cli-service": "^3.0.5",
    "babel-core": "^6.26.3",
    "vue-template-compiler": "^2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

maybe #3044 is not fixed?

[ndelangen]

If you want webpack 4, you should use the alpha version.

It won't be long till we release that as the new major: 4.0.0
Right now working on the release, finishing the documentation, migration guides, last bug fixes and trying to achieve the best compatibility.

[ndelangen]

The issue is you're using a webpack 4 plugin when storybook 3.x uses webpack 3.

So alternatively you can downgrade the plugin. But honestly the alpha is good, you should be able to use it.

[travis5491811]

Hey @ndelangen I'm ok with using whatever webpack works so i can start learning storybook. I'm new and trying to use the tutorial to get started. I never specified a version of webpack. To try and get started with vue storybook, I did the following (new project):

npm install -g @vue/cli  
vue create hellovue  (tried defaults and tried manual)
cd hellovue

# straight from the tutorial so far (I still haven't manually specified a version of webpack)

npm i --save-dev @storybook/vue  
npm i --save vue  
npm i --save-dev babel-core  

# Followed the rest of the tutorial and when it came time to run I did the following and got error:
npm run storybook

1. What part of the tutorial did I miss where I was suppose to install webpack (the current must be part of some other npm package.json because you can see from my post its not in mine)?
2. Where is the part that says how and what version of webpack to use?
3. How do I actually get vue storybook to work?
   1. I tried npm --save-dev webpack@3 and storybook still not working.
   2. I also tried npm --save-dev [email protected] and storybook still not working.

[ndelangen]

I think the tutorial you're following was likely written when vue-cli was still using webpack 3. It's been changed & upgraded in the mean time.

replace
npm i --save-dev @storybook/vue

with
npm i --save-dev @storybook/vue@alpha

in your tutorial. I think this will resolve the issue.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[yas24]

This is still happening for the react tutorial, I've used the alpha to get it working but I don't want fall into using an alpha just to get this working? Why isn't version 4.0.0 working?

[igor-dv]

What alpha are you using ? V4 is already stable. Can you elaborate on your usecase a bit ?

[yas24]

Sorry, ignore my previous comment - I just re-installed storybook again, and its running version 4.0.8 fine. :)

[igor-dv]

👌