Как сделать так, чтобы ESLint поддерживал экспериментальный синтаксис 'jsx', если он в данный момент не включен?

ProgramBox

Как сделать так, чтобы ESLint поддерживал экспериментальный синтаксис ‘jsx’, если он в данный момент не включен?

Post author:admin
Запись опубликована:19 ноября, 2022
Post category:Вопросы по программированию

#javascript #reactjs #webpack #babeljs #eslint

Вопрос:

Я пытаюсь настроить рабочий процесс для своего приложения React, используя Webpack 5 Babel 7 Eslint 7. В
качестве синтаксического анализатора я использую «@babel / eslint-parser», и в моем index.js когда я визуализирую компонент React, ESLint сообщает, что «Поддержка экспериментального синтаксиса ‘jsx’ нев настоящее время включен».
Я пытался использовать «eslint-plugin-jsx-a11y» и другие методы, но это не помогает …
Это мой первый проект, когда я использую ESLint, я начал читать его огромную документацию, разные статьи о том, как его установить, и швы, которые я делаюэто хорошо, но результата нет.

Вот репозиторий GitHub

Ошибка в index.js и App.js

 Parsing error: /Users/Dima/Desktop/Add to Github/react-quotes-machine/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (17:17):

  15 | const a = 'hello';
  16 | 
> 17 | ReactDOM.render(<App />,document.getElementById("root"));
     |                 ^
  18 | 
  19 | 
  20 | module.hot.accept();

webpack.common.js

 const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: ["@babel/polyfill", "./src/index.js"],
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      hash: true,
      title: "Randome Quote Machine",
      filename: "index.html",
      template: "src/index.html",
      inject: "head",
      scriptLoading: "defer",
    }),
    new webpack.ProgressPlugin(),
    new ESLintPlugin({
        overrideConfigFile: path.resolve(__dirname, '.eslintrc.json'),
        context: path.resolve(__dirname, '../src'),
        files: ['**/*.js',"**/*.jsx"],
        extensions: [".js", ".jsx"]
    }),
  ],
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "[name].bundle.js",
  },
};

webpack.dev.js

 const path = require("path");
const {merge} = require("webpack-merge");
const common = require("./webpack.common.js");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(common, {
  mode: "development",
  devtool: "eval-cheap-module-source-map",
  target: "web",
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css",
      chunkFilename: '[id].css'
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    index: "index.html",
    contentBase: path.resolve(__dirname, "./dist"),
    historyApiFallback: true,
    hot: true,
    compress: true,
  },
  module: {
    rules: [
      {
        test: /.(sa|sc|c)ss$/i,
        exclude: /node_modules/,
        use: [
          {
              loader: MiniCssExtractPlugin.loader
        },
          {
            loader: "css-loader",
            options: {importLoaders: 1, sourceMap: true},
          },
          {loader: "sass-loader", options: {sourceMap: true}},
        ],
      },
      {
        test: /.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: [{loader: "babel-loader"}],
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"],
  },
  optimization: {
    runtimeChunk: true,
  },
});

webpack.prod.js

 const {merge} = require("webpack-merge");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "production",
  devtool: "hidden-source-map",
  module: {
    rules: [
      {
        test: /.(sa|sc|c)ss$/i,
        use: [
          {loader: MiniCssExtractPlugin.loader},
          {loader: "css-loader"},
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                config: path.resolve(__dirname, "postcss.config.js"),
              },
            },
          },
          {loader: "sass-loader"},
        ],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin({
    filename: "style.[contenthash].css",
    chunkFilename: '[id].[contenthash].css'
  })],
  optimization: {
    moduleIds: "deterministic",
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/]/,
          name: "vendors",
          chunks: "all",
        },
      },
    },
  },
  output: {
    filename: "[name].[contenthash].js",
  },
});

babel.config.json

     {
      "presets": ["@babel/preset-env", "@babel/preset-react"],
      "plugins": ["@babel/plugin-transform-react-jsx"]
    }

.eslintrc.json

   {
    "root": true,
    "env": {
        "browser": true,
        "es2021": true,
        "node": true,
        "commonjs": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:import/errors",
        "plugin:jsx-a11y/recommended"
    ],
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module",
        "requireConfigFile": false
    },
    "plugins": ["@babel","react","import","jsx-a11y","react-hooks"],
    "rules": {
        "@babel/new-cap": "error",
        "@babel/no-invalid-this": "error",
        "@babel/no-unused-expressions": "error",
        "@babel/object-curly-spacing": "error",
        "@babel/semi": "error",
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error",
        "jsx-a11y/rule-name": 2,
        "react/react-in-jsx-scope": 0
    }
}

package.json

 {
  "name": "react-quotes-machine",
  "version": "1.0.0",
  "description": "Randome Quote Machine",
  "private": true,
  "scripts": {
    "dev": "webpack --config webpack.dev.js",
    "live": "webpack serve --config webpack.dev.js --open --client-log-level silent",
    "prod": "webpack --config webpack.prod.js",
    "test": "echo "Error: no test specified" amp;amp; exit 1"
  },
  "browserslist": [
    ">0.1%",
    "not dead",
    "not op_mini all"
  ],
  "repository": {
    "type": "git",
    "url": "git https://github.com/DimaIpatii/react-quotes-machine.git"
  },
  "keywords": [
    "randome-quote-machine"
  ],
  "author": "Ipatii Dmytro",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/DimaIpatii/react-quotes-machine/issues"
  },
  "homepage": "https://github.com/DimaIpatii/react-quotes-machine#readme",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/eslint-parser": "^7.12.1",
    "@babel/eslint-plugin": "^7.12.1",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-transform-react-jsx": "^7.12.12",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "autoprefixer": "^10.2.0",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "cssnano": "^4.1.10",
    "eslint": "^7.17.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-webpack-plugin": "^2.4.1",
    "html-webpack-plugin": "^4.5.1",
    "mini-css-extract-plugin": "^1.3.3",
    "node-css-mqpacker": "^8.0.1",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.2",
    "postcss-loader": "^4.1.0",
    "sass-loader": "^10.1.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1",
    "webpack-merge": "^5.7.3"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "normalize.css": "^8.0.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

Ответ №1:

Ваш webpack.prod.js отсутствует babel-загрузчик:

 {
  test: /.(js|jsx)$/,
  exclude: /(node_modules|bower_components)/,
  use: [{loader: "babel-loader"}],
},

Я тестировал в вашем репозитории, сейчас он компилируется для prod. ESLint в порядке (у вас есть несколько ошибок, но ни одной из-за конфигурации).

1. Спасибо. Я внес изменения, но index.js и App.js там, где у меня есть мой код реакции, все еще красный, и жалобы на это: ошибка синтаксического анализа: /Users/Dima/Desktop/Add to Github/react-quotes-machine/src/index.js : Поддержка экспериментального синтаксиса ‘jsx’ в настоящее время не включена (17:17):

2. Это ваш редактор жалуется? Я смог собрать и переработать ваш код просто отлично, так что, похоже, это проблема конфигурации редактора.

3. Я заменил «@babel / eslint-parser», а затем переустановил eslint с базовыми конфигурациями, используя «npx eslint —init», и это работает, но с babel в качестве анализатора он жалуется.

Ответ №2:

Это то, что сработало для меня, используя @babel/eslint-parser :

babel.config.json

 {
    "presets": ["next/babel"],
    "plugins": ["@babel/plugin-syntax-jsx"]
}

eslintrc.json

  "extends": [
    "airbnb",
    "prettier",
    "plugin:prettier/recommended",
    "next"
],
"parser": "@babel/eslint-parser",
"parserOptions": {
    "ecmaFeatures": {
        "jsx": true
    },
    "ecmaVersion": 11,
    "sourceType": "module"
},
"plugins": ["@babel", "react-hooks", "jsx-a11y", "import", "prettier"],

package.json

 "devDependencies": {
  "@babel/core": "^7.14.6",
  "@babel/eslint-parser": "^7.14.7",
  "@babel/eslint-plugin": "^7.14.5",
  "@babel/plugin-syntax-jsx": "^7.14.5",
  "eslint": "^7.29.0",
  "eslint-config-airbnb": "^18.2.1",
  "eslint-config-next": "11.0.1",
  "eslint-config-prettier": "^8.3.0",
  "eslint-plugin-import": "^2.23.4",
  "eslint-plugin-jsx-a11y": "^6.4.1",
  "eslint-plugin-prettier": "^3.4.0",
  "eslint-plugin-react-hooks": "^4.2.0",
  "prettier": "^2.3.2"
}

Кстати, это следующее приложение js.