WebpackError: ReferenceError: document is not defined

Hi! First of all, thank you for this neat library.

I’m using it with gatsby. I’m instantiating it in useEffect like this

const scroll = new LocomotiveScroll({
      el: scrollRef.current,
      smooth: true,
      smoothMobile: true,
    })

Then I create the ref

const scrollRef = useRef(null)

and assign it to my container

<div ref={scrollRef}></div>

So far so good, it works in development mode in gatsby (so gatsby develop). The problem arises when I go to production, so with gatsby build.

WebpackError: ReferenceError: document is not defined

  - locomotive-scroll.esm.js:151 Module../node_modules/locomotive-scroll/dist/locomotive-scroll.esm.js
    node_modules/locomotive-scroll/dist/locomotive-scroll.esm.js:151:1
  
  - index.js:1 Module../src/pages/index.js
    src/pages/index.js:1:1
  
  - interopRequireDefault.js:7 Object.Module._extensions..js
    node_modules/@babel/runtime/helpers/interopRequireDefault.js:7:1

Any thoughts? Thank you!

Cheers.

Edit: I’ve found this, but It’s not working, and this, but I’m not sure how to make it working with locomotive

[edoardolunardi]

Solved! After tried many times with the links I posted, I’ve found a more easy way: basically when the component is mounted, import the module/library. This will fix the problem relate to ssr - see here

So

useEffect(() => {
    import("locomotive-scroll").then(locomotiveModule => {
      const scroll = new locomotiveModule.default({
        el: scrollRef.current,
        smooth: true,
        smoothMobile: false,
      })
    })
  }, [])

[ryanturnerwebdev]

FYI if you want to fix the build issue without having to load the script asynchronously, add this to gatsby-node.js

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