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.
UPDATE:
Changing the way I was importing it from
import Carousel from "react-spring-3d-carousel";tofixed 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:
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:
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.jsnow, get this error with
gatsby build:WebpackError: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.