#javascript #reactjs #webpack #babeljs #eslint
#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, я начал читать его огромную документацию, разные статьи о том, как его установить, и швы, которые я делаюэто хорошо, но результата нет.
Ошибка в 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. Привет, и добро пожаловать в SO. Не могли бы вы поделиться своим
package.json
, пожалуйста?2. Вот оно! 🔝 Спасибо
Ответ №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.