Parcel React 如何修复设置错误？答案

【问题标题】：Parcel React How do i fix the set up error?Parcel React 如何修复设置错误？
【发布时间】：2022-11-25 06:26:02
【问题描述】：

我的 index.js 文件

当我运行包裹/反应项目时，我不断收到以下错误

@parcel/transformer-js：意外的标记)。预期这个，导入，异步，函数，[ 用于数组文字，{ 对象文字，@ 装饰器，函数，类，null，true，false，数字， bigint、字符串、正则表达式、用于模板文字的`、( 或标识符

  import { createRoot } from 'react-dom/client';
    import App from './App/App';
    
    
    const container = document.getElementById('root');
    
    const root = createRoot(container); 
    // createRoot(container!) if you use TypeScript
    root.render(<App/>);

//index.html file

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <link href="./index.css" rel="stylesheet">
    <title>
        My App
    </title>
</head>

<body>
    <div id="root">

    </div>
    <script type="module" src="./index.js">
    </script>
    </body>

</html>

/// my app.js file is below

  export default function App() {
  return (
    <div className=''>
        <h2 className='text-green-700 '>
Analytics
        </h2>
    </div>
  )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我的 package.json 文件

{
    "devDependencies": {
        "parcel": "2.4",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.0.24"
    },
    "dependencies": {
        "react-google-charts": "^4.0.0"
    },
    "name": "analytics",
    "version": "1.0.0",
    "description": "Analytic app",
    "source": "src/index.html",
    "main": "index.js",
    "scripts": {
        "start": "parcel",
        "build": "parcel build"
    },
    "author": "Caldewood Alikula",
    "license": "ISC"
}

【问题讨论】：

Please do not upload images of code/errors when asking a question.
你忘了导入App？
是的，但添加后我仍然得到同样的错误
你能发一个minimal reproducible example吗？当我尝试使用屏幕截图中可见的详细信息重新创建问题时，我没有看到错误。一些值得了解的事情是：你的package.json 长什么样？你的 index.html 是什么样子的？

标签： reactjs tailwind-css parceljs

【解决方案1】：

避免通过 CDN 包含 react 和 react-dom。

将它们安装为npm 包：

npm i react@16.6.3
npm i react-dom@16.6.3

重启服务器

【讨论】：