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

B

BonBon Slick2020-01-21 10:55:06

JavaScript

BonBon Slick, 2020-01-21 10:55:06

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$