Eslint parse errors

Question

I just configured eslint in my demo project and when I run eslint, I get below errors:

I am still learning so I am lost on how best to resolve this.

C:\Users\G-L SYSTEMS\Desktop\js-dev-env-demo\buildScripts\srcServer.js
  6:20  error    Parse errors in imported module '../webpack.config.dev.js': Unexpected token import (7:41)  import/namespace
  6:20  error    Parse errors in imported module '../webpack.config.dev.js': Unexpected token import (7:41)  import/default
  6:20  warning  Parse errors in imported module '../webpack.config.dev.js': Unexpected token import (7:41)  import/no-named-as-default
  6:20  warning  Parse errors in imported module '../webpack.config.dev.js': Unexpected token import (7:41)  import/no-named-as-default-member

C:\Users\G-L SYSTEMS\Desktop\js-dev-env-demo\webpack.config.dev.js
  7:41  error  Parsing error: Unexpected token import

✖ 5 problems (3 errors, 2 warnings)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! javascript-development-environment@1.0.0 lint: `esw webpack.config.* src buildScripts --color`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the javascript-development-environment@1.0.0 lint 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:
npm ERR!     C:\Users\G-L SYSTEMS\AppData\Roaming\npm-cache\_logs\2020-09-24T21_49_41_402Z-debug.log

Below is my .eslintrc.json file:

{
  "root": true,
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings"
  ],
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    "no-console": 1
  }
}

and my webpack.config.dev.js file is:

import HtmlWebpackPlugin from "html-webpack-plugin";
import path from "path";
import { dirname } from "path";
import { config } from "process";
import { fileURLToPath } from "url";

const __dirname = dirname(fileURLToPath(import.meta.url));

export default {
  mode: "development",
  devtool: "inline-source-map",
  target: "web",
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
    filename: "bundle.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true },
          },
        ],
      },
    ],
  },
};

Any help to resolve the error messages? Could the problem be with my configuration settings, version of eslint.

Answer 1

I eventually resolved the problems by disabling some of the rules. See new rules below:

"parser": "babel-eslint",
  "rules": {
    "no-console": 1,
    "import/no-unresolved": [0, { "commonjs": true, "amd": true }],
    "import/named": 0,
    "import/no-named-as-default": 0,
    "import/no-named-as-default-member": 0,
    "import/namespace": 0,
    "import/default": 0,
    "import/export": 0
  }

I addition, I added the following line to my eslintrc.json file:

"parser": "babel-eslint"

Adding the "parserOptions" property to your .eslintrc is no longer enough for particular situations in ES6 classes as ESLint is currently unable to parse it on its own. Such situations will throw an error of:

error Parsing error: Unexpected token = 

The solution is to have ESLint parsed by a compatible parser. just add:

"parser": "babel-eslint"

to your .eslintrc file and run

npm install babel-eslint --save-dev or yarn add -D babel-eslint .

These resolved my issues.