Related
I tried to add vuetify using webpack but getting SassError: Expected Newline
18:25:32 webpacker.1 | Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
18:25:32 webpacker.1 | SassError: Expected newline.
18:25:32 webpacker.1 | ╷
18:25:32 webpacker.1 | 1 │ var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js");
Vuetify Plugin:
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Installed Packages:
{
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "4.2.2",
"bootstrap": "^4.4.1",
"css-loader": "^3.4.2",
"deepmerge": "^4.2.2",
"fibers": "^4.0.2",
"howler": "^2.1.3",
"jquery": "^3.4.1",
"popper.js": "^1.16.1",
"pug": "^2.0.4",
"pug-plain-loader": "^1.0.0",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"url-loader": "^3.0.0",
"vue": "^2.6.11",
"vue-loader": "^15.9.0",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"vuetify": "^2.2.18"
}
Loader Details:
module.exports = {
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
}
Need to remove these loaders:
environment.loaders.delete('sass')
environment.loaders.delete('moduleSass')
environment.loaders.delete('moduleCss')
environment.loaders.delete('css')
And then need to add sass and scss loaders.
https://github.com/rails/webpacker/issues/2235
When including a Sass file (in node_modules) in my Vue component <style> tag, the file is located, but any relative modules to that file are not. Everything seems configured correctly, but I'm obviously missing something. What gives?
I've tried installing/uninstalling various Webpack loaders (including css-loader), deleted and reinstalled node_modules, tried various PostCSS configurations, but nothing has made any progress so far.
Thanks in advance.
Vue component (IconicIcon.vue):
<template>
<div>
<span class="oi oi-icon-name" :title="icon" aria-hidden="true"></span>
</div>
</template>
<script>
export default {
name: "iconic-icon",
props: {
icon: String
}
};
</script>
<style scoped lang="scss">
$icon-font-path: "~open-iconic/font/css/fonts";
#import "~open-iconic/font/css/open-iconic-bootstrap.scss";
</style>
open-iconic-bootstrap.scss:
/* Bootstrap */
/* Override Bootstrap default variable */
$icon-font-path: '../fonts/' !default;
#font-face {
font-family: 'Icons';
src: url('#{$icon-font-path}open-iconic.eot');
src: url('#{$icon-font-path}open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('#{$icon-font-path}open-iconic.woff') format('woff'), url('#{$icon-font-path}open-iconic.ttf') format('truetype'), url('#{$icon-font-path}open-iconic.svg#iconic-sm') format('svg');
font-weight: normal;
font-style: normal;
}
... (snip)
relevant file structure:
root/
src/
components/
IconicIcon.vue
node_modules/
open-iconic/
font/
css/
open-iconic-bootstrap.scss
fonts/
open-iconic.eot
open-iconic.otf
open-iconic.svg
open-iconic.ttf
open-iconic.woff
error:
WAIT Compiling... 8:37:49 PM
98% after emitting CopyPlugin
ERROR Failed to compile with 4 errors 8:37:50 PM
These relative modules were not found:
* ../fonts/open-iconic.eot in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePost
Loader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules
/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style&
index=0&id=468ee29c&scoped=true&lang=scss&
* ../fonts/open-iconic.svg in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePost
Loader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules
/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style&
index=0&id=468ee29c&scoped=true&lang=scss&
* ../fonts/open-iconic.ttf in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePost
Loader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules
/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style&
index=0&id=468ee29c&scoped=true&lang=scss&
* ../fonts/open-iconic.woff in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePos
tLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_module
s/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style
&index=0&id=468ee29c&scoped=true&lang=scss&
package.json:
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "concurrently -r -k -n doc,nod,vue -c magenta,green,cyan \"docker-compose up\" \"nodemon server/app.js\" \"vue-cli-service serve\"",
"build": "vue-cli-service build",
"start": "node server/app.js",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e"
},
"dependencies": {
"apollo-server": "^2.9.15",
"babel-loader": "^8.0.6",
"bootstrap": "^4.4.1",
"core-js": "^3.4.3",
"eslint": "^6.8.0",
"graphql": "^14.5.8",
"graphql-type-json": "^0.2.1",
"jquery": "^3.4.1",
"js-yaml-loader": "^1.2.2",
"leaflet": "^1.6.0",
"lowdb": "^1.0.0",
"mkdirp": "^0.5.1",
"mongodb": "^3.4.1",
"open-iconic": "^1.1.1",
"popper.js": "^1.16.0",
"shortid": "^2.2.8",
"slugify": "^1.3.6",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-e2e-cypress": "^4.1.0",
"#vue/cli-plugin-router": "^4.1.0",
"#vue/cli-plugin-unit-jest": "^4.1.0",
"#vue/cli-plugin-vuex": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"#vue/test-utils": "1.0.0-beta.29",
"concurrently": "^5.0.2",
"graphql-tag": "^2.9.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"jest": {
"preset": "#vue/cli-plugin-unit-jest"
}
}
I solved this by just using the CSS, instead of the Sass. Seems like a copout, but I've spent too much time on this already.
<template>
<div>
<span class="oi" :title="icon" aria-hidden="true" :class="`oi-${icon}`"></span>
</div>
</template>
<script>
export default {
name: "iconic-icon",
props: {
icon: String
}
};
</script>
<style scoped lang="scss">
#import "~open-iconic/font/css/open-iconic-bootstrap.css";
</style>
This kind of issues could be related to the way that the saas loader works.
I've encountered the same problem in one of my projects and resolved it by moving the font directory to the assets folder.
If you google for this you will find that other found the same solution as I am posting here.
In your case you should change the $icon-font-path variable to the following:
$icon-font-path: '/assets/fonts/' !default;
It will work!
Production build fails with the following error:
ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'minimize'. These properties are valid:
object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? }
at validate (/Users/username/Sites/projectname/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:85:11)
at Object.loader (/Users/username/Sites/projectname/node_modules/css-loader/dist/index.js:34:28)
Using this webpack template: http://vuejs-templates.github.io/webpack/, updated to Webpack 4 and faced build issues, package.json:
{
"name": "projectname",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config webpack.config.js --port 3000 --hot",
"start": "npm run dev",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"#vue/cli-service": "^3.2.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"cross-env": "^5.2.0",
"css-loader": "^3.2.1",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"style-loader": "^1.0.1",
"swiper": "^4.5.0",
"v-tabs-router": "^1.4.0",
"vee-validate": "^2.1.0-beta.9",
"vue": "^2.5.2",
"vue-awesome-swiper": "^3.1.3",
"vue-backtotop": "^1.6.1",
"vue-carousel": "^0.18.0",
"vue-cleave-component": "^2.1.2",
"vue-instant": "^1.0.2",
"vue-jsonp": "^0.1.8",
"vue-magic-line": "^0.2.1",
"vue-masked-input": "^0.5.2",
"vue-resource": "^1.5.1",
"vue-router": "^3.0.2",
"vue-select": "^2.5.1",
"vue-slider-component": "^2.8.0",
"vue-smooth-scroll": "^1.0.13",
"vuejs-datepicker": "^1.5.3",
"vuelidate": "^0.7.4",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^5.0.2",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^3.2.0",
"node-notifier": "^5.1.2",
"node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-url": "^8.0.0",
"rimraf": "^2.6.0",
"sass-loader": "^8.0.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^1.1.2",
"vue-loader": "^14.2.2",
"vue-resource": "^1.5.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
I've checked with grep -rl 'minimize' . in a project root, but didn't found any related options. Wth..
This has to do with a breaking change in the module. According to semver rules, a major change (first digit x of version x.y.z) is a breaking change.
In this case the old version syntax uses
{
loader: 'postcss-loader',
options: {
plugins: postCSSPlugins
}
}
whereas the new version in options uses nested postcssOptions before plugins
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: postCSSPlugins
}
}
}
I also encountered this error when updating to webpack 4 and using MiniCssExtractPlugin
I was able to eliminate the error and get a successful build by using an older version of ccs-loader
These versions worked for me
"devDependencies": {
"css-loader": "1.0.1",
OR
"css-loader": "^0.28.0",
css-loader 2* and 3* gave me the error.
UPDATE after testing publish: using the old version of the css-loader causes the css to fail to load when rendering the web site in a browser. So this appears to not be a solution.
I was having the same issue after I ran yarn upgrade --latest command.
It changed sass-loader version from 7.1.0 to 8.0.0. After that getting the same error.
There might be change in sass-loader options and due to that, this error occurred. You can check release: https://github.com/webpack-contrib/sass-loader/releases and updated options https://github.com/webpack-contrib/sass-loader
Try to remove/change sass-loader options, that can help you to resolve it.
Hope this can help, it would be great if can you share webpack.config.js file.
Cheers~
I had a similar problem upgrading to webpack 4. I used Vue.js CLI which generated a build/utils.js file that effectively has a configurable webpack based on whether I am in a development or a production environment.
Pertinent utils.js lines in auto generated (failing after upgrading) code:
var ExtractTextPlugin = require('extract-text-webpack-plugin')
exports.cssLoaders = function (options) {
options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.loader({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
I tried the simple, "Let's just update the module.":
var ExtractTextPlugin = require('mini-css-extract-plugin')
Which gave me the error that you had. After much messing around with the files, I used the "Easter Egg Troubleshooting Strategy", and found that I could do the following and get it to work. What worked was the following:
npm i extract-loader --save-dev
then modify build/utils.js:
exports.cssLoaders = function (options) {
options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
// minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ['extract-loader'].concat(loaders)
// return ExtractTextPlugin.loader({
// use: loaders,
// fallback: 'vue-style-loader'
// })
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
Notice, I commented out line 9, which is the source of my error. I also removed my sole dependency to the mini-css-extract-plugin with the extract-loader module.
// minimize: process.env.NODE_ENV === 'production',
Now I have to figure out why eslint is not liking my Vue syntax.
I am upgrading Vuetify in my Vue CLI 3 project from version 1.5 to 2. I have followed these instructions, doing a full install. Since the upgrade, running 'npm run serve' gives me a ton of errors looking like this:
error in ./node_modules/vuetify/src/components/VGrid/_grid.sass
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'indentedSyntax'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (C:\Users\kristoffer.dahl\Documents\Prosjekter\fridgein\fridgein_fe\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:50:11)
at Object.loader (C:\Users\kristoffer.dahl\Documents\Prosjekter\fridgein\fridgein_fe\node_modules\sass-loader\dist\index.js:36:28)
All errors look the same, except for the Vuetify component mentioned.
This is my package.json:
{
"name": "fridgein_fe",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.22",
"#fortawesome/free-brands-svg-icons": "^5.10.2",
"#fortawesome/free-regular-svg-icons": "^5.10.2",
"#fortawesome/free-solid-svg-icons": "^5.10.2",
"#fortawesome/vue-fontawesome": "^0.1.7",
"#vue/cli": "^3.11.0",
"#vue/cli-shared-utils": "^3.11.0",
"auth0-js": "^9.11.3",
"axios": "^0.18.1",
"dotenv": "^8.1.0",
"es6-promise": "^4.2.8",
"jquery": "^3.4.1",
"js-cookie": "^2.2.1",
"popper.js": "^1.14.7",
"register-service-worker": "^1.6.2",
"sockjs-client": "^1.3.0",
"vue": "^2.6.10",
"vue-float-action-button": "^0.4.4",
"vue-google-charts": "^0.3.2",
"vue-plugin-load-script": "^1.2.0",
"vue-router": "^3.0.2",
"vuetify": "^2.1.0",
"vuex": "^3.1.1",
"vuex-persistedstate": "^2.5.4",
"webstomp-client": "^1.2.6"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.4.0",
"#vue/cli-plugin-eslint": "^3.4.0",
"#vue/cli-plugin-pwa": "^3.11.0",
"#vue/cli-service": "^3.5.1",
"babel-eslint": "^10.0.1",
"babel-plugin-module-resolver": "^3.2.0",
"css-loader": "^2.1.1",
"deepmerge": "^4.0.0",
"eslint": "^5.0.0",
"eslint-plugin-vue": "^5.2.3",
"eslint-plugin-vuetify": "^1.0.0-beta.3",
"fibers": "^4.0.1",
"sass": "^1.23.0",
"sass-loader": "^8.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0",
"webpack": "^4.41.0"
},
This is my vue.config.js:
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "~#/sass/main.scss"`
},
},
},
}
I have checked out and tried every solution presented in relevant issues on the developers' Github pages, but none has has any effect.
Has anyone else encountered this?
I had the same issue and fixed it by downgrading sass-loader by setting
"sass-loader": "7.3.1",
in package.json.
This was suggested on the Vuetify Discord
Actually you are using sass-loader 8+ and it has an option a little bit different.
Try using prependData instead of data.
Check this github issue
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `#import "~#/sass/main.scss"`
}
}
}
}
Update for those using version 10+. prependData is no longer valid. However you can use additionalData as a drop-in replacement.
Using the webpack 5.1.3 and sass-loader version 10.0.3, I had to use a different syntax (additionalData instead of prependData), as bellow:
webpack.config.js
{
test: /\.(css|scss|sass|less)$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true,
additionalData: '#import "assets/scss/_variables.scss";'
},
},
},
],
},
Bear in mind the syntax requires the double quotes in the path and the semicolon before the end of the single quote just as if you were writing a normal scss file.
Example:
'#import "path/_file.scss";'
In case you need to import multiple files you can use the template string symbol (``) as bellow:
{
test: /\.(css|scss|sass|less)$/,
use: [
...
{
...
options: {
sourceMap: true,
additionalData: `#import "assets/scss/_variables.scss";
#import "assets/scss/_mixins.scss";
#import "assets/scss/_misc.scss";`
},
},
},
],
},
You can also take the advantage of template string as bellow:
`#import "${path.resolve(APP_DIR, '/assets/scss/')}/_variables.scss";`
Be advised: I tried this approach to reduce bundle size and the result was terrible as when you start to see what the webpack is actually doing you return to the basic import all needed styles in your main component as sass-loader will actually prepend in multiple components the styles you inform in the additional data. In my case the bundle got 3 times it's original size.
Cheers
If you use NUXT you should configure like this：
//nuxt.config.js
loaders: {
less: {
lessOptions: {
javascriptEnabled: true,
modifyVars: {
'primary-color': '#5c6ac4',
'layout-body-background': '#fff'
}
}
}
}
I have written many components in vuetify that are reusable. I am using jest testing framework for unit testing. When I run 'npm run test', the test fails with 'SyntaxError: Unexpected identifier'.
All my babel config and jest config are in package.json file. When I create a spec file without any vuetify components, test works. But once I add vuetify, it distorts. I first used localValue from #vue/test-utils to consume vuetify. It didn't work. Then I used Vue.use(Vuetify) and still it didn't work.
package.json
{
"name": "xyz",
"version": "0.2.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test": "jest",
"clear_jest": "jest --clearCache"
},
"dependencies": {
"#contentful/rich-text-html-renderer": "^13.0.0",
"#storybook/addon-a11y": "^4.1.4",
"avoriaz": "^6.3.0",
"axios": "^0.18.0",
"axios-mock-adapter": "^1.16.0",
"contentful": "^7.3.0",
"deepdash": "^1.9.5",
"eslint": "^5.15.3",
"jest": "^24.5.0",
"jest-serializer-vue": "^2.0.2",
"json-server": "^0.14.2",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"nightwatch": "^1.0.19",
"node-sass": "^4.11.0",
"purgecss": "^1.1.0",
"sass-loader": "^7.1.0",
"storybook-vue-router": "^1.0.2",
"tailwindcss-aspect-ratio": "^1.0.1",
"tailwindcss-gradients": "^1.1.0",
"tailwindcss-transition": "^1.0.5",
"vee-validate": "^2.2.2",
"vue": "^2.5.19",
"vue-faq-accordion": "^1.2.1",
"vue-jest": "^3.0.4",
"vue-router": "^3.0.2",
"vue-template-compiler": "^2.5.20",
"vuelidate": "^0.7.4",
"vuetify": "^1.5.7",
"vuex": "^3.1.0",
"vuex-persist": "^2.0.0"
},
"devDependencies": {
"#babel/core": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"#storybook/addon-actions": "^4.1.0",
"#storybook/addon-links": "^4.1.0",
"#vue/cli-plugin-babel": "^3.2.0",
"#vue/cli-plugin-eslint": "^3.2.1",
"#vue/cli-service": "^3.2.0",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"babel-preset-vue": "^2.0.2",
"chromedriver": "^2.46.0",
"concurrently": "^4.1.0",
"cross-env": "^5.2.0",
"cucumber": "^5.1.0",
"cucumber-html-reporter": "^4.0.5",
"cucumber-pretty": "^1.5.0",
"eslint": "^5.15.3",
"geckodriver": "^1.16.0",
"http-server": "^0.11.1",
"jest-transform-stub": "^2.0.0",
"mkdirp": "^0.5.1",
"nightwatch-api": "^2.1.3",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-storybook": "^0.5.0",
"vue-cli-plugin-svg": "^0.1.2",
"vue-cli-plugin-tailwind": "^0.4.0",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-svg-loader": "^0.11.0",
"vue-template-compiler": "^2.5.21",
"vuetify": "^1.5.7",
"vuetify-loader": "^1.0.5"
},
"babel": {
"presets": [
[
"#babel/preset-env",
{
"modules": "commonjs",
"targets": {
"node": "current"
}
}
]
]
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 5%",
"last 5 versions",
"not ie <= 10"
],
"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
],
"transformIgnorePatterns": [
"<rootDir>/node_modules/(?!vuetify)"
],
"transform": {
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
}
}
}
Toolbar.vue
<template>
<div>
<v-toolbar class="toolbar" height="70">
<v-toolbar-title class="toolbar-title" #click="goToHome()">{{ title }}</v-toolbar-title>
<v-spacer></v-spacer>
<Profile v-if="user.status"/>
</v-toolbar>
</div>
</template>
<script>
import Profile from '#/components/Profile'
export default {
props: {
title: {
type: String,
required: true
}
},
components: {
Profile
},
methods: {
goToHome() {
this.$router.push('/home')
}
}
}
</script>
<style scoped lang="postcss">
.toolbar-title {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.toolbar {
#apply bg-secondary !important;
}
</style>
Toolbar.spec.js
import { shallowMount } from '#vue/test-utils'
import Toolbar from '#/components/List'
import Vuetify from 'vuetify'
import Vue from 'vue'
describe('Toolbar.vue', () => {
let wrp
beforeEach(() => {
Vue.use(Vuetify)
wrp = shallowMount(Toolbar)
})
it('Toolbar is a vue instance', () => {
expect(wrp.isVueInstance()).toBeTruthy()
})
})
Desired result should be:
> jest
PASS test/unit/component/Toolbar.spec.js
Toolbar.vue
√ Toolbar is a vue instance (21ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.882s
Ran all test suites.
Actual:
C:\rahul13615>npm run test
> myproject#0.2.0 test C:\rahul13615\
> jest
FAIL test/unit/component/Toolbar.spec.js
● Test suite failed to run
C:\rahul13615\node_modules\#babel\runtime-corejs2\helpers\esm\typeof.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import _Symbol$iterator from "../../core-js/symbol/iterator";
^^^^^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/#jest/transform/build/ScriptTransformer.js:451:17)
at ScriptTransformer.transform (node_modules/#jest/transform/build/ScriptTransformer.js:493:19)
at Object.<anonymous> (node_modules/vuetify/dist/vuetify.js:91:39)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 6.328s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myproject#0.2.0 test: `jest`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the myproject#0.2.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
#barakbd is actually right, don't know why his answer is downvoted.
You can first try manually clearing cache with jest --clearCache and if that doesn't work, restart should help which seems to clear another cache that also affected jest.
Restart solved the issue for me.
Had the same error message with vue-test-utils via jest. Cause was of course different, mine was first import "highlight.js/styles/atom-one-dark.css". After commenting out, something other errored same style. Turned out that a cyclic dependency was the cause. In my case, main.ts exported a function used by store.ts. And main.ts used exported from store.ts. Moved exported function to utils.ts, error disappeared.
Restart computer.
I kid you not, I had the same error, tried figuring it out for 2 days. A full system restart solved the issue.