npm 运行弹出后无法使用 JSX

Question

我一直在关注 this tutorial，我已经花了一个星期试图解决这个问题：

SyntaxError: TestComponent.js: Unexpected token (5:6)

  3 |   render() {
  4 |     return (
> 5 |       <div>
    |       ^
  6 |         { this.props.children }
  7 |       </div>
  8 |     )

目前，我们在 2019 年有 @babel/preset-env、@babel/preset-react、@babel/cli，而不是指向 babel-preset-es2015 babel-preset-stage-0 babel-preset-react babel-cli 的教程。

因此，在 package.json 中使用它们并不能解决问题：

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

我尝试了几种方法，但都无法阻止错误。我希望有人已经解决了这个问题并且可以提供解决方案。

非常感谢！

Answer 1

TLDR:详细步骤guide

自本教程编写以来发生了一些变化，即以下是重大更改，除非另有说明，否则本教程中的其他步骤是相同的：

您需要下载并使用 babel-cli 才能让您的自定义 "lib" 脚本命令生效：

npm install --save-dev @babel/cli
您还需要在自定义 "lib" 脚本命令中下载并使用 @babel/plugin-transform-react-jsx 插件到 编译和转换你的 React 代码，因为 Babel 6 及更高版本不再有 React 的任何原生转换。当您只想在 npmjs 上与本机 JavaScript 共享您的自定义组件时，这是必需的。

npm install --save-dev @babel/plugin-transform-react-jsx
更新您的“lib”脚本命令以使用步骤 2 中列出的 babel 的 JSX 转换插件：

"scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "lib": "babel --plugins @babel/transform-react-jsx src/node_modules --out-dir lib --copy-files", "test": "node scripts/test.js" },

注意：您也不需要教程中列出的 .babelrc 文件，因为我们将编辑 webpack.config.js 文件以正确转译 JSX 稍后。

步骤 1 - 3 将允许您发布并与他人共享您的组件，但您仍然需要针对本地开发进行调整，我将在下面描述这些步骤:

对于自定义组件的 package.json，删除 "main" 入口点的 .js 扩展名，因为这将导致以下。例如，这是我的自定义组件的 package.json:

{ "private": true, "name": "YourComponent", "main": "./YourComponent" }

现在，如果您尝试使用您的自定义组件在本地编译和运行您的应用程序，它将抛出一个 错误，抱怨您的自定义组件的 JSX 语法:

SyntaxError: YourComponent.js: Unexpected token (6:6)

  3 |   render() {
  4 |     return (
> 5 |       <div>
    |       ^
  6 |         { this.props.children }
  7 |       </div>
  8 |     )

这是因为您需要编辑 webpack.config.js 文件以使用 @babel/preset-env 和 @babel/preset-react babel 预设。所以你想添加这一行：

presets: ['@babel/preset-env', '@babel/preset-react'], 到你的应用程序代码的 babel 加载器。

作为参考，这里是我的代码的相关部分（从第 329 行开始）：

            ...
             // Process application JS with Babel.
            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
            {
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve(
                  'babel-preset-react-app/webpack-overrides'
                ),
                presets: ['@babel/preset-env', '@babel/preset-react'],
                plugins: [
                  [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
                        },
                      },
                    },
                  ],
                ],
                // This is a feature of `babel-loader` for webpack (not Babel itself).
                // It enables caching results in ./node_modules/.cache/babel-loader/
                // directory for faster rebuilds.
                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                compact: isEnvProduction,
              },
            },
           ...

现在，如果您运行在本地，它应该可以工作：npm run start

这些是帮助解决我对运行ning 在本地的 JSX 投诉以及在 npmjs 上与其他人共享我的自定义组件的主要步骤。我用我的代码和详细的分步指南创建了一个 public git 存储库来帮助其他人，可以找到 here。

希望对您有所帮助！

Answer 2

查看教程并注意到它同时使用了 " 和 ”（不同样式的引号，我不知道正确的语言来正确引用它们）。

两者在外观上有非常细微的差别，但只有其中一个会被正确解释，另一个会导致错误。教程中的 .babelrc 使用了错误的引号样式。

如果您从文章中复制和粘贴，请检查以确保您使用的引号样式正确，引号应与键盘上的 Enter 键最接近。

npm 运行弹出后无法使用 JSX

Can't use JSX after npm run eject

node.js

npm

node-modules

reactjs

npm-package

npm 运行 弹出后无法使用 JSX

Can't use JSX after npm run eject

node.js

npm

node-modules

reactjs

npm-package

npm 运行弹出后无法使用 JSX