盖茨比+反应预订日历："WebpackError: ReferenceError: self未定义“在'gatsby构建‘上，但'gatsby开发’工作良好

Question

我在用盖茨比建一个网站。我添加了反应预订日历来显示一些日历数据。

运行'gatsby develop‘可以正常工作，但是运行'gatsby build’会产生以下错误：

WebpackError: ReferenceError: self is not defined

  - index.js:13
    node_modules/react-booking-calendar/lib/index.js:13:10310

  - index.js:13
    node_modules/react-booking-calendar/lib/index.js:13:10234

  - index.js:13 e.exports
    node_modules/react-booking-calendar/lib/index.js:13:10505

  - index.js:13 Object.<anonymous>
    node_modules/react-booking-calendar/lib/index.js:13:11026

  - index.js:1 t
    node_modules/react-booking-calendar/lib/index.js:1:328

  - index.js:12 Object.<anonymous>
    node_modules/react-booking-calendar/lib/index.js:12:5444

  - index.js:1 t
    node_modules/react-booking-calendar/lib/index.js:1:328

  - index.js:1 Object.<anonymous>
    node_modules/react-booking-calendar/lib/index.js:1:519

  - index.js:1 t
    node_modules/react-booking-calendar/lib/index.js:1:328

  - index.js:1
    node_modules/react-booking-calendar/lib/index.js:1:401

  - index.js:1
    node_modules/react-booking-calendar/lib/index.js:1:437

  - index.js:1
    node_modules/react-booking-calendar/lib/index.js:1:65

  - index.js:1 Object../node_modules/react-booking-calendar/lib/index.js
    node_modules/react-booking-calendar/lib/index.js:1:211

在错误发生之前，它会打印整个小型化版本的Reactive-订票日历index.js。在这个博客里，我可以看到“自我”出现过一次：

f=h(function(){return/msie [6-9]\b/.test(self.navigator.userAgent.toLowerCase())})

我希望就这个问题提出任何意见。谢谢。

Gatsby版本: Gatsby CLI版本: 2.12.8 Node版本: v13.13.0 React预订日历：^1.0.3

Answer 1

正如@Hades所指出的，由于资产编译和develop捆绑，盖茨比的行为在build和JavaScript之间可能有所不同。您可以在盖茨比关于调试的文档中查看更多信息。

要绕过错误并编译，有几个选项：

• 直到在您使用window的组件/函数中定义了f=h(function(){return/msie [6-9]\b/.test(self.navigator.userAgent.toLowerCase())})。使用这样的方法： if (typeof window !== 'undefined') { f=h(function(){return/msie [6-9]\b/.test(self.navigator.userAgent.toLowerCase())}) }
• 将webpack的配置更改为为第三方库使用null加载程序，在gatsby-node.jsexports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { if (stage === "build-html") { actions.setWebpackConfig({ module: { rules: [ { test: /react-booking-calendar/, use: loaders.null(), }, ], }, }) } }中使用
• 将代码放入componentDidMount生命周期或useEffect钩子中，以确保在执行代码时已经定义了window。

Answer 2

在develop中运行时，主要是在浏览器中运行React。

在运行build时，您主要是在节点中运行，而节点对浏览器一无所知--您试图访问navigator (即浏览器)。

由于节点没有特定事物的概念，例如DOM、document、window等，所以您需要使用react和状态管理来访问它们，即使这样，也可以先检查它们是否存在。