Vue-loader: use style tag can't work（CssSyntaxError）

Created on 3 May 2018 · 22Comments · Source: vuejs/vue-loader

Version

15.0.0、15.0.6

Reproduction link

https://coding.net/u/huzedong2011/p/html/git

Steps to reproduce

1、npm i
2 、npm run build

What is expected?

<template>
    <div>
        <h1>Hello Word</h1>
        <router-link to="/product">产品</router-link>
    </div>
</template>
<style>
body {
    background-color: #F00;
}
</style>

What is actually happening?

ERROR in ./src/pages/home/index.vue?vue&type=style&index=0&lang=css (./node_modules/[email protected]@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/[email protected]@vue-style-loader!./node_modules/[email protected]@css-loader!./node_modules/[email protected]@postcss-loader/lib!./node_modules/[email protected]@vue-loader/lib??vue-loader-options!./src/pages/home/index.vue?vue&type=style&index=0&lang=css)
Module build failed: CssSyntaxError: D:\www\html\src\pages\home\index.vue:5:1: Unknown word
at Input.error (D:\www\html\[email protected]@postcss\lib\input.js:119:22)
at Parser.unknownWord (D:\www\html\[email protected]@postcss\lib\parser.js:506:26)
at Parser.other (D:\www\html\[email protected]@postcss\lib\parser.js:171:18)
at Parser.parse (D:\www\html\[email protected]@postcss\lib\parser.js:84:26)
at parse (D:\www\html\[email protected]@postcss\lib\parse.js:24:16)
at new LazyResult (D:\www\html\[email protected]@postcss\lib\lazy-result.js:70:24)
at Processor.process (D:\www\html\[email protected]@postcss\lib\processor.js:117:12)
at compileStyle (D:\www\html\node_modules_@[email protected]@@vue\component-compiler-utils\dist\compileStyle.js:34:35)
at Object.module.exports (D:\www\html\[email protected]@vue-loader\lib\loaders\stylePostLoader.js:9:33)
@ ./src/pages/home/index.vue?vue&type=style&index=0&lang=css 1:0-438 1:454-457 1:459-894 1:459-894
@ ./src/pages/home/index.vue
@ ./src/router/index.js
@ ./src/index.js
@ multi ./node_modules/[email protected]@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src

V14.2.2 success
V15.0.0 error

Source

huzedong2015

All 22 comments

Possible like #1280

kuoruan on 3 May 2018

Build OK on my computer (Mac OSX 10.13.4, npm v10)
反正这个问题比较诡异，我也遇到了，就是不知道应该如何重现

kuoruan on 3 May 2018

Hi, I have the same problem two.
my project is at : https://github.com/banxi1988/FlaskVueDemo/tree/master/client

{
  "private": true,
  "devDependencies": {
    "css-loader": "^0.28.11",
    "typescript": "^2.8.3",
    "vue-loader": "^15.0.6",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.6.0"
  },
  "dependencies": {
    "vue": "^2.5.16",
    "vue-class-component": "^6.2.0"
  }
}

below is webpack.config.js

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

module.exports = {
    mode: "development",
    entry: "./todoapp.ts",
    output:{
        filename:"todoapp.bundle.js",
        path:path.resolve(__dirname, '.')
    },
    resolve:{
        extensions: [".ts",'.js', ".vue"]
    },
    module:{
        rules:[
            {test:/\.vue$/, loader: 'vue-loader'},
            {
                test:/\.ts$/, exclude: /node_modules/,
                loader:"ts-loader",
                options:{
                    appendTsSuffixTo: [/\.vue$/]
                }
            },
            {
                test: /\.css$/,
                use: [ 'vue-style-loader','css-loader' ]
            },

        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]

}

Once I add a style tag in the TodoItem.vue file, It will produce errors as follows:

ERROR in ./TodoItem.vue?vue&type=style&index=0&lang=css (./node_modules/[email protected]@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/[email protected]@vue-style-loader!./node_modules/[email protected]@css-loader!./node_modules/[email protected]@vue-loader/lib??vue-loader-options!./TodoItem.vue?vue&type=style&index=0&lang=css)
Module build failed: CssSyntaxError: /Users/banxi/Workspace/FlaskVueFullstack/client/TodoItem.vue:5:1: Unknown word
    at Input.error (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@postcss/lib/input.js:119:22)
    at Parser.unknownWord (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@postcss/lib/parser.js:507:26)
    at Parser.other (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@postcss/lib/parser.js:172:18)
    at Parser.parse (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@postcss/lib/parser.js:85:26)
    at parse (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@postcss/lib/parse.js:26:16)
    at new LazyResult (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@postcss/lib/lazy-result.js:70:24)
    at Processor.process (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@postcss/lib/processor.js:117:12)
    at compileStyle (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/_@[email protected]@@vue/component-compiler-utils/dist/compileStyle.js:34:35)
    at Object.module.exports (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@vue-loader/lib/loaders/stylePostLoader.js:9:33)
 @ ./TodoItem.vue?vue&type=style&index=0&lang=css 1:0-341 1:357-360 1:362-700 1:362-700
 @ ./TodoItem.vue
 @ ./node_modules/[email protected]@ts-loader??ref--5-0!./node_modules/[email protected]@vue-loader/lib??vue-loader-options!./TodoApp.vue?vue&type=script&lang=ts
 @ ./TodoApp.vue?vue&type=script&lang=ts
 @ ./TodoApp.vue
 @ ./todoapp.ts

After some search problem still, So I try to find the reason myself. let me look at the output below.

    at Object.module.exports (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@vue-loader/lib/loaders/stylePostLoader.js:10:33)
 @ ./TodoItem.vue?vue&type=style&index=0&lang=css 1:0-341 1:357-360 1:362-700 1:362-700
 @ ./TodoItem.vue
 @ ./node_modules/[email protected]@ts-loader??ref--5-0!./node_modules/[email protected]@vue-loader/lib??vue-loader-options!./TodoApp.vue?vue&type=script&lang=ts
 @ ./TodoApp.vue?vue&type=script&lang=ts
 @ ./TodoApp.vue
 @ ./todoapp.ts

1) first I add a print statment in [email protected]@vue-loader/lib/loaders/stylePostLoader.js:10:33

  console.warn("source:", source) // this line is add by me
  const query = qs.parse(this.resourceQuery.slice(1))
  const { code, map, errors } = compileStyle({
    source,
    filename: this.resourcePath,
    id: `data-v-${query.id}`,
    map: inMap,
    scoped: !!query.scoped,
    trim: true
  })

In my opinion, I think the source should be a css source string, to me surprise the output was below:

source: // style-loader: Adds some css to the DOM by adding a <style> tag

// load the styles
var content = require("!!./node_modules/[email protected]@css-loader/index.js!./node_modules/[email protected]@vue-loader/lib/index.js??vue-loader-options!./TodoItem.vue?vue&type=style&index=0&lang=css");
if(typeof content === 'string') content = [[module.id, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var add = require("!./node_modules/[email protected]@vue-style-loader/lib/addStylesClient.js").default
var update = add("716a72c4", content, false, {});
// Hot Module Replacement
if(module.hot) {
 // When the styles change, update the <style> tags
 if(!content.locals) {
   module.hot.accept("!!./node_modules/[email protected]@css-loader/index.js!./node_modules/[email protected]@vue-loader/lib/index.js??vue-loader-options!./TodoItem.vue?vue&type=style&index=0&lang=css", function() {
     var newContent = require("!!./node_modules/[email protected]@css-loader/index.js!./node_modules/[email protected]@vue-loader/lib/index.js??vue-loader-options!./TodoItem.vue?vue&type=style&index=0&lang=css");
     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
     update(newContent);
   });
 }
 // When the module is disposed, remove the <style> tags
 module.hot.dispose(function() { update(); });
}

hope this output will be help for the diagnose.

codetalks-new on 3 May 2018

👍1

@huzedong2015 If you add lang="css" to the <style> tag, keeps throwing the error?

davidpelayo on 3 May 2018

@davidpelayo Yes, I tried. It still throwing the error.

And I also try to remove all the node_modules directory and reinstall everything it's still throwing this error. that's really depressing.

codetalks-new on 3 May 2018

As @kuoruan mentioned, I've tried @huzedong2015 repo locally in my Mac v10.13.4 node v9.5.0 npm v6.0.0 and works correctly.
Your case @banxi1988 does not compile for other reasons non related to the vue loader:

vue_loader_possible_issue

I think what you guys are reporting here does not relate to a vue-loader issue.

davidpelayo on 3 May 2018

@davidpelayo well, those error in your screenshot is TS error, which doesn't really matter.
what really matters is the Module build failed: CssSyntaxError:,
I wonder ,It seems like you haven't reproduce the problem I have encounter, right?

in my local repo ,the full error stack is like this.

ERROR in ./TodoItem.vue?vue&type=style&index=0&lang=css (./node_modules/[email protected]@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/[email protected]@vue-style-loader!./node_modules/[email protected]@css-loader!./node_modules/[email protected]@vue-loader/lib??vue-loader-options!./TodoItem.vue?vue&type=style&index=0&lang=css)
Module build failed: CssSyntaxError: /Users/banxi/Workspace/FlaskVueFullstack/client/TodoItem.vue:5:1: Unknown word
    at Input.error (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@postcss/lib/input.js:119:22)
    at Parser.unknownWord (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@postcss/lib/parser.js:506:26)
    at Parser.other (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@postcss/lib/parser.js:171:18)
    at Parser.parse (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@postcss/lib/parser.js:84:26)
    at parse (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@postcss/lib/parse.js:24:16)
    at new LazyResult (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@postcss/lib/lazy-result.js:70:24)
    at Processor.process (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@postcss/lib/processor.js:117:12)
    at compileStyle (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/_@[email protected]@@vue/component-compiler-utils/dist/compileStyle.js:34:35)
    at Object.module.exports (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/[email protected]@vue-loader/lib/loaders/stylePostLoader.js:9:33)
 @ ./TodoItem.vue?vue&type=style&index=0&lang=css 1:0-341 1:357-360 1:362-700 1:362-700
 @ ./TodoItem.vue
 @ ./node_modules/[email protected]@ts-loader??ref--5-0!./node_modules/[email protected]@vue-loader/lib??vue-loader-options!./TodoApp.vue?vue&type=script&lang=ts
 @ ./TodoApp.vue?vue&type=script&lang=ts
 @ ./TodoApp.vue
 @ ./todoapp.ts

ERROR in /Users/banxi/Workspace/FlaskVueFullstack/client/TodoItem.vue.ts
[tsl] ERROR in /Users/banxi/Workspace/FlaskVueFullstack/client/TodoItem.vue.ts(24,37)
      TS2339: Property 'todo' does not exist on type 'TodoItem'.

ERROR in /Users/banxi/Workspace/FlaskVueFullstack/client/TodoItem.vue.ts
[tsl] ERROR in /Users/banxi/Workspace/FlaskVueFullstack/client/TodoItem.vue.ts(28,14)
      TS2339: Property 'todo' does not exist on type 'TodoItem'.

ERROR in /Users/banxi/Workspace/FlaskVueFullstack/client/TodoItem.vue.ts
[tsl] ERROR in /Users/banxi/Workspace/FlaskVueFullstack/client/TodoItem.vue.ts(32,14)
      TS2339: Property 'todo' does not exist on type 'TodoItem'.

as for environment. seems we have the same basic env: macOS 10.13.4 and node v9.5.0

➜  client (master) ✗ uname -v
Darwin Kernel Version 17.5.0: Mon Mar  5 22:24:32 PST 2018; root:xnu-4570.51.1~1/RELEASE_X86_64
➜  client (master) ✗ node -v
v9.5.0
➜  client (master) ✗

codetalks-new on 3 May 2018

@davidpelayo add lang="css" to style， still can't work， you can't compile as long as you add the style tag
OS windows 7、windows 10
but vue-loader v14 successful compilation

huzedong2015 on 3 May 2018

@kuoruan 加个style标签都不行，蛋疼。

huzedong2015 on 3 May 2018

Looks like your node_modules paths are quite different from typical npm/yarn installs. What package manager are you using and what version?

yyx990803 on 3 May 2018

This should be fixed in v15.0.7 but I cannot be 100% sure because I don't have the same system environment you guys have, so let me know if it still happens with v15.0.7.

yyx990803 on 3 May 2018

@yyx990803 Thanks. I tried to use npm to reinstall the packages and then problem solved.
So, I think its cnpm's bug. I didn't think this could be a bug with cnpm.

And I also tried v15.0.7 with cnpm , it's also works. Thanks again.

codetalks-new on 4 May 2018

@huzedong2015 check your package-lock.json , I think if you had reinstalled the package then it would be v15.0.7(if you haven't specify the version v15.0.6)

codetalks-new on 4 May 2018

@banxi1988
use

cnpm install

Reinstall all packages based on package.json
cnpm install has no package-lock.json, only package.json.
version is v15.0.6

huzedong2015 on 4 May 2018

@huzedong2015 Oh, I see, if no package-lock.json where do you find the version info?
generally, version in package.json doesn't mean installed version.

codetalks-new on 4 May 2018

@banxi1988
see package.json vue-loader version is 15.0.6
but see node_modules/vue-loader/package.json version is 15.0.7
ha ha ……

huzedong2015 on 4 May 2018

@huzedong2015 you should know package.json generally a base version.
let me give you some explains, Vue for example if you specify the version like "vue": "^2.5.16"
, Please pay attention to the ^ symbol before 2.5.16 。 so the version ^2.5.16 actually means that >=2.5.16 && < 3.0.0。so after the author update a new version ,when you reinstall, you'll install a new version.
see also Node Semantic version

codetalks-new on 4 May 2018

So @yyx990803, is it confirmed then it has to do with the package manager? cnpm on this case?

davidpelayo on 4 May 2018

Hi, i have this error:

ERROR in ./components/components/ExampleComponent.vue?vue&type=style&index=0&id=25938ec1&scoped=true&lang=css& (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/style-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./components/components/ExampleComponent.vue?vue&type=style&index=0&id=25938ec1&scoped=true&lang=css&)
Module build failed (from ./node_modules/vue-loader/lib/loaders/stylePostLoader.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError: /home/papac/Dev/Creation/Bow/app/components/components/ExampleComponent.vue:2:1: Unknown word

  1 | 
> 2 | var content = require("!!../../node_modules/sass-loader/lib/loader.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ExampleComponent.vue?vue&type=style&index=0&id=25938ec1&scoped=true&lang=css&");
    | ^
  3 | 
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

papac on 17 Oct 2018

@papac, i have the same error, did you solve this?

ME-SKY on 14 Nov 2018

😕5

It's strange. It was a breeze to work with Vue in ~2017 and I loved it instantly, and was the first repo I actually starred when I didn't even bother to star mine, but since vue-loader 15.x everything is broken and a mess, now it feels like this library is another react/angular, just complex and unusable. Has anyone figured out how to fix this?

samayo on 5 May 2019

"Same error" doesn't help anyone here because your issue might not be the same one as the original. It depends on your setup.

Make sure to read the Migration Guide if you bumped from a previous major version to v15
Make sure to open a separate issue with proper reproduction so we know if you are using a custom setup
If you don't want to bother with configuring vue-loader, please just use Vue CLI.