실험 구문 'jsx'에 대한 지원이 현재 사용되도록 설정되지 않았습니다.
매우 간단한 코드를 실행하려고 하는데 오류가 발생하여 Create react 앱을 사용하지 않았습니다!
babel.config.js 파일이 무시되고 있는 것 같습니다.
제 작은 프로젝트의 구조는 다음과 같습니다.
내 html 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ReactJS</title>
</head>
<body>
<div id="app"></div>
<script src = 'bundle.js' ></script>
</body>
</html>
내 index.js 파일:
import React from 'react';
import { render } from 'react-dom';
render(<h1>Hello World!!</h1>, document.getElementById('app'));
패키지 json:
{
"name": "front",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "webpack-dev-server --mode development",
"build": "webpack-dev-server --mode production"
},
"dependencies": {
"@babel/cli": "^7.10.5",
"@babel/core": "^7.10.5",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"devDependencies": {
"@babel/plugin-transform-runtime": "^7.9.0",
"babel-loader": "^8.1.0",
"webpack-dev-server": "^3.10.3"
}
}
my webpack.config.js
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'public'),
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
}]
},
};
이게 제 babel.config.js입니다.
module.exports = {
"presets": ["@babel/preset-env", "@babel/preset-react"]
};
에러:
yarn webpack-dev-server --mode development
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /root/treina/front/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (4:8):
2 | import { render } from 'react-dom';
3 |
> 4 | render(<h1>Hello World!!</h1>, document.getElementById('app'));
| ^
Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
at Parser._raise (/root/treina/front/node_modules/@babel/parser/lib/index.js:757:17)
at Parser.raiseWithData (/root/treina/front/node_modules/@babel/parser/lib/index.js:750:17)
at Parser.expectOnePlugin (/root/treina/front/node_modules/@babel/parser/lib/index.js:8849:18)
at Parser.parseExprAtom (/root/treina/front/node_modules/@babel/parser/lib/index.js:10170:22)
at Parser.parseExprSubscripts (/root/treina/front/node_modules/@babel/parser/lib/index.js:9688:23)
at Parser.parseMaybeUnary (/root/treina/front/node_modules/@babel/parser/lib/index.js:9668:21)
at Parser.parseExprOps (/root/treina/front/node_modules/@babel/parser/lib/index.js:9538:23)
at Parser.parseMaybeConditional (/root/treina/front/node_modules/@babel/parser/lib/index.js:9511:23)
at Parser.parseMaybeAssign (/root/treina/front/node_modules/@babel/parser/lib/index.js:9466:21)
at Parser.parseExprListItem (/root/treina/front/node_modules/@babel/parser/lib/index.js:10846:18)
ℹ ｢wdm｣: Failed to compile.
실과 WSL 단말기를 사용하고 있습니다.
작성만 하면 됩니다..babelrc프로젝트 루트에 파일을 저장하고 다음을 추가합니다.
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
제 경우, 다음과 같은 내용으로 "babel.config.js" 파일을 작성했습니다.
module.exports = {
presets:[
"@babel/preset-env",
"@babel/preset-react"
]
}
이 https://stackoverflow.com/a/52693007/10952640은 저를 위해 해결되었습니다.
webpack 설정에도 @babel/preset-react 세트가 필요합니다.
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { presets: ['@babel/env','@babel/preset-react'] },
},
2021
추가해서 수정했습니다.
"jsx": "react-jsx"
tsconfig.json 파일에 있는 "compilerOptions"로 이동합니다.
또 다른 가능한 원인입니다.심볼 링크가 포함된 경로에서 명령 프롬프트에서 프로젝트를 실행하려고 할 때 이 오류가 발생했습니다.디렉토리를 실제 경로로 직접 변경하면 문제가 해결되었습니다.
나에게 효과가 있었던 해결책은 내가 그 사실을 발견했을 때였습니다.node_modules/react-scripts/config/webpack.config.js포함:
// @remove-on-eject-begin
babelrc: false,
configFile: false,
설정별babelrc: true,드디어 .babelrc의 변경 내용을 사용할 수 있게 되었습니다.제 추측으로는configFile:파라미터는 변경할 필요가 있습니다.(참고: babelrc는 다음과 같이 해야 할 필요가 있는 것 같습니다.src/react-module이 검출하는 경우, babel.config.displays에서도 true가 될 가능성이 높아집니다.
음, 내 생각에 문제는 네 아기에게 있는 것 같아, 이걸 시도해봐.
- npm i --save-dev @babel/save-dev-class-properties
- add loose: true in your babelrc
프로젝트를 처음부터 다시 만들었는데 명령어 끝에 "D"를 포함하지 않은 것이 잘못되었다는 것을 깨달았습니다.
yarn add webpack-dev-server -D
이제 됐다!
혼합에 다른 답을 추가하는 중...내가 이 일을 시작했을 때 보던 프로젝트는 완성되었다.create-react-appreact 스크립트 v4 및 react 17을 사용합니다.서드파티 모듈의 소스 코드와 관련하여 다음과 같은 경고가 표시되었습니다.
Failed to compile.
./node_modules/@third-party/ui-components/src/components/Header.js
SyntaxError: C:\Development\app\node_modules\@third-party\ui-components\src\components\Header.js: Support for the experimental syntax 'jsx' isn't currently enabled (142:5)
서드파티제 컴포넌트의 Import를 다음과 같이 잘못 추가한 것이 문제였습니다.
import { Header } from '@third-party/ui-components/src';
대신:
import { Header } from '@third-party/ui-components';
따라서 웹 팩은 컴파일된 내보내기 대신 패키지에 원래 소스 코드를 사용하려고 했습니다.그리고 체크인을 하고 있습니다.react-scripts앱 외부 JS용 모듈 로더는 다음과 같이 설정됩니다.
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
// ----- 8< -----
},
}
하여 /src문제를 해결했습니다.
내 소포 안에.json, 나는 덧붙였다:
"babel": {
"presets": [
"@babel/react",
"@babel/env"
],
"plugins": [
"@babel/proposal-class-properties",
"@babel/plugin-transform-runtime"
]
}
Rails/React의 경우 다음 행을 실행합니다.
$ bin/rails webpacker:install:react
react with rails를 사용하는 경우 jsx 확장자를 추가합니다.
extensions:
- .jsx
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
이 테스트는 VSCode에서만 수행되지 않습니다.저는 실 작업공간과 CRA를 작업공간 중 하나로 사용하고 있습니다.
즉, 솔루션은 실패한 VSCode 테스트를 무시하고 대신 명령줄에서 테스트를 시작하는 것입니다.
yarn workspace frontend test
같은 에러가 발생했습니다만, 리베이스 작업 중에 브레이스를 잃어버려서 패키지가 망가져 버렸습니다.json이 정상적으로 동작하지 않았습니다.바벨이 이렇게 에러를 나타내고 있는 경우는, 패키지가 있는지 확인해 주세요.json의 괄호가 올바르게 설정되어 있다.
리믹스 앱 구축 중에 이 오류가 발생하는 사용자는 파일 확장자를 .js에서 .jsx/.tsx로 변경하거나 tsconfig 파일로 확인하십시오.
만약 당신이 Babel 7과 실 워크스페이스 또는 모노레포를 사용하고 있다면, 당신은 Babel에게 당신의 패키지 디렉토리 밖에서 파일을 변환하라고 말해야 합니다.
webpack 5 설정에서 js test object 옵션에 babelrc Roots: ['../*']를 입력합니다.예를 들어 제 것은 다음과 같습니다.
{
use: ['babel-loader'],
exclude: /node_modules/,
test: /\.(js|jsx)$/,
options: {
presets: ['@babel/preset-env'],
babelrcRoots: ['../*']
}
},
이 github 문제의 다른 옵션을 참조하십시오.
module.exports = {
plugins: ["nativewind/babel"],
presets: ['babel-preset-expo'],
};
다음 링크에 따라 babel.config.js를 변경합니다.
from https://www.nativewind.dev/quick-starts/create-react-native-app
그리고 위와 같이 프리셋을 추가하면 동작합니다.
언급URL : https://stackoverflow.com/questions/63005011/support-for-the-experimental-syntax-jsx-isnt-currently-enabled
'source' 카테고리의 다른 글
| Mongoose Schema가 모델에 등록되지 않았습니다. (0) | 2023.02.23 |
|---|---|
| node.js와 함께 기본 Ajax 송수신 (0) | 2023.02.23 |
| 오류 "SCRIPT7002: XMLHttpRequest:IE에서 네트워크 오류 0x80070005, 액세스가 거부되었습니다." (0) | 2023.02.23 |
| 두 필드를 비교하는 사용자 정의 양식 유효성 검사 지시문 (0) | 2023.02.23 |
| 오류: 정의되지 않은 속성 'map'을 읽을 수 없습니다. (0) | 2023.02.23 |