I seem to have hit a very strange wall in my GatsbyJS project. Please bear with me as it'll take a while to explain and I'm very desperate for help.
I have this template where I need to make use of @loadable/component in order to make sure the component inside is only rendered on the client. If it renders on the server side, it breaks the build.
import React from "react";
import Layout from "../components/layout";
import loadable from "@loadable/component";
interface MapProps {
data: any;
}
const Map = ({ data }: MapProps) => {
const LoadableArcGisMap = loadable(
() => import("../components/arc/arc-gis-map")
);
const map = data.strapiMap;
return (
<Layout>
<LoadableArcGisMap id={map.arcgisId} />
</Layout>
);
};
Here is my gatsby-node.js which creates pages from the template above:
const path = require("path");
exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions;
// Define a template for blog post
const mapTemplate = path.resolve("./src/templates/map.tsx");
const result = await graphql(
`
{
allStrapiMap {
nodes {
header
slug
}
}
}
`
);
if (result.errors) {
reporter.panicOnBuild(
`There was an error loading your Strapi articles`,
result.errors
);
return;
}
const maps = result.data.allStrapiMap.nodes;
if (maps.length > 0) {
maps.forEach((map) => {
createPage({
name: `map-${map.slug}`,
path: `/map/${map.slug}`,
component: mapTemplate,
context: {
slug: map.slug,
},
});
});
}
};
Now the strange thing is, this is preventing me from having more than 6 pages in my /src/pages directory. As soon as I add a 7 page (regardless of the file name or content), I'm given the following error on gatsby build:
failed Building production JavaScript and CSS bundles - 14.900s
ERROR #98123 WEBPACK
Generating JavaScript bundles failed
SplitChunksPlugin
Cache group "shared" conflicts with existing chunk.
Both have the same name "380d42e81165839365c4703ae67985f785a96bdc" and existing chunk is not a parent
of the selected modules.
Use a different name for the cache group or make sure that the existing chunk is a parent (e. g. via
dependOn).
HINT: You can omit "name" to automatically create a name.
BREAKING CHANGE: webpack < 5 used to allow to use an entrypoint as splitChunk. This is no longer
allowed when the entrypoint is not a parent of the selected modules.
Remove this entrypoint and add modules to cache group's 'test' instead. If you need modules to be
evaluated on startup, add them to the existing entrypoints (make them arrays). See migration guide of
more info.
If I comment out the dynamic import with loadable/components, I can add as many pages as I want and gatsby build runs fine. The build also runs fine if the dynamic import is there, but I have 6 or less pages in the code.
How can I find out what the chunk name 380d42e81165839365c4703ae67985f785a96bdc is refering to? I've tried a million things at this time and this string never changes.
here is my package.json to show which versions I'm using
{
"name": "my-gatsby-blog",
"version": "1.0.7",
"private": true,
"description": "Strapi Gatsby Blog",
"author": "Strapi team",
"keywords": [
"gatsby"
],
"scripts": {
"develop": "gatsby develop",
"start": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean",
"lint": "eslint .",
"lint:fix": "eslint . --fix"
},
"dependencies": {
"@arcgis/core": "^4.25.5",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@loadable/component": "^5.15.3",
"@mui/icons-material": "^5.11.0",
"@mui/material": "^5.11.8",
"@mui/styles": "^5.11.7",
"@types/react": "^18.0.28",
"@types/react-helmet": "^6.1.6",
"axios": "^1.3.4",
"classnames": "^2.3.2",
"esri-loader": "^3.7.0",
"formik": "^2.2.9",
"formik-mui": "^5.0.0-alpha.0",
"gatsby": "^4.24.0",
"gatsby-plugin-gatsby-cloud": "^4.7.0",
"gatsby-plugin-image": "^3.7.0",
"gatsby-plugin-sharp": "^4.7.0",
"gatsby-source-cloudinary": "^0.4.0",
"gatsby-source-strapi": "^2.0.0",
"gatsby-theme-material-ui": "^5.3.0",
"gatsby-transformer-cloudinary": "^4.3.1",
"gatsby-transformer-remark": "^5.6.0",
"gatsby-transformer-sharp": "^4.7.0",
"geojson-geometries-lookup": "^0.5.0",
"markdown-to-jsx": "^7.1.9",
"mui-markdown": "^0.5.6",
"prism-react-renderer": "^1.3.5",
"proj4": "^2.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-google-recaptcha-v3": "^1.10.1",
"react-helmet": "^6.1.0",
"react-iframe": "^1.8.5",
"react-slick": "^0.28.1",
"slick-carousel": "^1.8.1",
"yup": "^1.0.2"
},
"devDependencies": {
"@types/loadable__component": "^5.13.4",
"@types/react-recaptcha": "^2.3.4",
"@types/react-slick": "^0.23.10",
"autoprefixer": "^10.4.2",
"eslint": "^8.8.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^7.0.0",
"eslint-plugin-prettier": "^4.0.0",
"prettier": "^2.5.1"
},
"engines": {
"node": "^18.15.0",
"npm": ">=6.0.0"
}
}
Any kind of debugging advice would be massively appreciated here. I realise it's a strange one, and it's a huge blockage to my nearing deadline...
Assuming that you're using VS Code, in order to debug this, here is what I'd do:
launch.json file:{
"cwd": "${workspaceFolder}",
"name": "Debugging webpack",
"type": "node",
"request": "launch",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run",
"build"
]
},
SplitChunksPlugin is located in the node_modules folder and add a breakpoint here/* ... */
const valid = alreadyValidatedParents.get(parentValidationKey);
if (valid === false) return;
if (valid === undefined) { /* ... */ }
FWIW, I've written a bit about how the SplitChunksPlugin works in Webpack: An in-depth introduction to SplitChunksPlugin
.