Gatsby: ScrollMagic window is not defined during gatsby build

[yongelee]

Description

I am trying to build my gatsby app using ScrollMagic.

I see this error when I run gatsby build

error Building static HTML failed

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

  35 |
  36 |  // TODO: temporary workaround for chrome's scroll jitter bug
> 37 |  window.addEventListener("mousewheel", function () {});
     | ^
  38 |
  39 |  // global const
  40 |  var PIN_SPACER_ATTRIBUTE = "data-scrollmagic-pin-spacer";

 - ScrollMagic.js:37 Object.<anonymous>
    [lib]/[scrollmagic]/scrollmagic/uncompressed/ScrollMagic.js:37:1

ScrollMagic has an error with the window being undefined.

Steps to reproduce

Create a gatsby project and add scrollmagic and gsap

Create a gatsby-node.js file to add some custom webpack config like

const Path = require('path')

exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        TweenLite: Path.resolve(
          'node_modules',
          'gsap/src/uncompressed/TweenLite.js'
        ),
        TweenMax: Path.resolve(
          'node_modules',
          'gsap/src/uncompressed/TweenMax.js'
        ),
        TimelineLite: Path.resolve(
          'node_modules',
          'gsap/src/uncompressed/TimelineLite.js'
        ),
        TimelineMax: Path.resolve(
          'node_modules',
          'gsap/src/uncompressed/TimelineMax.js'
        ),
        ScrollMagic: Path.resolve(
          'node_modules',
          'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'
        ),
        'animation.gsap': Path.resolve(
          'node_modules',
          'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'
        ),
        'debug.addIndicators': Path.resolve(
          'node_modules',
          'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'
        ),
      },
    },
  })
}

In your component add

import ScrollMagic from 'ScrollMagic'

require('animation.gsap')
require('debug.addIndicators')

Write some scrollmagic code and try running gatsby build. It should have an error.

Expected result

A regular production gatsby build with scroll magic working as intended.

Actual result

Cannot make a production build for gatsby using scrollmagic

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz
  Binaries:
    Yarn: 1.5.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 2.7.15 - C:\Python27\python.EXE
  Browsers:
    Edge: 44.17763.1.0
  npmPackages:
    gatsby: ^2.2.11 => 2.2.11
    gatsby-plugin-react-helmet: ^2.0.10 => 2.0.11
    gatsby-plugin-styled-components: ^3.0.7 => 3.0.7
    gatsby-plugin-typography: ^2.2.10 => 2.2.10

error UNHANDLED REJECTION


  Error: The system cannot find the path specified.

  - envinfo.js:1 Function.e.exports.sync
    [v2]/[envinfo]/dist/envinfo.js:1:4970

  - envinfo.js:1 Object.copySync
    [v2]/[envinfo]/dist/envinfo.js:1:66948

  - envinfo.js:1 Object.t.writeSync.e [as writeSync]
    [v2]/[envinfo]/dist/envinfo.js:1:48777

  - envinfo.js:1
    [v2]/[envinfo]/dist/envinfo.js:1:46934

  - envinfo.js:1 Promise.all.then.e
    [v2]/[envinfo]/dist/envinfo.js:1:46949

  - next_tick.js:81 processTicksAndRejections
    internal/process/next_tick.js:81:5


error An unexpected error occurred: "Command failed.
Exit code: 1
Command: C:\\WINDOWS\\system32\\cmd.exe
Arguments: /d /s /c gatsby info --clipboard
Directory: C:\\Users\\Albert\\Documents\\Albert Site\\v2
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "C:\\Users\\Albert\\Documents\\Albert Site\\v2\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[pieh]

You get that error because window doesn't exist when static .html files are being built.

Following link to documentation from the error you get, you should use loaders.null() trick shown in https://www.gatsbyjs.org/docs/debugging-html-builds/#fixing-third-party-modules

For example:

const Path = require('path')

exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  actions.setWebpackConfig({
+   module: {
+     rules: stage === 'build-html'
+       ? [
+           {
+             test: /ScrollMagic/,
+             use: loaders.null(),
+           }
+         ]
+       : []
+   },
    resolve: {
      alias: {
        TweenLite: Path.resolve(
          'node_modules',
          'gsap/src/uncompressed/TweenLite.js'
        ),
        TweenMax: Path.resolve(
          'node_modules',
          'gsap/src/uncompressed/TweenMax.js'
        ),
        TimelineLite: Path.resolve(
          'node_modules',
          'gsap/src/uncompressed/TimelineLite.js'
        ),
        TimelineMax: Path.resolve(
          'node_modules',
          'gsap/src/uncompressed/TimelineMax.js'
        ),
        ScrollMagic: Path.resolve(
          'node_modules',
          'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'
        ),
        'animation.gsap': Path.resolve(
          'node_modules',
          'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'
        ),
        'debug.addIndicators': Path.resolve(
          'node_modules',
          'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'
        ),
      },
    },
  })
}

And potentially add any other modules to loaders.null that will complain about not existing window object.

[yongelee]

@pieh Hey that worked great! I also had to add

{
     test: /scrollmagic/,
     use: loaders.null(),
},

and it built properly, thanks!

[MichalMoravik]

Hey guys, @yongelee I have the same problem you had before. After I did:

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

It didn't show the error BUT scrollmagic does not work after gatsby build and gatsby serve. It just lost its functionality in production build. In development mode it works.

Could you, please, help me and tell me how you fixed this before? I would appreciate that! Thank you!

Here are versions of my packages:

"gsap": "^3.2.4",
"scrollmagic": "^2.0.5",