语法错误：node_modules\react-native-pell-rich-editor\..：当前未启用实验性语法“jsx”的支持。

Question

语法错误：node_modules\react-native-pell-rich-editor\..：当前未启用实验性语法“jsx”的支持。

3

提示符中的命令：react-app-rewired start

发生错误，我理解的是我的React Native项目不支持“jsx”语法，但如果您启用某些设置，则可以支持。

Starting the development server...
Failed to compile.

SyntaxError: C:\Users\desktop\projectreact_frontend\node_modules\react-native-pell-rich-editor\src\RichEditor.js: Support for the experimental syntax 'jsx' isn't currently enabled (263:13):
  261 |         const {html: viewHTML} = that.state;
  262 |         return (
> 263 |             <>
      |             ^
  264 |                 <WebView
  265 |                     useWebKit={true}
  266 |                     scrollEnabled={false}

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.
assets by path static/ 7.96 MiB
  assets by path static/media/*.png 98.9 KiB
    asset static/media/logo.6544c416aa5d553bcd11.png 83.3 KiB [emitted] [immutable] [from: src/assets/logo/logo.png] (auxiliary name: main)
    asset static/media/appIcon.d2692da871f086d863a0.png 15.6 KiB [emitted] [immutable] [from: src/assets/logo/appIcon.png] (auxiliary name: main)
  asset static/js/bundle.js 6.5 MiB [emitted] (name: main) 1 related asset
  asset static/media/MaterialCommunityIcons.5d42b4e60858731e7b65.ttf 1.09 MiB [emitted] [immutable] [from: node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf] (auxiliary name: main)
  asset static/media/walking.4e665c3c25af9a98c447.jpg 271 KiB [emitted] [immutable] [from: src/assets/backgrounds/walking.jpg] (auxiliary name: main)
asset index.html 1.8 KiB [emitted]
asset asset-manifest.json 542 bytes [emitted]
cached modules 14.9 MiB (javascript) 1.46 MiB (asset) [cached] 2653 modules
runtime modules 28.3 KiB 14 modules
javascript modules 78 bytes
  ./node_modules/react-native-pell-rich-editor/src/RichEditor.js 39 bytes [built] [1 error]
  ./node_modules/react-native-pell-rich-editor/src/RichToolbar.js 39 bytes [built] [1 error]

ERROR in ./node_modules/react-native-pell-rich-editor/src/RichEditor.js
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\desktop\projectreact_frontend\node_modules\react-native-pell-rich-editor\src\RichEditor.js: Support for the experimental syntax 'jsx' isn't currently enabled (263:13):

  261 |         const {html: viewHTML} = that.state;
  262 |         return (
> 263 |             <>
      |             ^
  264 |                 <WebView
  265 |                     useWebKit={true}
  266 |                     scrollEnabled={false}

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 (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:476:17)
    at Parser.raiseWithData (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:469:17)
    at Parser.expectOnePlugin (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:3820:18)
    at Parser.parseExprAtom (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12577:18)
    at Parser.parseExprSubscripts (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12149:23)
    at Parser.parseUpdate (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12129:21)
    at Parser.parseMaybeUnary (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12104:23)
    at Parser.parseMaybeUnaryOrPrivate (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:11901:61)
    at Parser.parseExprOps (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:11908:23)
    at Parser.parseMaybeConditional (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:11878:23)
 @ ./node_modules/react-native-pell-rich-editor/src/index.js 1:0-38 5:0-87
 @ ./src/Screens/FindingsScreen/RichTextEditorPell.tsx 8:0-81 22:37-47 55:37-48 57:18-30 57:32-44 57:46-61 57:63-80 57:82-102 57:104-120 57:122-138 57:140-156 57:158-183 57:185-210 59:11-27 74:11-27 89:11-27
 @ ./src/Screens/FindingsScreen/FindingsDocumentEditorScreen.tsx 12:0-58 125:39-57
 @ ./src/Screens/FindingsScreen/FindingsScreen.tsx 10:0-78 43:19-47
 @ ./src/MainNavigationBar/MainNavigationTabs.tsx 16:0-70 136:17-31
 @ ./src/App.tsx 15:0-75 74:39-56
 @ ./src/index.tsx 10:0-24 27:53-56

ERROR in ./node_modules/react-native-pell-rich-editor/src/RichToolbar.js
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\desktop\projectreact_frontend\node_modules\react-native-pell-rich-editor\src\RichToolbar.js: Support for the experimental syntax 'jsx' isn't currently enabled (229:13):

  227 |             : that.props.iconTint;
  228 |         return (
> 229 |             <TouchableOpacity
      |             ^
  230 |                 key={action}
  231 |                 disabled={disabled}
  232 |                 style={[{width: iconGap + iconSize}, styles.item, itemStyle, style]}

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 (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:476:17)
    at Parser.raiseWithData (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:469:17)
    at Parser.expectOnePlugin (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:3820:18)
    at Parser.parseExprAtom (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12577:18)
    at Parser.parseExprSubscripts (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12149:23)
    at Parser.parseUpdate (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12129:21)
    at Parser.parseMaybeUnary (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12104:23)
    at Parser.parseMaybeUnaryOrPrivate (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:11901:61)
    at Parser.parseExprOps (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:11908:23)
    at Parser.parseMaybeConditional (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:11878:23)
 @ ./node_modules/react-native-pell-rich-editor/src/index.js 2:0-60 5:0-87 5:0-87
 @ ./src/Screens/FindingsScreen/RichTextEditorPell.tsx 8:0-81 22:37-47 55:37-48 57:18-30 57:32-44 57:46-61 57:63-80 57:82-102 57:104-120 57:122-138 57:140-156 57:158-183 57:185-210 59:11-27 74:11-27 89:11-27
 @ ./src/Screens/FindingsScreen/FindingsDocumentEditorScreen.tsx 12:0-58 125:39-57
 @ ./src/Screens/FindingsScreen/FindingsScreen.tsx 10:0-78 43:19-47
 @ ./src/MainNavigationBar/MainNavigationTabs.tsx 16:0-70 136:17-31
 @ ./src/App.tsx 15:0-75 74:39-56
 @ ./src/index.tsx 10:0-24 27:53-56

webpack 5.70.0 compiled with 2 errors in 5837 ms
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.

Android版本运行完美。Web版本由于此错误无法正常工作。该错误仅在来自此处的开源富文本编辑器库中发生：https://github.com/wxik/react-native-rich-editor 我找到了以下相关问题：

- 不支持实验性语法'jsx' - SyntaxError：当前未启用实验性语法“jsx” - https://dev59.com/l1EG5IYBdhLWcg3wct5F#65889977 - https://babeljs.io/docs/en/configuration 我尝试过：

yarn add @babel/preset-react --dev

create .babelrc file with:

{
  "presets": ["@babel/preset-env", @babel/preset-react"]}

update babel.config.js from

module.exports = {
  presets: ['module:metro-react-native-babel-preset', '@babel/preset-react'],
  env: {
    production: {
      plugins: ['react-native-paper/babel'],
    },
  },
};

to

module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    ['@babel/preset-react', {targets: {node: 'current'}}], // add this
  ],
  env: {
    production: {
      plugins: ['react-native-paper/babel'],
    },
  },
};

or

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
};

It makes me even question if that file is read.

.eslintrc.js

：

module.exports = {
  root: true,
  extends: [
    // When adding extensions it might be needed to remove yarn.lock and recreate it through yarn. Removing node_modules should not be needed.
    // './node_modules/gts',
    '@react-native-community',
    'prettier',
  ],
  rules: {
    'react-native/no-inline-styles': 'off',
  },
  globals: {JSX: true, ReactNavigation: true},
  ignorePatterns: ['node_modules/', 'coverage/', 'android/', 'ios/', 'src/mocks/Setup'],
};

.yarnrc.yml

nodeLinker: node-modules

plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
    spec: '@yarnpkg/plugin-version'
  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
    spec: '@yarnpkg/plugin-interactive-tools'

yarnPath: .yarn/releases/yarn-3.1.1.cjs
pnpFallbackMode: all

metro.config.js

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

package.json

{
  "name": "projectabc",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "web": "react-app-rewired start",
    "build": "react-app-rewired build",
    "build-prod": "set \"GENERATE_SOURCEMAP=false\"&& react-scripts build",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@aws-amplify/ui": "^3.2.0",
    "@aws-amplify/ui-react": "^2.8.0",
    "@mdi/js": "^7.0.96",
    "@react-native-async-storage/async-storage": "^1.16.1",
    "@react-native-clipboard/clipboard": "^1.9.0",
    "@react-native-community/netinfo": "^8.1.0",
    "@react-native-picker/picker": "^2.3.1",
    "@react-navigation/bottom-tabs": "^6.2.0",
    "@react-navigation/material-bottom-tabs": "^6.1.1",
    "@react-navigation/material-top-tabs": "^6.1.1",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.5.0",
    "@reduxjs/toolkit": "^1.8.4",
    "amazon-cognito-identity-js": "^5.2.7",
    "aws-amplify": "^4.3.15",
    "aws-amplify-react-native": "^6.0.5",
    "color": "^4.2.3",
    "core-js": "^3.21.1",
    "deepmerge": "^4.2.2",
    "eject": "^0.0.4",
    "graphql-react": "^19.0.0",
    "i18next": "^21.9.0",
    "moment": "^2.29.1",
    "react": "18.0.0",
    "react-art": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-i18next": "^11.18.3",
    "react-native": "^0.69.5",
    "react-native-asset": "^2.0.1",
    "react-native-cn-quill": "0.7.16",
    "react-native-eject": "^0.1.2",
    "react-native-expandable-fab": "^1.1.2",
    "react-native-htmlview": "^0.16.0",
    "react-native-localize": "^2.2.2",
    "react-native-paper": "^4.11.2",
    "react-native-paper-dates": "^0.8.7",
    "react-native-pell-rich-editor": "^1.8.8",
    "react-native-rsa": "^0.0.3",
    "react-native-safe-area-context": "^4.1.2",
    "react-native-screens": "^3.13.1",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "^0.18.7",
    "react-native-webview": "^11.23.0",
    "react-quill": "^1.3.5",
    "react-redux": "^7.2.8",
    "ts-debounce": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.19.0",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
    "@babel/preset-env": "^7.19.0",
    "@babel/preset-flow": "^7.16.7",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@babel/runtime": "^7.17.2",
    "@react-native-community/eslint-config": "^3.0.1",
    "@types/jest": "^27.4.1",
    "@types/react-native": "^0.67.2",
    "@types/react-native-vector-icons": "^6.4.10",
    "@types/react-test-renderer": "^17.0.1",
    "babel-jest": "^27.5.1",
    "babel-loader": "^8.2.5",
    "eslint": "^7.32.0",
    "graphql": "^16.6.0",
    "gts": "^3.1.0",
    "jest": "^27.5.1",
    "metro-react-native-babel-preset": "^0.69.0",
    "react-app-rewired": "^2.2.1",
    "react-native-pager-view": "^5.4.25",
    "react-scripts": "^5.0.0",
    "react-test-renderer": "17.0.2",
    "serve": "^13.0.2",
    "typescript": "^4.6.2",
    "webpack": "^5.74.0"
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

config-overrides.js

module.exports = function override(config, env) {
  config.module.rules.push({
    test: /\.js$/,
    exclude: /node_modules[/\\](?!react-native-vector-icons)/,
    use: {
      loader: 'babel-loader',
      options: {
        // Disable reading babel configuration
        babelrc: false,
        configFile: false,

        // The configuration for compilation
        presets: [
          ['@babel/preset-env', {corejs: '3.21.1', useBuiltIns: 'usage'}],
          '@babel/preset-react',
          '@babel/preset-flow',
          '@babel/preset-typescript',
        ],
        plugins: [
          '@babel/plugin-proposal-class-properties',
          '@babel/plugin-proposal-object-rest-spread',
        ],
      },
    },
  });

  return config;
};

tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["dom", "dom.iterable", "esnext"], /* Specify library files to be included in the compilation. */
    "allowJs": true,                          /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "removeComments": true,                /* Do not emit comments to output. */
    "noEmit": true,                           /* Do not emit outputs. */
    // "incremental": true,                   /* Enable incremental compilation */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    "isolatedModules": true,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    "noImplicitReturns": true,                /* Report error when not all code paths in function return a value. */
    "noFallthroughCasesInSwitch": true,       /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
    "skipLibCheck": false,                    /* Skip type checking of declaration files. */
    "resolveJsonModule": true                 /* Allows importing modules with a ‘.json’ extension, which is a common practice in node projects. */

    /* Source Map Options */
    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
  },
  "exclude": [
    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js", "./Api/generated/*"
  ]
}

- bieboebap

1

RichEditor.js 应该有一个 .jsx 扩展名吗？我会尝试使用 <React.Fragment> 替代 <>，或者调整 tsconfig.json 中的 compilerOptions 标志 jsxFragment。 - Moa

我不应该更改RichEditor文件，因为它来自外部节点模块。 - bieboebap

1

我想知道JSX在JSX文件之外是如何工作的。 - Moa

1

创建 .babelrc 文件并添加以下内容：{ "presets": ["@babel/preset-env", "@babel/preset-react"] }希望您已经注意到了缺失的引号并进行了修复。 - Iva

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Iva · Answer 1

我已经添加了

"jsx": "react-jsx"

关于我的 tsconfig.json 文件中的 "compilerOptions"，我想提出一些建议。

此外，我没有在您的 package.json 中看到这个东西。

"babel": {
  "presets": [
    "@babel/react",
    "@babel/env"
  ],
  "plugins": [
    "@babel/proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}