运行Live Server时遇SyntaxError: Cannot use import statement outside a module报错求助

开发者阿泽

2026-8-1

解决"SyntaxError: Cannot use import statement outside a module"及React渲染问题

问题根源

浏览器默认将<script>标签视为普通脚本，不支持ES模块的import语法，直接运行会触发报错。
代码还存在React组件未挂载到DOM、JSX未处理、缺少ReactDOM依赖等问题，导致无法正常渲染。

分步解决方案

1. 修改HTML配置，引入必要依赖并标记模块

<!DOCTYPE html>
<html>
  <head>
    <title>Here We Go</title>
    <!-- 引入React和ReactDOM的CDN资源 -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- 引入Babel处理JSX语法 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <!-- 添加挂载React组件的根容器 -->
    <div id="root"></div>
    <!-- 标记脚本为ES模块，同时指定类型让Babel处理JSX -->
    <script type="module" src="indx.js"></script>
  </body>
</html>

2. 修正Greet.js组件

由于已通过CDN全局引入React，无需再单独import：

function Greet() {
  return (
    <div><h1>Welcome</h1></div>
  )
}
export default Greet

3. 修正indx.js组件

移除全局已存在的React import
修复render方法的返回逻辑（必须return JSX）
添加组件挂载到DOM的代码：

import Greet from './Greet.js'

class App extends React.Component {
  render() {
    return (
      <div className='App'>
        <Greet/>
      </div>
    )
  }
}

// 将App组件挂载到页面的root容器中
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);