React - 模块解析失败：意外的令牌

Posted 2023-02-22

【中文标题】React - 模块解析失败：意外的令牌

【英文标题】：React - Module parse failed: Unexpected token

【发布时间】：2021-05-01 01:45:04

【问题描述】：

我决定安装 npm 包 react-radio-buttons 在我的组件上安装和应用后出现错误：

./node_modules/react-radio-buttons/index.jsx 80:6
module parse failed: Unexpected token (80:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     const style = horizontal ?  display: 'inline-flex', width: '100%'  : ;
|     return (
>       <div style=style  ...props>
|         
|           children.map((c, i) => this.renderChild(c, i, i === checkedIndex)))

我想这个问题可能与package.json有关，但我不知道如何解决这个问题。在我提供包文件之前，我想警告dependencies 对象内的许多属性，我将删除所有内容，只留下"react-radio-buttons": "^ 1.2.2", 发生错误的实际包。

package.json

  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "react-radio-buttons": "^1.2.2",
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,
  "eslintConfig": 
    "extends": "react-app"
  ,
  "browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  

【参考方案1】：

在我的情况下，错误是由不正确的使用引起的 => import RadioGroup from "react-radio-buttons/index";（/index 应该被删除）

解决方案是将其更改为：

import  RadioGroup  from "react-radio-buttons";