Babel.js 奇怪的SplitChunksPlugin错误'gatsby build'

gjmwrych  于 2023-03-21  发布在  Babel
关注(0)|答案(1)|浏览(115)

我似乎在我的GatsbyJS项目中遇到了一个非常奇怪的问题。请原谅我,因为这需要一段时间来解释,而且我非常渴望帮助。
我有这个模板,我需要使用@loadable/component来确保里面的组件只呈现在客户端,如果它呈现在服务器端,它会破坏构建。

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>
  );
};

下面是我的gatsby-node.js,它从上面的模板创建页面:

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,
        },
      });
    });
  }
};

现在奇怪的是,这阻止了我在/src/pages目录中有超过6个页面,只要我添加了一个7页的页面(不管文件名或内容),我在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.

如果我用loadable/components注解掉动态导入,我可以添加任意多的页面,gatsby build运行良好。如果动态导入存在,构建也运行良好,但我在代码中有6个或更少的页面。
我怎样才能知道块名380d42e81165839365c4703ae67985f785a96bdc指的是什么?我已经尝试了无数种方法,但这个字符串从未改变。
下面是我的package.json,它显示了我正在使用的版本

{
  "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"
  }
}

任何类型的调试建议都将在这里得到极大的赞赏。我意识到这是一个奇怪的建议,它是我接近截止日期的一个巨大障碍...

0tdrvxhp

0tdrvxhp1#

假设您使用的是VS代码,为了调试这个问题,下面是我要做的:
1.将此配置添加到launch.json文件:

{
  "cwd": "${workspaceFolder}",
  "name": "Debugging webpack",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "npm",
  "runtimeArgs": [
    "run",
    "build"
  ]
},

1.搜索SplitChunksPluginnode_modules文件夹中的位置,并在此处添加断点

/* ... */
const valid = alreadyValidatedParents.get(parentValidationKey);
if (valid === false) return;
if (valid === undefined) { /* ... */ }

1.使用步骤1中的配置启动调试过程。
FWIW,我已经写了一些关于SplitChunksPlugin如何在Webpack: An in-depth introduction to SplitChunksPlugin中工作的文章。

相关问题