storybook: unable to use vue-loader 15.0.0 (Error: options/query provided without loader)

Bug or support request summary

I’ve updated "vue-loader": "^14.2.2" to "vue-loader": "^15.0.0" in examples/vue-kitchen-sink. That update crashed the example for 4.0.0-alpha.3.

Steps to reproduce

cd examples/vue-kitchen-sink (master branch)
npm i
npm i --save-dev vue-template-compiler
npm i --save-dev vue-loader@15.0.0
npm run storybook

You’ll see errors like this:

ERROR in ./src/App.vue?vue&type=style&index=0&lang=css
Module parse failed: Unexpected character '#' (34:0)
You may need an appropriate loader to handle this file type.
|
|
| #app {
|   font-family: 'Avenir', Helvetica, Arial, sans-serif;
|   -webkit-font-smoothing: antialiased;
 @ ./src/App.vue 4:0-62
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./node_modules/@storybook/vue/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js

If you add using ofVueLoaderPlugin in examples/vue-kitchen-sink/.storybook/webpack.config.js

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = (storybookBaseConfig, configType, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: [/\.stories\.js$/, /index\.js$/],
    loaders: [require.resolve('@storybook/addon-storysource/loader')],
    include: [path.resolve(__dirname, '../src')],
    enforce: 'pre',
  });

  defaultConfig.plugins.push(new VueLoaderPlugin());

  return defaultConfig;
};

and run npm run storybook, you’ll see the following error:

/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/webpack/lib/RuleSet.js:262
			throw new Error(
			^

Error: options/query provided without loader (use loader + options) in {
  "query": {
    "cacheDirectory": "/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/.cache/react-storybook",
    "presets": [
      [
        "env",
        {
          "modules": false
        }
      ],
      "stage-0",
      "vue"
    ],
    "env": {
      "test": {
        "presets": [
          "env"
        ]
      }
    },
    "babelrc": false
  },
  "include": [
    "/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink"
  ],
  "exclude": [
    "/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules"
  ],
  "use": [
    {
      "options": {
        "cacheDirectory": "/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/.cache/react-storybook",
        "presets": [
          [
            "env",
            {
              "modules": false
            }
          ],
          "stage-0",
          "vue"
        ],
        "env": {
          "test": {
            "presets": [
              "env"
            ]
          }
        },
        "babelrc": false
      },
      "loader": "/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/babel-loader/lib/index.js"
    }
  ]
}
    at Function.normalizeRule (/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/webpack/lib/RuleSet.js:262:10)
    at rules.map (/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/webpack/lib/RuleSet.js:110:20)
    at Array.map (<anonymous>)
    at Function.normalizeRules (/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/webpack/lib/RuleSet.js:109:17)
    at new RuleSet (/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/webpack/lib/RuleSet.js:104:24)
    at new NormalModuleFactory (/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/webpack/lib/NormalModuleFactory.js:103:18)
    at Compiler.createNormalModuleFactory (/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/webpack/lib/Compiler.js:443:31)
    at Compiler.newCompilationParams (/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/webpack/lib/Compiler.js:460:30)
    at Compiler.compile (/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/webpack/lib/Compiler.js:468:23)
    at compiler.hooks.watchRun.callAsync.err (/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/webpack/lib/Watching.js:77:18)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/tapable/lib/Hook.js:35:21)
    at Watching._go (/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/webpack/lib/Watching.js:40:32)
    at Watching.compiler.readRecords.err (/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/webpack/lib/Watching.js:32:9)
    at Compiler.readRecords (/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/webpack/lib/Compiler.js:342:11)
    at new Watching (/Users/ilyaztsv/projects/my/storybook/examples/vue-kitchen-sink/node_modules/webpack/lib/Watching.js:29:17)

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

"dependencies": {
    "vue": "^2.5.16",
    "vuex": "^3.0.0"
  },
  "devDependencies": {
    "@storybook/addon-actions": "4.0.0-alpha.3",
    "@storybook/addon-centered": "4.0.0-alpha.3",
    "@storybook/addon-knobs": "4.0.0-alpha.3",
    "@storybook/addon-links": "4.0.0-alpha.3",
    "@storybook/addon-notes": "4.0.0-alpha.3",
    "@storybook/addon-options": "4.0.0-alpha.3",
    "@storybook/addon-storyshots": "4.0.0-alpha.3",
    "@storybook/addon-storysource": "4.0.0-alpha.3",
    "@storybook/addon-viewport": "4.0.0-alpha.3",
    "@storybook/addons": "4.0.0-alpha.3",
    "@storybook/vue": "4.0.0-alpha.3",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.0",
    "babel-preset-vue": "^2.0.2",
    "cross-env": "^5.1.4",
    "file-loader": "^1.1.11",
    "svg-url-loader": "^2.3.2",
    "vue-loader": "^15.0.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.6.0",
    "webpack-dev-server": "^3.1.3"
  }

Affected platforms

"vue-loader": "^15.0.0"

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 18 (7 by maintainers)

Most upvoted comments

Made #3911 to fix this.

pksunkara on Jul 23, 2018

@storybooks/team any reason why we can’t update to v15?

igor-dv on Jun 14, 2018

I had same problem. I spend half of the day on this devDependencies.

It based from @storybook/cli . The cli doesn’t have the vue-loader of devDependencis.

So I must be install it by myself. If I install below 15.0.0 , it’s ok. If not, it’s down.

I’m not good at English. If you need more info, please contact me.

Wish resolve this problem soon, thank you.

zhaozhe0831 on May 21, 2018

Same issue here, I’m extending webpack configuration:

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  plugins: [new VueLoaderPlugin()]
}

Robula on May 3, 2018

@igor-dv Does the team have a general idea of when the next alpha release might be? And do you have a timeframe in which you hope to release v4 beyond alpha/beta?

brophdawg11 on Jul 30, 2018