use style tag can't work（CssSyntaxError）

[huzedong2015]

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/_vue-loader@15.0.6@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_vue-style-loader@4.1.0@vue-style-loader!./node_modules/_css-loader@0.28.11@css-loader!./node_modules/_postcss-loader@2.1.4@postcss-loader/lib!./node_modules/_vue-loader@15.0.6@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\node_modules_postcss@6.0.22@postcss\lib\input.js:119:22)
at Parser.unknownWord (D:\www\html\node_modules_postcss@6.0.22@postcss\lib\parser.js:506:26)
at Parser.other (D:\www\html\node_modules_postcss@6.0.22@postcss\lib\parser.js:171:18)
at Parser.parse (D:\www\html\node_modules_postcss@6.0.22@postcss\lib\parser.js:84:26)
at parse (D:\www\html\node_modules_postcss@6.0.22@postcss\lib\parse.js:24:16)
at new LazyResult (D:\www\html\node_modules_postcss@6.0.22@postcss\lib\lazy-result.js:70:24)
at Processor.process (D:\www\html\node_modules_postcss@6.0.22@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\node_modules_vue-loader@15.0.6@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/_webpack-dev-server@3.1.4@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src

---

V14.2.2 success
V15.0.0 error

[kuoruan]

Possible like #1280

[kuoruan]

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

[codetalks-new]

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/_vue-loader@15.0.6@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/_vue-loader@15.0.6@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.

[davidpelayo]

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

[codetalks-new]

@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.

[davidpelayo]

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:

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

[codetalks-new]

@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) ✗

[huzedong2015]

@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]

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

[yyx990803]

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

[yyx990803]

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.

[codetalks-new]

@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]

@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)

[huzedong2015]

@banxi1988
use

cnpm install

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

[codetalks-new]

@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.

[huzedong2015]

@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 ……

[codetalks-new]

@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

[davidpelayo]

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

[papac]

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, '']];

[ME-SKY]

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

[samayo]

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?

[yyx990803]

"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.