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

Question

我不知道如何解决这个问题，但我尝试了许多可能只是愚蠢的事情。我只想把我的react变成一个，这样我就可以完成我的项目了。每件事都是局部的，我知道这与服务器端和客户端的JS有关，但我不知道从哪里开始。请帮帮忙。

这是我从常规的纱线生成中得到的错误。

[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.

这就是当我运行纱线编译调试时得到的结果。

  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"
  }
}

Answer 1

我假设您忽略了对窗口的一些引用，或者在您正在使用的某个模块中有一些对窗口的引用。

根据react静态文档：

因为响应--静态代码在运行时在浏览器中使用，在构建和导出过程中使用在节点中，所以非常重要的是，您的所有代码都是“通用的”，或者换句话说，“节点安全”。

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

所以用打字机检查窗户，帮我把这个修好。

//工程

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

//不工作

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