浏览器中React文件完全失效，该如何排查修复？

一、基础排查步骤 #

• 校验依赖与路径

  1. 确认已执行 npm install react react-dom 安装依赖，否则 node_modules 目录下不会存在React相关文件。
  2. 打开浏览器开发者工具（F12）→「Network」标签，查看 react.development.js、react-dom.development.js、component1.js 的请求状态：
     • 若显示404，说明路径错误，需调整 <script> 的 src 属性以匹配实际目录层级。

• 查看控制台错误
  打开「Console」标签，直接定位问题根源：

  • 提示 React is not defined → React脚本未加载成功；
  • 提示 Unexpected token 'export' → 浏览器不识别ES6模块语法。

二、针对性解决方法 #

1. 解决ES6模块语法兼容问题 #

你的组件使用了import/export语法，但浏览器默认<script>标签不支持该语法，有两种处理方式：

方式一：改用全局变量写法

修改component1.js，移除import/export，直接使用全局的React变量：

function NumberInputForm() {
  console.log('MyComponent rendering...');
  const [number, setNumber] = React.useState('');

  const handleInputChange = (event) => {
    const value = event.target.value;
    setNumber(value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    const parsedNumber = parseFloat(number);
    if (parsedNumber > 0) {
      console.log('Positive number:', parsedNumber);
    } else {
      console.log('Invalid input:', number);
    }
  };

  return React.createElement(
    'form',
    { onSubmit: handleSubmit },
    React.createElement(
      'label',
      null,
      'Enter a positive number:',
      React.createElement('input', {
        type: 'number',
        value: number,
        onChange: handleInputChange,
        min: '0',
        step: 'any',
        required: true
      })
    ),
    React.createElement('button', { type: 'submit' }, 'Submit')
  );
}

方式二：启用浏览器模块支持

给引用组件的<script>标签添加type="module"属性，同时调整组件的import路径为CDN地址：

<script type="module" src="../src/components/component1.js"></script>

修改component1.js的导入语句：

import React, { useState } from 'https://unpkg.com/react@18/umd/react.development.js';
import ReactDOM from 'https://unpkg.com/react-dom@18/umd/react-dom.development.js';

2. 添加组件挂载逻辑 #

你仅引入了组件，但未将其渲染到页面的#root节点中，需添加挂载代码（放在组件引用之后）：

// React 18版本写法
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(NumberInputForm));

// React 17及以下版本写法
// ReactDOM.render(React.createElement(NumberInputForm), document.getElementById('root'));

3. 完整修改后的HTML示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .centered-text {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      color: rgb(0, 128, 255);
    }
    .multiline-text {
      white-space: pre-line;
    }
  </style>
  <title>Data Collection</title>
</head>
<body>
  <div id="root"></div>

  <script src="../node_modules/react/umd/react.development.js"></script>
  <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
  <script src="../src/components/component1.js"></script>

  <!-- 挂载组件 -->
  <script>
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(React.createElement(NumberInputForm));
  </script>

  <div class="centered-text">
    <div class="multiline-text">
      <h2>What is the name of the stock</h2>
      <input type="text" id="stockname" name="stockname" placeholder="Enter text here">
      <h2>1. How much is it undervalued?</h2>
    </div>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Steven