Answer the question
In order to leave comments, you need to log in
B
B
BonBon Slick2020-01-21 10:55:06
BonBon Slick, 2020-01-21 10:55:06
Exception occurred while loading your tests, Unexpected token { in .css?
I don’t understand where I messed up, I’m trying to set up tests according to the example and the docks
. Whether this is a conflict of some kind of configs, or packages. Or overlooked something.
The error is somewhere in 3 files, packages.json, webpack.config, babelrc
Footcloth 1
{
"name": "hint-v0.0.1",
"description": "Hint site",
"author": "BonBonSlick",
"private": true,
"scripts": {
...
"test": "cross-env NODE_ENV=development --reporter=lcov --reporter=text mocha-webpack --webpack-config build/webpack.config.dev.js --require test/setup.js test/*.spec.js"
},
"dependencies": {
"@babel/core": "^7.8.3",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@fortawesome/fontawesome-free": "^5.5.0",
"@mintuz/horizon": "https://github.com/BonBonSlick/horizon.git",
"@typescript-eslint/eslint-plugin": "^2.17.0",
"@typescript-eslint/parser": "^2.17.0",
...
"bootstrap": "^4.4.1",
"cross-env": "^6.0.3",
"dotenv": "^8.0.0",
...
"eslint-plugin-vue-libs": "^4.0.0",
"faker": "^4.1.0",
"i": "^0.3.6",
"ismobilejs": "^1.0.3",
"js-cookie": "^2.2.0",
"jsdom": "^16.0.1",
"jsdom-global": "^3.0.2",
"magic-grid": "^3.2.4",
"mini-css-extract-plugin": "^0.8.0",
"moment": "^2.22.2",
"npm": "^6.10.2",
"preload-webpack-plugin": "^3.0.0-beta.4",
"prettier": "^1.19.1",
"resumablejs": "^1.1.0",
"secure-ls": "^1.2.5",
"source-map-loader": "^0.2.4",
"standard": "^14.3.1",
"typescript": "^3.7.5",
"url-loader": "^1.1.2",
"video.js": "^7.6.0",
"vue": "^2.5.17",
...
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.7.0",
"uglifyjs-webpack-plugin": "^2.1.3",
"html-webpack-plugin": "^4.0.0-beta.11",
"copy-webpack-plugin": "^5.0.4",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"chai": "^4.2.0",
"chromedriver": "^79.0.0",
"css-loader": "^0.28.11",
"debug": "^4.1.1",
"eslint-plugin-vue": "^6.1.2",
"expect": "^24.9.0",
"file-loader": "^4.2.0",
"mocha": "^7.0.0",
"node-sass": "^4.13.1",
"popper.js": "^1.12",
"sass-loader": "^7.1.0",
"style-loader": "^0.13.1",
"vue-loader": "^15.2.2",
"vue-router-sitemap": "^0.0.4",
"vue-template-compiler": "^2.5.17",
"vue-test-utils": "^1.0.0-beta.11",
"watch": "^1.0.2",
"webpack-node-externals": "^1.7.2",
"friendly-errors-webpack-plugin": "^1.7.0",
"mocha-webpack": "^2.0.0-beta.0",
"script-ext-html-webpack-plugin": "^2.1.4",
"webpack": "^4.41.5",
"webpack-bundle-analyzer": "^3.4.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.8.0",
"webpack-merge": "^4.1.4"
}
}Footcloth 2
'use strict';
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'development',
entry: [
'./src/app.js',
],
watch: true,
watchOptions: {
poll: true,
},
// @todo - for server side rendering
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'main.js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax', // <style lang="sass">
},
},
},
{
test: /\.js$/,
use: 'source-map-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
// 'vue-style-loader',
MiniCssExtractPlugin.loader, //'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[path][name]__[local]',
sourceMap: true,
},
},
],
},
{
test: /\.scss$/,
use: [
// Adds CSS to the DOM by injecting a `<style>` tag
MiniCssExtractPlugin.loader, //'style-loader',
{
// Interprets `@import` and `url()` as JS `import()/require()` and will resolve them
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[hash:base64:4]__[local]',
sourceMap: true,
},
},
'sass-loader',
],
},
{
test: /\.(png|jpg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
},
},
{
test: /\.(woff(2)?|ttf|eot|otf|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
},
},
],
},
],
},
plugins: [
new VueLoaderPlugin(),
// new webpack.SourceMapDevToolPlugin({}),
new FriendlyErrorsPlugin(),
new webpack.HotModuleReplacementPlugin(),
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'defer',
preload: {
test: /\.js$/,
chunks: 'async',
},
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
ignoreOrder: false,
}),
new CopyWebpackPlugin([
{
from: path.join(__dirname, '../node_modules/@fortawesome/fontawesome-free/webfonts'),
to: path.join(__dirname, '../dist/static/webfonts/'),
},
{
from: path.join(__dirname, '../static'),
to: path.join(__dirname, '../dist/static'),
},
{
from: path.join(__dirname, '../public'),
to: path.join(__dirname, '../dist/'),
},
]),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index_dev.html',
inject: true,
}),
],
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
vue$: 'vue/dist/vue.js',
'@': path.resolve(__dirname, '../src'),
},
},
// performance: {hints: true}, // @todo fixme
optimization: {
splitChunks: {
chunks: 'all',
},
},
};
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
...
},
}),
]);yarn test ERR
[email protected]:/var/www/test$ yarn test
yarn run v1.9.4
WEBPACK Compiling...
[=== ] 10% (building)You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
[======================== ] 95% (emitting)
DONE Compiled successfully in 699ms 9:47:47 AM
WEBPACK Compiled successfully in 699ms
MOCHA Testing...
RUNTIME EXCEPTION Exception occurred while loading your tests
/var/www/test/dist/main.css:2
h1[data-v-b32c831a], h2[data-v-b32c831a] {
^
SyntaxError: Unexpected token {
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object._module2.default._extensions.(anonymous function) [as .js] (/var/www/test/node_modules/mocha-webpack/lib/util/registerRequireHook.js:148:12)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at /var/www/test/node_modules/mocha/lib/mocha.js:308:36
at Array.forEach (<anonymous>)
at Mocha.loadFiles (/var/www/test/node_modules/mocha/lib/mocha.js:305:14)
at Mocha.run (/var/www/test/node_modules/mocha/lib/mocha.js:846:10)
.....
at runCallback (timers.js:705:18)
at tryOnImmediate (timers.js:676:5)
at processImmediate (timers.js:658:5)
(node:3139) DeprecationWarning: "useColors()" is DEPRECATED, please use "color()" instead.
(node:3139) DeprecationWarning: "useInlineDiffs()" is DEPRECATED, please use "inlineDiffs()" instead.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[email protected]:/var/www/test$
Similar questions
T
Y
T
thatmaniscool2022-01-16 20:49:49
Is it possible to override a Java 11 anonymous class method?
2Reply
I
F
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question