import与require的区别：替换后React代码失效原因咨询

先看你的原代码：

import Navbar from "./components/Navbar"
import Main from "./components/Main"

export default function App() {
  return (
    <div className="container">
      <Navbar />
      <Main />
    </div>
  )
}

替换后无法运行的核心原因是ES模块和CommonJS模块的导出/导入规则不兼容，具体有两点：

• 导出结构差异
  你的Main组件是用ES模块的export default导出的，而require是CommonJS的导入语法。CommonJS在导入ES模块时，会把ES模块的所有导出包裹成一个对象，其中默认导出会放在这个对象的.default属性里。直接写var Main = require("./components/Main")，拿到的是包含默认导出的对象，不是组件本身，所以React无法渲染这个对象。

  正确的写法应该是：

  var Main = require("./components/Main").default
  

• 项目环境的模块配置限制
  像Create React App这类React项目默认采用ES模块规范，打包工具（比如Webpack）会按ES模块的规则处理代码。直接混用require和ES模块语法，可能会被打包工具判定为不符合规范，进而导致编译失败。

简单说，两种模块规范的导出逻辑不一样，直接替换语法而不调整导出的获取方式，自然拿不到正确的组件。

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