ReactJs 模块解析失败：意外的标记 (126:36) 您可能需要适当的加载器来处理此文件类型

Question

我正在使用 React 16，昨天就出现了这个错误。 这是由这行代码引起的。

import * as Sentry from "@sentry/react";

整个文件如下：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
import registerServiceWorker from "./registerServiceWorker";
import "./index.css";
import "bootstrap/dist/css/bootstrap.css";
import * as Sentry from "@sentry/react";




ReactDOM.render(<App />, document.getElementById("root"));

我再次使用react 16，这个模块可能适用于react 18，我很难理解这个错误。

配置。设置页面告诉我要这样做。

import { createRoot } React from "react-dom/client";
import React from "react";
import * as Sentry from "@sentry/react";
import App from "./App";

Sentry.init({
  dsn: "https://[e-mail]/4505155684794368",
  integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
  // Performance Monitoring
  tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
  // Session Replay
  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
});

const container = document.getElementById(“app”);
const root = createRoot(container);
root.render(<App />)

createRoot 方法在 React 16 中不可用

我遇到了类似的错误，但这些解决方案不起作用。我还看了一些 youtube 解决方案 即使尝试了 chatgpt 也不起作用。

Answer 1

我不知道你的代码到底是什么样的，但也许这有效。

导入

import { BrowserRouter } from 'react-router-dom';

尝试更换这个：

const container = document.getElementById(“app”);
const root = createRoot(container);
root.render(<App />)

与这个：

    ReactDOM.render( 
        <BrowserRouter>
          <App />
        </BrowserRouter>,
        document.getElementById('app')
   );

或将

'app'

替换为

'root'

。这取决于您的主 div 有哪个

id

，所有代码将写入其中。