GatsbyJS Build - окно не определено / модуль не определен

Question

Когда я пытался создать свой проект GatsbyJS, я столкнулся с довольно распространенной проблемой:

WebpackError: ReferenceError: window is not defined

При поиске в Google я обнаружил, что это довольно распространенная проблема.Итак, я перешел в 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

Переходя к другим доступным опциям, используйте веб-пакет, чтобы исключить неисправные модули

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 для создания своего проекта gatsby, поместив свой код flickity в проверку window.

Я не уверен, является ли это «правильным» или «правильным», но он действительно строит:

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