反应静态构建错误：ERR_REQUIRE_ESM 或 ReferenceError：未定义窗口

Posted 2023-04-01

【中文标题】反应静态构建错误：ERR_REQUIRE_ESM 或 ReferenceError：未定义窗口

【英文标题】：React-static build error: ERR_REQUIRE_ESM or ReferenceError: window is not defined

【发布时间】：2021-06-30 19:36:36

【问题描述】：

我不知道如何解决这个问题，但我尝试了很多可能只是愚蠢的事情。我只想完成将我的 react-app 更改为 react-static-app，这样我就可以完成我的项目。 Everething 在本地工作，我知道它与服务器和客户端 JS 有关，但我不知道从哪里开始。请帮忙。

这是我从常规 yarn build 得到的错误：

[ERR_REQUIRE_ESM]: Must use import to load ES Module: 
  C:\my-projoect\node_modules\@babel\runtime\helpers\esm\objectWithoutPropertiesLoose.js
  require() of ES modules is not supported.
  require() of C:\my-projoect\node_modules\@babel\runtime\helpers\esm\objectWithoutPropertiesLoose.js 
    from C:\moji-projekt  i\rost-static\node_modules\react-spring\renderprops.js is an ES module file as 
    it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js 
    files in that package scope as ES modules.
  Instead rename objectWithoutPropertiesLoose.js to end in .cjs, change the requiring code to use 
    import(), or remove "type": "module" from 
      C:\my-projoect\node_modules\@babel\runtime\helpers\esm\package.json.

这是我运行 yarn build --debug 时得到的结果：

  ReferenceError: window is not defined

没有任何迹象表明问题出在哪里。我已经在我的项目周围放置了if(typeof window === "undefined") return null;，但没有运气。

这是我的 package.json，以防它有助于解决问题：

  "name": "rost-react-static",
  "private": true,
  "scripts": 
    "start": "react-static start",
    "stage": "react-static build --staging",
    "build": "react-static build",
    "analyze": "react-static build --analyze",
    "serve": "serve dist -p 3000"
  ,
  "dependencies": 
    "@reach/router": "^1.3.4",
    "@rooks/use-window-size": "^4.8.0",
    "@tinymce/tinymce-react": "^3.10.1",
    "@types/react": "^16.8.6",
    "axios": "^0.21.1",
    "bootstrap": "^4.5.3",
    "dotenv": "^8.2.0",
    "emailjs-com": "^2.6.4",
    "firebase": "^8.0.0",
    "particles-bg": "^2.5.0",
    "react": "^16.14.0",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^16.14.0",
    "react-ga": "^3.3.0",
    "react-google-recaptcha": "^2.1.0",
    "react-google-recaptcha-v3": "^1.7.0",
    "react-helmet": "^6.1.0",
    "react-hot-loader": "^4.13.0",
    "react-html-parser": "^2.0.2",
    "react-icons": "^4.2.0",
    "react-particle-image": "^1.0.1",
    "react-phone-number-input": "^3.1.10",
    "react-player": "^2.7.0",
    "react-redux": "^7.2.2",
    "react-spring": "^8.0.27",
    "react-static": "^7.5.1",
    "react-static-plugin-reach-router": "^7.5.1",
    "react-static-plugin-sass": "^7.3.0",
    "react-static-plugin-sitemap": "^7.5.1",
    "react-static-plugin-source-filesystem": "^7.5.1",
    "recaptcha-v3": "^1.8.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^0.2.4"
  ,
  "devDependencies": 
    "@types/react": "^16.8.6",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.20.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-config-react-tools": "^1.1.7",
    "eslint-plugin-flowtype": "^5.2.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "serve": "^11.3.2"
  

【参考方案1】：

我假设您错过了对 window 的一些引用，或者您正在使用的某些模块中对 window 有一些引用。

根据 react-static 文档：

'因为 React-Static 代码在运行时在浏览器中使用，在构建和导出期间在节点中使用，所以你的所有代码都是“通用的”或者换句话说是“节点安全的”是非常重要的。'

https://github.com/react-static/react-static/blob/master/docs/concepts.md#writing-universal-node-safe-code

所以用 typeof 检查窗口，为我解决了这个问题。

// 有效

const browserVar = typeof window !== 'undefined' && window.method ? 'browser' : 'node'

//不起作用

const browserVar = window && window.method ? 'browser' : 'node'