reactjs - GatsbyJS Build – 窗口未定义/模块未定义

Question

当我尝试构建我的 GatsbyJS 项目时，遇到了一个相当常见的问题:

WebpackError: ReferenceError: window is not defined

当谷歌搜索时，我发现这是一个相当普遍的问题。所以我进入了 componentDidMount 并需要这样的模块

if (typeof window !== `undefined`) {
  const Flickity = require('react-flickity-component');
}

这会导致其他问题

121:13  warning  'Flickity' is assigned a value but never used                                                              no-unused-vars
170:12  error    'Flickity' is not defined                                                                                  react/jsx-no-undef

转向其他可用选项，使用 webpack 排除有问题的模块

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-flickity-component/,
            use: loaders.null(),
          },
          {
            test: /flickity-fullscreen/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

这也让我头疼

Error: Invariant Violation: Minified React error #130; visit https://reactjs.o  rg/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full me  ssage or use the non-minified dev environment for full errors and additional h  elpful warnings.

  - Error

  - react-dom-server.node.production.min.js:10 ba
    [www]/[react-dom]/cjs/react-dom-server.node.production.min.js    :10:312

  - react-dom-server.node.production.min.js:11 u
    [www]/[react-dom]/cjs/react-dom-server.node.production.min.js    :11:166

  - react-dom-server.node.production.min.js:39 a.render
    [www]/[react-dom]/cjs/react-dom-server.node.production.min.js    :39:88

  - react-dom-server.node.production.min.js:35 a.read
    [www]/[react-dom]/cjs/react-dom-server.node.production.min.js    :35:450

  - react-dom-server.node.production.min.js:47 renderToString
    [www]/[react-dom]/cjs/react-dom-server.node.production.min.js    :47:59

  - render-page.js:825 Object../.cache/static-entry.js.__webpack_exports__.defau    lt
    /Users/per.sturesson/WWW/intermission.studio/www/public/rende    r-page.js:825:18

  - worker.js:35 e
    [www]/[gatsby]/dist/utils/worker.js:35:36

  - debuggability.js:313 Promise._execute
    [www]/[bluebird]/js/release/debuggability.js:313:9

  - promise.js:483 Promise._resolveFromExecutor
    [www]/[bluebird]/js/release/promise.js:483:18

  - promise.js:79 new Promise
    [www]/[bluebird]/js/release/promise.js:79:10

  - worker.js:31 Promise.map.path
    [www]/[gatsby]/dist/utils/worker.js:31:37

  - util.js:16 tryCatcher
    [www]/[bluebird]/js/release/util.js:16:23

  - map.js:61 MappingPromiseArray._promiseFulfilled
    [www]/[bluebird]/js/release/map.js:61:38

  - promise_array.js:114 MappingPromiseArray.PromiseArray._iterate
    [www]/[bluebird]/js/release/promise_array.js:114:31

  - promise_array.js:78 MappingPromiseArray.init
    [www]/[bluebird]/js/release/promise_array.js:78:10

有什么办法可以解决这一切吗？如果我从项目中完全排除该模块，它将成功构建。

Answer 1

通过将 flickity 代码包装在 window 检查中，我成功在我的 gatsby 项目中构建了 flickity。

我不确定这是否“正确”或“适当”，但它确实可以构建:

import React, { Component } from 'react'
import Flickity from 'react-flickity-component'

import './flixity.css'

const flickityOptions = {
  wrapAround: true,
  adaptiveHeight: true,
  dragThreshold: 10
}

export default class Carousel extends Component {
  render() {
    if (typeof window !== 'undefined') {
      return (
        <div class="container py-3 mb-5">
          <Flickity options={flickityOptions}>
            <img src="https://via.placeholder.com/800x400?text=Hero1" />
            <img src="https://via.placeholder.com/800x400?text=Hero2" />
            <img src="https://via.placeholder.com/800x400?text=Hero3" />
            <img src="https://via.placeholder.com/800x400?text=Hero4" />
            <img src="https://via.placeholder.com/800x400?text=Hero5" />
            <img src="https://via.placeholder.com/800x400?text=Hero6" />
          </Flickity>
        </div>
      )
    }
    return null
  }
}