Expo 目前未启用对实验性语法“jsx”的支持

Posted 2023-02-19

【中文标题】Expo 目前未启用对实验性语法“jsx”的支持

【英文标题】：Expo Support for the experimental syntax 'jsx' isn't currently enabled

【发布时间】：2021-04-11 11:13:56

【问题描述】：

类似于Syntax Error: Support for the experimental syntax 'jsx' isn't currently enabled，但专门用于 Expo 和 JSX 文件。我正在尝试关注https://docs.expo.io/guides/testing-with-jest/

我有一个 App.js 使用导入 MainStackNavigator.jsx

import MainStackNavigator from './app/navigation/MainStackNavigator';

这是失败的测试。请注意，我实际上注释掉了测试的所有执行，我只是想加载App

import React from 'react';
import renderer from 'react-test-renderer';

import App from './App';

describe('<App />', () => 
  it('has 1 child', () => 
    // const tree = renderer.create(<App />).toJSON();
    // expect(tree.children.length).toBe(1);
  );
);

我测试不包含 JSX 的文件的测试工作。

.babelrc

  "presets": ["babel-preset-expo"],
  "plugins": [
    ["dotenv-import", 
      "moduleName": "@env",
      "path": ".env",
      "blacklist": null,
      "whitelist": null,
      "safe": false,
      "allowUndefined": false
    ],
    "@babel/plugin-syntax-jsx"
  ]

package.json中的相关行

  "jest": 
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ]
  ,

  "devDependencies": 
    "@babel/core": "^7.12.10",
    "@babel/plugin-syntax-jsx": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "babel-preset-expo": "^8.2.3",
    "babel-preset-jest": "^26.6.2",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^2.5.1",
    "expo-cli": "^3.26.2",
    "jest-expo": "^40.0.1",

我收到了

我尝试添加转换模块和其他模块。关于我唯一没有尝试过的是将所有 JSX 文件重命名为 JS。

【参考方案1】：

您是否检查过您的 webpack.config.js 文件是否包含转译 jsx 的规则？

  module: 
    rules: [
      
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      ,
    ],
  ,
  resolve: 
    extensions: ['*', '.js', '.jsx'],
  ,
  output: 
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
  ,