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.

Sign up for GitHub

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

Jump to bottom

Running Locally Throws CssSyntaxError #9

Closed
zteater opened this issue Dec 22, 2020 · 5 comments
Closed

Running Locally Throws CssSyntaxError #9

zteater opened this issue Dec 22, 2020 · 5 comments

Comments

@zteater
Copy link

zteater commented Dec 22, 2020

Took a fresh pull of the master branch and ran through the directions on the readme to install and run this webpack app.

$ yarn start --https --port 9001
yarn run v1.22.10
$ webpack-dev-server --https --port 9001
ℹ ｢wds｣: Generating SSL Certificate
(node:66378) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(Use `node --trace-deprecation ...` to show where the warning was created)
ℹ ｢wds｣: Project is running at https://localhost:9001/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/zteater/dev/styleguide
ℹ ｢wds｣: 404s will fallback to /index.html
✖ ｢wdm｣: Hash: 327f94cd106d00194f3a
Version: webpack 4.44.2
Time: 1309ms
Built at: 12/22/2020 12:14:53 AM
                   Asset      Size  Chunks                   Chunk Names
              index.html  3.07 KiB          [emitted]        
    vue-mf-styleguide.js   391 KiB    main  [emitted]        main
vue-mf-styleguide.js.map   426 KiB    main  [emitted] [dev]  main
Entrypoint main = vue-mf-styleguide.js vue-mf-styleguide.js.map
[1] multi (webpack)-dev-server/client?https://localhost:9001 (webpack)-config-single-spa/node_modules/systemjs-webpack-interop/resource-query-public-path?systemjsModuleName=%40vue-mf%2Fstyleguide&rootDirectoryLevel=1 ./src/vue-mf-styleguide.js 52 bytes {main} [built]
[./node_modules/webpack-config-single-spa/node_modules/systemjs-webpack-interop/public-path.js] (webpack)-config-single-spa/node_modules/systemjs-webpack-interop/public-path.js 2.37 KiB {main} [built]
[./node_modules/webpack-config-single-spa/node_modules/systemjs-webpack-interop/resource-query-public-path.js?systemjsModuleName=%40vue-mf%2Fstyleguide&rootDirectoryLevel=1] (webpack)-config-single-spa/node_modules/systemjs-webpack-interop/resource-query-public-path.js?systemjsModuleName=%40vue-mf%2Fstyleguide&rootDirectoryLevel=1 381 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?https://localhost:9001] (webpack)-dev-server/client?https://localhost:9001 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/component-library/page-header.vue] 1.21 KiB {main} [built]
[./src/global.css] 610 bytes {main} [built]
[./src/vue-mf-styleguide.js] 217 bytes {main} [built]
    + 37 hidden modules

ERROR in ./src/global.css (./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./src/global.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) Unknown word

> 1 | var api = require("!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    | ^
  2 |             var content = require("!!../node_modules/css-loader/dist/cjs.js!./global.css");
  3 | 

 @ ./src/global.css 2:26-180
 @ ./src/vue-mf-styleguide.js
 @ multi (webpack)-config-single-spa/node_modules/systemjs-webpack-interop/resource-query-public-path?systemjsModuleName=%40vue-mf%2Fstyleguide&rootDirectoryLevel=1 ./src/vue-mf-styleguide.js

ERROR in ./src/component-library/page-header.vue?vue&type=style&index=0&id=e4ebaa44&scoped=true&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/component-library/page-header.vue?vue&type=style&index=0&id=e4ebaa44&scoped=true&lang=css&)
Module build failed (from ./node_modules/vue-loader/lib/loaders/stylePostLoader.js):
CssSyntaxError: /Users/zteater/dev/styleguide/src/component-library/page-header.vue:1:1: Unknown word
    at Input.error (/Users/zteater/dev/styleguide/node_modules/postcss/lib/input.js:128:16)
    at Parser.unknownWord (/Users/zteater/dev/styleguide/node_modules/postcss/lib/parser.js:561:22)
    at Parser.other (/Users/zteater/dev/styleguide/node_modules/postcss/lib/parser.js:166:12)
    at Parser.parse (/Users/zteater/dev/styleguide/node_modules/postcss/lib/parser.js:75:16)
    at parse (/Users/zteater/dev/styleguide/node_modules/postcss/lib/parse.js:17:12)
    at new LazyResult (/Users/zteater/dev/styleguide/node_modules/postcss/lib/lazy-result.js:64:16)
    at Processor.<anonymous> (/Users/zteater/dev/styleguide/node_modules/postcss/lib/processor.js:142:12)
    at Processor.process (/Users/zteater/dev/styleguide/node_modules/postcss/lib/processor.js:121:23)
    at doCompileStyle (/Users/zteater/dev/styleguide/node_modules/@vue/component-compiler-utils/dist/compileStyle.js:46:35)
    at compileStyle (/Users/zteater/dev/styleguide/node_modules/@vue/component-compiler-utils/dist/compileStyle.js:12:12)
    at Object.module.exports (/Users/zteater/dev/styleguide/node_modules/vue-loader/lib/loaders/stylePostLoader.js:9:33)
 @ ./src/component-library/page-header.vue?vue&type=style&index=0&id=e4ebaa44&scoped=true&lang=css& (./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/component-library/page-header.vue?vue&type=style&index=0&id=e4ebaa44&scoped=true&lang=css&) 2:26-331
 @ ./src/component-library/page-header.vue?vue&type=style&index=0&id=e4ebaa44&scoped=true&lang=css&
 @ ./src/component-library/page-header.vue
 @ ./src/vue-mf-styleguide.js
 @ multi (webpack)-config-single-spa/node_modules/systemjs-webpack-interop/resource-query-public-path?systemjsModuleName=%40vue-mf%2Fstyleguide&rootDirectoryLevel=1 ./src/vue-mf-styleguide.js
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs] 430 bytes {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Failed to compile.
@zteater
Copy link
Author

zteater commented Dec 22, 2020 •
edited
Loading

In the webpack.config.js, I removed this rule:

        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"]
        },

And it cleared up. Seems to be related to a larger problem with webpack: webpack-contrib/css-loader#362
And by transitive: FormidableLabs/inspectpack#125

@zteater
Copy link
Author

zteater commented Dec 22, 2020

Also tried upgrading the components, but made no difference:
"css-loader": "^3.3.2", -> "css-loader": "^5.0.1",
"style-loader": "^1.0.1", -> "style-loader": "^2.0.0",
"vue-loader": "^15.8.3", -> "vue-loader": "^15.9.6",

@joeldenning
Copy link
Contributor

I was unable to reproduce this issue. I'm using yarn 1.22.10 and node 14.15.0 on osx. Here were the commands I ran:

~/c/vue-mf-styleguide (master|✔) [130] $ yarn --version
1.22.10
~/c/vue-mf-styleguide (master|✔) $ node --version
v14.15.0
~/c/vue-mf-styleguide (master|✔) $ rm -rf node_modules
yarn install
~/c/vue-mf-styleguide (master|✔) $ yarn install
yarn install v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
✨  Done in 18.99s.
~/c/vue-mf-styleguide (master|✔) $ yarn start
yarn run v1.22.10
$ webpack-dev-server
(node:41747) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(Use `node --trace-deprecation ...` to show where the warning was created)
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/joeldenning/code/vue-mf-styleguide
Browserslist: caniuse-lite is outdated. Please run the following command: `yarn upgrade`
ℹ ｢wdm｣: Hash: 49e9a5d2f46c989cb3f5
Version: webpack 4.41.5
Time: 1701ms
Built at: 12/22/2020 11:26:57 AM
                   Asset     Size  Chunks                   Chunk Names
    vue-mf-styleguide.js  380 KiB    main  [emitted]        main
vue-mf-styleguide.js.map  420 KiB    main  [emitted] [dev]  main
Entrypoint main = vue-mf-styleguide.js vue-mf-styleguide.js.map
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/vue-mf-styleguide.js 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/component-library/page-header.vue] 1.23 KiB {main} [built]
[./src/global.css] 573 bytes {main} [built]
[./src/set-public-path.js] 94 bytes {main} [built]
[./src/vue-mf-styleguide.js] 217 bytes {main} [built]
    + 34 hidden modules
ℹ ｢wdm｣: Compiled successfully.

What version of Node are you using? And what OS?

@zteater
Copy link
Author

zteater commented Dec 22, 2020

macOS Mojave 10.14.6
node: v14.15.2
yarn: 1.22.10

I was able to reproduce this by deleting the yarn.lock and node_modules and rebuilding both with yarn install.

@joeldenning
Copy link
Contributor

Glad to hear this was resolved. If the yarn.lock has issues, we should update it. Care to send in a PR with the changes?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@joeldenning @zteater