gatsby develop works fine, but I get the WebpackError: ReferenceError: self is not defined when running gatsby build

[sohinim98]

UPDATE:

Changing the way I was importing it from import Carousel from "react-spring-3d-carousel"; to

import loadable from "@loadable/component";
const Carousel = loadable(() => import("react-spring-3d-carousel"))

fixed the issue!

Note: For others that may be facing similar issues, not only related to react-spring-3d-carousel: if adding a null loader to the SSR transpilation doesn't work, the other possible workaround is adding a loadable component, which in fact, what is doing is to perform a code-splitting in the server-side.

The error is as follows:

    |
                                                                                            ^
  3 | //# sourceMappingURL=bundle.js.map


  WebpackError: ReferenceError: self is not defined
  
  - bundle.js:2 
    [saqc-countdown]/[react-spring-3d-carousel]/dist/bundle.js:2:262
  
  - bootstrap:19 
    saqc-countdown/webpack/bootstrap:19:1
  
  - bootstrap:19 
    saqc-countdown/webpack/bootstrap:19:1
  
  - static-entry.js:225 
    saqc-countdown/.cache/static-entry.js:225:27
  
  - serialOrdered.js:46 
    [saqc-countdown]/[asynckit]/serialOrdered.js:46:1

This seems to be related to the react-spring-3d-carousel/dist/bundle.js:2:262 (https://www.npmjs.com/package/react-spring-3d-carousel)

which has the following code:

/*! For license information please see bundle.js.LICENSE.txt */
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("react-3d-carousel-spring",[],t):"object"==typeof exports?exports["react-3d-carousel-spring"]=t():e["react-3d-carousel-spring"]=t()}(self,(function(){return function(){var e={418:function(e){"use strict"...

as you can see, "self" is being used here.

Any ideas on how to fix this issue

repository link: https://github.com/sohinim98/saqc-website/tree/post-release

Gatsby info:

System:
OS: macOS 11.6.4
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 18.12.1 - /usr/local/bin/node
Yarn: 1.22.5 - /usr/local/bin/yarn
npm: 8.19.2 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 109.0.5414.87
Firefox: 83.0
Safari: 15.3
npmPackages:
gatsby: ^5.3.3 => 5.4.2
gatsby-image: ^3.11.0 => 3.11.0
gatsby-plugin-image: ^3.3.2 => 3.4.0
gatsby-plugin-manifest: ^5.3.1 => 5.4.0
gatsby-plugin-react-helmet: ^6.3.0 => 6.4.0
gatsby-plugin-sharp: ^5.3.2 => 5.4.0
gatsby-plugin-smoothscroll: ^1.2.0 => 1.2.0
gatsby-remark-images: ^7.3.1 => 7.4.0
gatsby-source-filesystem: ^5.3.1 => 5.4.0
gatsby-transformer-sharp: ^5.3.1 => 5.4.0
npmGlobalPackages:
gatsby-cli: 5.3.1

Update: Added this to gatsby-node.js

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

now, get this error with gatsby build:

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

WebpackError: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

[sohinim98]

do you have a fix in mind for this? @sparshsharma2510

[veyselemrearik]

@sohinim98 thank you for the solution