Closed albertkimdev closed 5 years ago
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.
@pieh Hey that worked great! I also had to add
{
test: /scrollmagic/,
use: loaders.null(),
},
and it built properly, thanks!
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",
Description
I am trying to build my gatsby app using ScrollMagic.
I see this error when I run gatsby build
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
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.