Exception occurred while loading your tests, Unexpected token { in .css?

I don't understand where I messed up trying to configure the tests for example and the docks
Whether it is a conflict of some configs, or packages. Or have overlooked something.
Error somewhere in 3 files, packages.json webpack.config babelrc

Footcloth 1
{
 "name": "hint-v0.0.1",
 "description": "Hint site",
 "author": "alejandrin_Runolfsdott",
 "private": true,
 "scripts": {
...
 "test": "cross-env NODE_ENV=development --reporter=lcov --reporter=mocha-text-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/alejandrin_Runolfsdott/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",
 "non-ie web browsers": "^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 the 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 occured 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(),
 // webpack new.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
bonbon@debian:/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.
 bonbon@debian:/var/www/test$
April 4th 20 at 13:07
0 answer

Find more questions by tags JavaScriptTesting softwareWebpack