Webpack: module parse failed when running unit test

Created on 14 Jun 2016 · 13Comments · Source: vuejs-templates/webpack

I am trying to integrate your webpack template with my Django project. When running the unit test I run into these errors:

WARNING in ./src/sass/abstracts/README.md
Module parse failed: /home/usr/project/src/sass/abstracts/README.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)

WARNING in ./src/images/favicon.ico
Module parse failed: /home/usr/project/src/images/favicon.ico Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character ' ' (1:0)

ERROR in ./~/css-loader!./~/sass-loader!./src/sass/base/_base.scss
Module build failed:
color: $brand-color;
^
Undefined variable: "$brand-color".
in /home/usr/project/src/sass/base/_base.scss (line 26, column 10)
@ ./src/sass/base/_base.scss 4:14-128

ERROR in ./~/css-loader!./~/sass-loader!./src/sass/base/_helpers.scss
Module build failed:
max-width: $max-width; /* 1 */
^
Undefined variable: "$max-width".
in /home/usr/project/src/sass/base/_helpers.scss (line 21, column 14)
@ ./src/sass/base/_helpers.scss 4:14-131

ERROR in ./~/css-loader!./~/sass-loader!./src/sass/base/_typography.scss
Module build failed:
color: $text-color;
^
Undefined variable: "$text-color".
in /home/usr/project/src/sass/base/_typography.scss (line 5, column 10)
@ ./src/sass/base/_typography.scss 4:14-134
14 06 2016 17:08:37.832:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
14 06 2016 17:08:37.835:INFO [launcher]: Starting browser PhantomJS
14 06 2016 17:08:38.062:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket /#VokKZQoCYI-X67hKAAAA with id 84701306
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
Error: Cannot find module "!!./../../../node_modules/css-loader/index.js!./../../../node_modules/sass-loader/index.js!./_/home/usr/project/test/unit.scss"
at /home/usr/project/test/unit/index.js:11056 <- webpack:///src/sass/base/_base.scss:4:0

PhantomJS 2.1.1 (Linux 0.0.0): Executed 0 of 0 ERROR (0.146 secs / 0 secs)

Looks like the sass loader does not work for non vue files...or something. I have found similar issues but these were solved with:
https://github.com/vuejs-templates/webpack/pull/84

Any suggestions how to solve this?

Source

musicformellons

👍1

Most helpful comment

So there are a few things going on here. First, it looks like through deleting files, you've partially removed some features from the template, such as ESLint and Babel - but only partially. The .eslintrc.js file for example was deleted without removing the ESLint preloaders from webpack.base.conf.js. .babelrc was also deleted, breaking Babel integration.

As for your SCSS errors, when the unit tests run, (almost) all the modules in the in src directory are loaded to calculate test coverage. Since the template assumes the src directory contains _independent_ modules, your tightly coupled SCSS raises errors. In _base.scss for example, you get an unknown variable error because the module assumes some global state created by main.scss. You could reorganize all of your SCSS into independent modules - or as explained in the comment here, you can update the regex to match a smaller subset of files, so that SCSS files are not tested for coverage. In your case, you could only test coverage for .js and .vue files like this:

var srcContext = require.context('../../src', true, /^\.\/(?!main\.js$).+\.(js|vue)$/i)

Some recommendations for the future:

To better understand Babel, Webpack, Karma, and many other technologies in this template, I recommend checking out egghead.io. They have a lot of great video tutorials on how these technologies work and building up that knowledge base will help you a lot!
When you want to remove a feature such as ESLint, first run a search through the project for the word eslint, so that you can gain greater perspective on how it's being used.
Before deleting files, definitely make sure you know what they do! .babelrc is necessary for Babel to work. Since you're still using the ES2015+ syntax in JavaScript files throughout the project, I assume breaking Babel was not intentional.
This last item is especially important. This was _not_ a minimal example. A minimal example of the problem would have been one where the _minimum number of changes_ have been made to a fresh project in order to reproduce the problem. In most projects, they simply would not help you when providing an example like this. And even here, going through code with so many changes that have nothing to do with the problem means it takes longer for me diagnose an issue, which means I have less time to help people. 😕

I hope this helps.

chrisvfritz on 16 Jun 2016

👍12

All 13 comments

It looks like those are running through sass-loader, because you're getting Undefined variable errors. It just can't find where you've defined that variable. Can you provide a minimal project that demonstrates the problem you're seeing?

chrisvfritz on 14 Jun 2016

You mean to send it to you privately, or how do I provide you with the project?

musicformellons on 14 Jun 2016

The full error output below:

/home/usr/.nvm/versions/node/v5.11.1/bin/node /home/usr/.nvm/versions/node/v5.11.1/lib/node_modules/npm/bin/npm-cli.js run-script unit

[email protected] unit /home/usr/myproject
karma start test/unit/karma.conf.js --single-run

14 06 2016 20:08:26.136:WARN [watcher]: Pattern "/home/usr/myproject/node_modules/sinon/pkg/sinon-timers.js" does not match any file.
Hash: 0fe139901933e9ab0ab9
Version: webpack 1.13.1
Time: 3210ms
Asset Size Chunks Chunk Names
index.js 1.04 MB 0 [emitted] index.js
chunk {0} index.js (index.js) 382 kB [rendered]
[0] ./test/unit/index.js 571 bytes {0} [built]
[1] ./~/function-bind/index.js 111 bytes {0} [built]
[2] ./~/function-bind/implementation.js 1.42 kB {0} [built]
[3] ./test/unit/specs .spec$ 177 bytes {0} [built]
[4] ./test/unit/specs/Hello.spec.js 602 bytes {0} [optional] [built]
[5] ./~/vue/dist/vue.common.js 253 kB {0} [built]
[6] ./src/components/Hello.vue 1.38 kB {0} [built]
[7] ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=_v-7c86ba76&scoped=true!./~/vue-loader/lib/selector.js?type=style&index=0!./src/components/Hello.vue 1.37 kB {0} [built]
[8] ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=_v-7c86ba76&scoped=true!./~/vue-loader/lib/selector.js?type=style&index=0!./src/components/Hello.vue 244 bytes {0} [built]
[9] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[10] ./~/vue-style-loader/addStyles.js 6.24 kB {0} [built]
[11] ./~/isparta-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Hello.vue 1.89 kB {0} [built]
[12] ./~/vue-html-loader!./~/vue-loader/lib/template-rewriter.js?id=_v-7c86ba76!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/Hello.vue 109 bytes {0} [built]
[13] ./src ^.\/(?!main(.js)?$) 1.24 kB {0} [built] [8 warnings]
[14] ./src/App.vue 1.25 kB {0} [optional] [built]
[15] ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js!./~/vue-loader/lib/selector.js?type=style&index=0!./src/App.vue 1.25 kB {0} [built]
[16] ./~/css-loader!./~/vue-loader/lib/style-rewriter.js!./~/vue-loader/lib/selector.js?type=style&index=0!./src/App.vue 897 bytes {0} [built]
[17] ./~/isparta-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 4.14 kB {0} [built]
[18] ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue 1.02 kB {0} [built]
[19] ./src/assets/logo.png 9.17 kB {0} [built]
[20] ./src/css/custom.css 926 bytes {0} [optional] [built]
[21] ./~/css-loader!./src/css/custom.css 4.02 kB {0} [built]
[22] ./src/ie10-viewport-bug-workaround.js 2.67 kB {0} [optional] [built]
[24] ./src/images/loading.gif 1.17 kB {0} [optional] [built]
[25] ./src/images/profile_default.jpg 23.8 kB {0} [optional] [built]
[26] ./src/img/loading.gif 1.17 kB {0} [optional] [built]
[27] ./src/js/app.vue 1.26 kB {0} [optional] [built]
[28] ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js!./~/vue-loader/lib/selector.js?type=style&index=0!./src/js/app.vue 1.28 kB {0} [built]
[29] ./~/css-loader!./~/vue-loader/lib/style-rewriter.js!./~/vue-loader/lib/selector.js?type=style&index=0!./src/js/app.vue 201 bytes {0} [built]
[30] ./~/isparta-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./src/js/app.vue 1.93 kB {0} [built]
[31] ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template&index=0!./src/js/app.vue 132 bytes {0} [built]
[33] ./src/sass/abstracts/_color-definitions.scss 1.11 kB {0} [optional] [built]
[34] ./~/css-loader!./~/sass-loader!./src/sass/abstracts/_color-definitions.scss 864 bytes {0} [built]
[35] ./src/sass/abstracts/_functions.scss 1.09 kB {0} [optional] [built]
[36] ./~/css-loader!./~/sass-loader!./src/sass/abstracts/_functions.scss 162 bytes {0} [built]
[37] ./src/sass/abstracts/_mixins.scss 1.08 kB {0} [optional] [built]
[38] ./~/css-loader!./~/sass-loader!./src/sass/abstracts/_mixins.scss 162 bytes {0} [built]
[39] ./src/sass/abstracts/_variables.scss 1.09 kB {0} [optional] [built]
[40] ./~/css-loader!./~/sass-loader!./src/sass/abstracts/_variables.scss 162 bytes {0} [built]
[42] ./src/sass/base/_base.scss 1.07 kB {0} [optional] [built] [1 error]
[44] ./src/sass/base/_fonts.scss 1.08 kB {0} [optional] [built]
[45] ./~/css-loader!./~/sass-loader!./src/sass/base/_fonts.scss 162 bytes {0} [built]
[46] ./src/sass/base/_helpers.scss 1.08 kB {0} [optional] [built] [1 error]
[48] ./src/sass/base/_typography.scss 1.09 kB {0} [optional] [built] [1 error]
[51] ./src/sass/components/_speeddialbutton.scss 1.11 kB {0} [optional] [built]
[52] ./~/css-loader!./~/sass-loader!./src/sass/components/_speeddialbutton.scss 2.71 kB {0} [built]
[54] ./src/sass/layout/_footer.scss 1.08 kB {0} [optional] [built]
[55] ./~/css-loader!./~/sass-loader!./src/sass/layout/_footer.scss 162 bytes {0} [built]
[56] ./src/sass/layout/_header.scss 1.08 kB {0} [optional] [built]
[57] ./~/css-loader!./~/sass-loader!./src/sass/layout/_header.scss 162 bytes {0} [built]
[58] ./src/sass/main.scss 1.05 kB {0} [optional] [built]
[59] ./~/css-loader!./~/sass-loader!./src/sass/main.scss 18.4 kB {0} [built]
[61] ./src/sass/pages/_home.scss 1.07 kB {0} [optional] [built]
[62] ./~/css-loader!./~/sass-loader!./src/sass/pages/_home.scss 162 bytes {0} [built]
[64] ./src/sass/themes/_custom.scss 1.08 kB {0} [optional] [built]
[65] ./~/css-loader!./~/sass-loader!./src/sass/themes/_custom.scss 5.17 kB {0} [built]
[66] ./src/sass/themes/_default.scss 1.08 kB {0} [optional] [built]
[67] ./~/css-loader!./~/sass-loader!./src/sass/themes/_default.scss 162 bytes {0} [built]
[68] ./src/sass/themes/_theme.scss 1.08 kB {0} [optional] [built]
[69] ./~/css-loader!./~/sass-loader!./src/sass/themes/_theme.scss 669 bytes {0} [built]
[71] ./src/sass/vendors/_normalize.scss 1.09 kB {0} [optional] [built]
[72] ./~/css-loader!./~/sass-loader!./src/sass/vendors/_normalize.scss 8.22 kB {0} [built]

WARNING in ./src/images/favicon.ico
Module parse failed: /home/usr/myproject/src/images/favicon.ico Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character ' ' (1:0)
at Parser.pp.raise (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.getTokenFromCode (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2831:8)
at Parser.pp.readToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2526:15)
at Parser.pp.nextToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2518:71)
at Parser.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:1631:10)
at Object.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
at Parser.parse (/home/usr/myproject/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock. (/home/usr/myproject/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/usr/myproject/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /home/usr/myproject/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose as oncomplete
@ ./src ^.\/(?!main(.js)?$)

WARNING in ./src/sass/abstracts/README.md
Module parse failed: /home/usr/myproject/src/sass/abstracts/README.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
at Parser.pp.raise (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.getTokenFromCode (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2831:8)
at Parser.pp.readToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2526:15)
at Parser.pp.nextToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2518:71)
at Parser.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:1631:10)
at Object.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
at Parser.parse (/home/usr/myproject/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock. (/home/usr/myproject/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/usr/myproject/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /home/usr/myproject/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose as oncomplete
@ ./src ^.\/(?!main(.js)?$)

WARNING in ./src/sass/components/README.md
Module parse failed: /home/usr/myproject/src/sass/components/README.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
at Parser.pp.raise (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.getTokenFromCode (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2831:8)
at Parser.pp.readToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2526:15)
at Parser.pp.nextToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2518:71)
at Parser.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:1631:10)
at Object.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
at Parser.parse (/home/usr/myproject/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock. (/home/usr/myproject/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/usr/myproject/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /home/usr/myproject/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose as oncomplete
@ ./src ^.\/(?!main(.js)?$)

WARNING in ./src/sass/pages/README.md
Module parse failed: /home/usr/myproject/src/sass/pages/README.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
at Parser.pp.raise (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.getTokenFromCode (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2831:8)
at Parser.pp.readToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2526:15)
at Parser.pp.nextToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2518:71)
at Parser.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:1631:10)
at Object.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
at Parser.parse (/home/usr/myproject/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock. (/home/usr/myproject/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/usr/myproject/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /home/usr/myproject/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose as oncomplete
@ ./src ^.\/(?!main(.js)?$)

WARNING in ./src/sass/layout/README.md
Module parse failed: /home/usr/myproject/src/sass/layout/README.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
at Parser.pp.raise (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.getTokenFromCode (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2831:8)
at Parser.pp.readToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2526:15)
at Parser.pp.nextToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2518:71)
at Parser.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:1631:10)
at Object.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
at Parser.parse (/home/usr/myproject/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock. (/home/usr/myproject/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/usr/myproject/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /home/usr/myproject/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose as oncomplete
@ ./src ^.\/(?!main(.js)?$)

WARNING in ./src/sass/themes/README.md
Module parse failed: /home/usr/myproject/src/sass/themes/README.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
at Parser.pp.raise (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.getTokenFromCode (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2831:8)
at Parser.pp.readToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2526:15)
at Parser.pp.nextToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2518:71)
at Parser.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:1631:10)
at Object.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
at Parser.parse (/home/usr/myproject/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock. (/home/usr/myproject/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/usr/myproject/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /home/usr/myproject/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose as oncomplete
@ ./src ^.\/(?!main(.js)?$)

WARNING in ./src/sass/vendors/README.md
Module parse failed: /home/usr/myproject/src/sass/vendors/README.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
at Parser.pp.raise (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.getTokenFromCode (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2831:8)
at Parser.pp.readToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2526:15)
at Parser.pp.nextToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2518:71)
at Parser.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:1631:10)
at Object.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
at Parser.parse (/home/usr/myproject/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock. (/home/usr/myproject/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/usr/myproject/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /home/usr/myproject/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose as oncomplete
@ ./src ^.\/(?!main(.js)?$)

WARNING in ./src/sass/base/README.md
Module parse failed: /home/usr/myproject/src/sass/base/README.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
at Parser.pp.raise (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.getTokenFromCode (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2831:8)
at Parser.pp.readToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2526:15)
at Parser.pp.nextToken (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:2518:71)
at Parser.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:1631:10)
at Object.parse (/home/usr/myproject/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
at Parser.parse (/home/usr/myproject/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock. (/home/usr/myproject/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/usr/myproject/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/usr/myproject/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /home/usr/myproject/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose as oncomplete
@ ./src ^.\/(?!main(.js)?$)

ERROR in ./~/css-loader!./~/sass-loader!./src/sass/base/_base.scss
Module build failed:
color: $brand-color;
^
Undefined variable: "$brand-color".
in /home/usr/myproject/src/sass/base/_base.scss (line 26, column 10)
@ ./src/sass/base/_base.scss 4:14-128

ERROR in ./~/css-loader!./~/sass-loader!./src/sass/base/_helpers.scss
Module build failed:
max-width: $max-width; /* 1 */
^
Undefined variable: "$max-width".
in /home/usr/myproject/src/sass/base/_helpers.scss (line 21, column 14)
@ ./src/sass/base/_helpers.scss 4:14-131

ERROR in ./~/css-loader!./~/sass-loader!./src/sass/base/_typography.scss
Module build failed:
color: $text-color;
^
Undefined variable: "$text-color".
in /home/usr/myproject/src/sass/base/_typography.scss (line 5, column 10)
@ ./src/sass/base/_typography.scss 4:14-134
14 06 2016 20:08:29.389:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
14 06 2016 20:08:29.393:INFO [launcher]: Starting browser PhantomJS
14 06 2016 20:08:29.620:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket /#lyp3azbTrAOn0dVIAAAA with id 36085049
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
Error: Cannot find module "!!./../../../node_modules/css-loader/index.js!./../../../node_modules/sass-loader/index.js!./_/home/usr/myproject/test/unit.scss"
at /home/usr/myproject/test/unit/index.js:11056 <- webpack:///src/sass/base/_base.scss:4:0

PhantomJS 2.1.1 (Linux 0.0.0): Executed 0 of 0 ERROR (0.121 secs / 0 secs)

npm ERR! Linux 4.4.0-24-generic
npm ERR! argv "/home/usr/.nvm/versions/node/v5.11.1/bin/node" "/home/usr/.nvm/versions/node/v5.11.1/lib/node_modules/npm/bin/npm-cli.js" "run-script" "unit"
npm ERR! node v5.11.1
npm ERR! npm v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] unit: karma start test/unit/karma.conf.js --single-run
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] unit script 'karma start test/unit/karma.conf.js --single-run'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the myproject package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! karma start test/unit/karma.conf.js --single-run
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs myproject
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls myproject
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/usr/myproject/npm-debug.log

Process finished with exit code 1

musicformellons on 14 Jun 2016

You can host a minimal example reproducing the problem on GitHub and then link to it.

chrisvfritz on 14 Jun 2016

Before I do that please bear with me as it might be a simple mistake on my side relating to the project folder structure of its sass files.

I worked with webpack a little before and then I just required my sass by doing from the main.js:
import '../sass/main.scss';

And from the main.scss other scss files where included.

However in this templates' setup it looks like 'everything' in the src folder is bundled which causes some the scss variable issues as I currently have this folder structure. In src folder:
screenshot from 2016-06-14 20-26-52

Then in the sass folder:
screenshot from 2016-06-14 20-27-24

and finally in the base folder:
screenshot from 2016-06-14 20-27-45

So the order of importing the scss files is then probably messed up and variables can not be resolved. I might try pushing the sass out of src folder and just import them from main.js ?! What is the 'best practice' here?

Thanks!

musicformellons on 14 Jun 2016

Not sure why everything in the src directory would be bundled - that shouldn't happen. My guess is you have a glob import or dynamic require somewhere which is matching everything.

chrisvfritz on 14 Jun 2016

https://github.com/whenthefatladysings/vuejs_webpack_issue

after (in gh folder):
npm install
npm run unit

you will get the error messages mentioned above.

whenthefatladysings on 15 Jun 2016

mmh, for clarity: 'whenthefatladysings' = alias of 'musicformellons'

whenthefatladysings on 15 Jun 2016

var srcContext = require.context('../../src', true, /^\.\/(?!main\.js$).+\.(js|vue)$/i)

Some recommendations for the future:

To better understand Babel, Webpack, Karma, and many other technologies in this template, I recommend checking out egghead.io. They have a lot of great video tutorials on how these technologies work and building up that knowledge base will help you a lot!
When you want to remove a feature such as ESLint, first run a search through the project for the word eslint, so that you can gain greater perspective on how it's being used.
Before deleting files, definitely make sure you know what they do! .babelrc is necessary for Babel to work. Since you're still using the ES2015+ syntax in JavaScript files throughout the project, I assume breaking Babel was not intentional.
This last item is especially important. This was _not_ a minimal example. A minimal example of the problem would have been one where the _minimum number of changes_ have been made to a fresh project in order to reproduce the problem. In most projects, they simply would not help you when providing an example like this. And even here, going through code with so many changes that have nothing to do with the problem means it takes longer for me diagnose an issue, which means I have less time to help people. 😕

I hope this helps.

chrisvfritz on 16 Jun 2016

👍12

Adjusting the test coverage as you suggested worked. Thanks for all useful recommendations.

musicformellons on 20 Jun 2016

... your tightly coupled SCSS raises errors. In _base.scss for example, you get an unknown variable error because the module assumes some global state created by main.scss.

Thanks for explaining this. I made the same mistake.

robert-claypool on 1 Dec 2016

Didn't know about the src directory assumption. Thanks @chrisvfritz !

chmartinez on 19 Apr 2017

From @chrisvfritz 's comment above:

var srcContext = require.context('../../src', true, /^\.\/(?!main\.js$).+\.(js|vue)$/i);

I found the code needing to be replaced by the above code in /test/unit/index.js

thedanotto on 8 Aug 2018

Was this page helpful?

0 / 5 - 0 ratings

Related issues

http://eslint.org/docs/rules/no-unused-vars '<component>' is defined but never used

Joshfindit · 3Comments

Failed to Import d3 in vue script

brucejcw · 4Comments

Reference to eslint formatter left in webpack config when not including eslint in setup

hultberg · 3Comments

Uncaught SyntaxError: Use of const in strict mode

happy760690 · 3Comments

Error During Build

Splode · 3Comments