我正在将我的 Gatsby 站点从 v2 迁移到 v3，并且我已经更新了我的 npm 包，但是我收到了错误
I am migrating my Gatsby site from v2 to v3 and I have updated my npm packages but I am getting errors
我正在从 gatsby v2 迁移到 v3，这样我就可以在我的网站中使用 Gatsby 增量构建而不使用 Gatsby 云服务但是在更新 gatsby 版本和更新每个过时的 npm 包时我收到错误这个 Mini Extract css,
这是我的 package.json 文件：
{
"name": "Sunlighten",
"description": "Gatsby build for Sunlighten",
"version": "1.0.0",
"author": "",
"dependencies": {
"@babylonjs/core": "^4.2.0",
"@babylonjs/gui": "^4.2.0",
"@babylonjs/loaders": "^4.2.0",
"@kentico/gatsby-kontent-components": "^6.2.0",
"@kentico/gatsby-source-kontent": "^6.3.5",
"@loadable/component": "^5.15.0",
"@rshackleton/gatsby-transformer-kontent-image": "^2.1.0",
"@sentry/gatsby": "^6.17.4",
"@sentry/react": "^6.17.4",
"@typeform/embed": "^0.34.6",
"@types/react-modal": "^3.12.0",
"algoliasearch": "^4.12.1",
"axios": "^0.21.1",
"date-fns": "^2.22.1",
"framer-motion": "^3.2.1",
"gatsby-image": "^2.3.4",
"gatsby-plugin-advanced-sitemap": "^2.0.0",
"gatsby-plugin-algolia": "^0.22.1",
"gatsby-plugin-breakpoints": "^1.3.1",
"gatsby-plugin-google-tagmanager": "^2.11.0",
"gatsby-plugin-loadable-components-ssr": "git+https://git@github.com/sunlighten007/gatsby-plugin-loadable-components-ssr.git#4c21830f0530a928a90a8d087dbd1d178803fb1b",
"gatsby-plugin-react-helmet": "^3.2.4",
"gatsby-plugin-readingtime": "^1.1.0",
"gatsby-plugin-robots-txt": "^1.6.14",
"gatsby-plugin-sharp": "^2.14.4",
"gatsby-plugin-sitemap": "^4.10.0",
"gatsby-plugin-zeit-now": "^0.4.0",
"gatsby-transformer-remark": "^2.7.3",
"gatsby-transformer-sharp": "^2.9.0",
"lodash": "^4.17.15",
"lodash.get": "^4.4.2",
"proxy-polyfill": "^0.3.2",
"react": "^16.13.1",
"react-autosuggest": "^10.1.0",
"react-babylonjs": "^3.0.17",
"react-cookie": "^4.0.3",
"react-dom": "^16.13.1",
"react-dropdown": "^1.9.2",
"react-error-overlay": "^6.0.10",
"react-helmet": "^6.0.0",
"react-hook-form": "^6.15.8",
"react-instantsearch-dom": "^6.22.0",
"react-jotform-embed": "^1.1.1",
"react-modal": "^3.14.3",
"react-player": "^2.9.0",
"react-select": "^5.2.1",
"react-toastify": "^7.0.4",
"react-truncate": "^2.4.0",
"sharp": "^0.25.4",
"stylis": "^4.0.13"
},
"devDependencies": {
"@babel/core": "^7.17.0",
"@storybook/addon-actions": "^6.4.18",
"@storybook/addon-essentials": "^6.4.18",
"@storybook/addon-links": "^6.4.18",
"@storybook/react": "^6.4.18",
"@svgr/webpack": "^5.5.0",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^11.2.7",
"@types/jest": "^26.0.19",
"@types/node": "^14.18.10",
"@types/react": "^17.0.39",
"@types/react-autosuggest": "^10.0.1",
"@types/react-dom": "^17.0.8",
"@types/react-helmet": "^6.1.0",
"@types/react-instantsearch-dom": "^6.8.0",
"@types/react-truncate": "^2.3.3",
"@types/typeform__embed": "^0.22.2",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"babel-preset-gatsby": "^0.9.0",
"chalk": "^4.0.0",
"core-js": "^3.21.0",
"cypress": "^6.1.0",
"dotenv": "^8.6.0",
"eslint": "^6.8.0",
"eslint-plugin-react": "^7.24.0",
"gatsby": "^3.14.6",
"gatsby-plugin-postcss": "^3.3.0",
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.24",
"gh-pages": "^2.2.0",
"husky": "^4.3.6",
"identity-obj-proxy": "^3.0.0",
"inquirer": "^7.1.0",
"jest": "^26.6.3",
"jest-junit": "^12.2.0",
"lint-staged": "^10.5.3",
"npm-force-resolutions": "0.0.3",
"postcss": "^8.4.6",
"postcss-custom-properties": "^10.0.0",
"postcss-easy-import": "^3.0.0",
"postcss-mixins": "6.2.3",
"postcss-nested": "4.2.3",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.3.1",
"react-test-renderer": "^17.0.1",
"rimraf": "^3.0.2",
"storybook-css-modules-preset": "^1.1.1",
"yargs-parser": "^18.1.3"
},
"engines": {
"node": ">=10.13.0"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"scripts": {
"dev": "npm run develop",
"develop": "gatsby develop",
"lint": "eslint --ext .js,.jsx --ignore-pattern public .",
"test": "jest",
"test:ci": "CI=true jest --reporters=default --reporters=jest-junit",
"test:watch": "jest --watch",
"e2e": "cypress open",
"e2e:ci": "cypress run",
"e2e:verify": "cypress verify",
"format": "prettier --trailing-comma es5 --single-quote --write 'src/**/*' 'bin/*.js'",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean",
"fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{\"semi\": [2, \"never\"], \"no-extra-semi\": [2]}' --fix *.js bin/*.js",
"setup": "node ./bin/setup.js",
"start": "npm run develop",
"heroku-postbuild": "gatsby build",
"cleanup-repository": "yarn remove contentful-import chalk inquirer && node ./bin/cleanup.js && rimraf bin contentful",
"copy-static-queries": "copy .\public\page-data\sq\d .\public\static",
"prestorybook": "npm run copy-static-queries",
"storybook": "NODE_ENV=test start-storybook -p 6006 -s ./src/stories/assets,./static/",
"build-storybook": "NODE_ENV=test build-storybook -s ./src/stories/assets,./static/"
},
"resolutions": {
"react-error-overlay": "6.0.9"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
"src/**/*.{js,jsx,ts,tsx,css}": "prettier --write"
},
"jest-junit": {
"outputDirectory": "test/results/",
"outputName": "unit.xml"
},
"browser": {
"[module-name]": false
}
}
但是当我在本地尝试 运行 我的网站时，出现以下错误：
ERROR in ./src/components/WhatSaunaResults/what-sauna-results.module.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ValidationError: Invalid options object. Mini CSS Extract Plugin Loader has been
initialized using an options object that does not match the API schema.
- options has an unknown property 'hmr'. These properties are valid:
object { publicPath?, emit?, esModule?, layer?, modules? }
at validate (D:\sunlighten-latest\website\node_modules\mini-css-extract-plugin\node_modules\schema-utils\dist\validate.js:105:11)
at Object.pitch (D:\sunlighten-latest\website\node_modules\mini-css-extract-plugin\dist\loader.js:43:29)
@ ./src/components/WhatSaunaResults/WhatSaunaResults.tsx 13:0-53 75:17-30 77:17-35 82:17-37 90:17-27 97:15-29 100:15-36 105:15-26 107:15-29 114:15-26
@ ./src/components/WhatSaunaResults/index.tsx 13:0-50 80:42-58
@ ./src/components/WhatSaunaIsRightForYouForm/WhatSaunaForm.tsx 15:0-66 173:38-63
@ ./src/components/WhatSaunaIsRightForYouForm/index.tsx 16:0-44 36:42-55
@ ./src/components/ReferenceComponent.tsx 460:13-64 435:11-437:35
@ ./src/templates/Page.tsx 23:0-66 177:44-62
@ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 26:11-28:5
@ ./.cache/app.js 18:0-52 31:87-35:1 34:29-42 37:27-40 31:0-35:2
ERROR in ESLint is not a constructor
我有 webpack 版本 5 和节点版本 12 以上，在更新每个过时的 npm 之后我已经尝试了所有方法但无法解决这个迷你 css 提取问题
我在本地 运行ning 时收到此错误：
模块构建失败（来自
./node_modules/gatsby/node_modules/mini-css-extract-plugin/dist/loader.js):
ValidationError：无效的选项对象。 Mini CSS Extract Plugin Loader 已使用
初始化
与 API 架构不匹配的选项对象。
- 选项有一个未知 属性 'hmr'。这些属性是有效的：
object { publicPath?, emit?, esModule?, layer?, modules? }
在验证
我已经设置了一个 webpack.config.js 文件，这里是这个文件的代码，任何人都可以建议我缺少什么，我得到这个 hmr 错误：
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
optimization: {
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
// `...`,
new CssMinimizerPlugin(),
],
minimize: true,
},
};
CSS Gatsby v3 以后的模块需要作为 ES 模块导入，所以你的：
import styles from './related-products.modules.css'
应该是：
import * as styles from './related-products.modules.css'
请记住，这不是导入 CSS 模块的推荐方式，因为您不允许 webpack 对您的样式进行 treeshake。理想情况下，您应该导入所需的命名模块，例如：
import { style1, style2, style3 } from './related-products.modules.css'
关于新一期：
I am getting this error while running locally : Module build failed (from ./node_modules/gatsby/node_modules/mini-css-extract-plugin/dist/loader.js): ValidationError: Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.
尝试添加（开发）依赖项：
yarn add --dev css-loader@^5.0.0 postcss@^8.1.10 postcss-import@^13.0.0 postcss-loader@^4.1.0 postcss-url@^10.1.1
或者 npm 中的等价物。
{
"name": "Sunlighten",
"description": "Gatsby build for Sunlighten",
"version": "1.0.0",
"author": "",
"dependencies": {
"@babylonjs/core": "^4.2.0",
"@babylonjs/gui": "^4.2.0",
"@babylonjs/loaders": "^4.2.0",
"@kentico/gatsby-kontent-components": "^6.2.0",
"@kentico/gatsby-source-kontent": "^6.3.5",
"@loadable/component": "^5.15.0",
"@rshackleton/gatsby-transformer-kontent-image": "^2.1.0",
"@sentry/gatsby": "^6.17.4",
"@sentry/react": "^6.17.4",
"@typeform/embed": "^0.34.6",
"@types/react-modal": "^3.12.0",
"algoliasearch": "^4.12.1",
"axios": "^0.21.1",
"date-fns": "^2.22.1",
"framer-motion": "^3.2.1",
"gatsby-image": "^2.3.4",
"gatsby-plugin-advanced-sitemap": "^2.0.0",
"gatsby-plugin-algolia": "^0.22.1",
"gatsby-plugin-breakpoints": "^1.3.1",
"gatsby-plugin-google-tagmanager": "^2.11.0",
"gatsby-plugin-loadable-components-ssr": "git+https://git@github.com/sunlighten007/gatsby-plugin-loadable-components-ssr.git#4c21830f0530a928a90a8d087dbd1d178803fb1b",
"gatsby-plugin-react-helmet": "^3.2.4",
"gatsby-plugin-readingtime": "^1.1.0",
"gatsby-plugin-robots-txt": "^1.6.14",
"gatsby-plugin-sharp": "^2.14.4",
"gatsby-plugin-sitemap": "^4.10.0",
"gatsby-plugin-zeit-now": "^0.4.0",
"gatsby-transformer-remark": "^2.7.3",
"gatsby-transformer-sharp": "^2.9.0",
"lodash": "^4.17.15",
"lodash.get": "^4.4.2",
"proxy-polyfill": "^0.3.2",
"react": "^16.13.1",
"react-autosuggest": "^10.1.0",
"react-babylonjs": "^3.0.17",
"react-cookie": "^4.0.3",
"react-dom": "^16.13.1",
"react-dropdown": "^1.9.2",
"react-error-overlay": "^6.0.10",
"react-helmet": "^6.0.0",
"react-hook-form": "^6.15.8",
"react-instantsearch-dom": "^6.22.0",
"react-jotform-embed": "^1.1.1",
"react-modal": "^3.14.3",
"react-player": "^2.9.0",
"react-select": "^5.2.1",
"react-toastify": "^7.0.4",
"react-truncate": "^2.4.0",
"sharp": "^0.25.4",
"stylis": "^4.0.13"
},
"devDependencies": {
"@babel/core": "^7.17.0",
"@storybook/addon-actions": "^6.4.18",
"@storybook/addon-essentials": "^6.4.18",
"@storybook/addon-links": "^6.4.18",
"@storybook/react": "^6.4.18",
"@svgr/webpack": "^5.5.0",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^11.2.7",
"@types/jest": "^26.0.19",
"@types/node": "^14.18.10",
"@types/react": "^17.0.39",
"@types/react-autosuggest": "^10.0.1",
"@types/react-dom": "^17.0.8",
"@types/react-helmet": "^6.1.0",
"@types/react-instantsearch-dom": "^6.8.0",
"@types/react-truncate": "^2.3.3",
"@types/typeform__embed": "^0.22.2",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"babel-preset-gatsby": "^0.9.0",
"chalk": "^4.0.0",
"core-js": "^3.21.0",
"cypress": "^6.1.0",
"dotenv": "^8.6.0",
"eslint": "^6.8.0",
"eslint-plugin-react": "^7.24.0",
"gatsby": "^3.14.6",
"gatsby-plugin-postcss": "^3.3.0",
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.24",
"gh-pages": "^2.2.0",
"husky": "^4.3.6",
"identity-obj-proxy": "^3.0.0",
"inquirer": "^7.1.0",
"jest": "^26.6.3",
"jest-junit": "^12.2.0",
"lint-staged": "^10.5.3",
"npm-force-resolutions": "0.0.3",
"postcss": "^8.4.6",
"postcss-custom-properties": "^10.0.0",
"postcss-easy-import": "^3.0.0",
"postcss-mixins": "6.2.3",
"postcss-nested": "4.2.3",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.3.1",
"react-test-renderer": "^17.0.1",
"rimraf": "^3.0.2",
"storybook-css-modules-preset": "^1.1.1",
"yargs-parser": "^18.1.3"
},
"engines": {
"node": ">=10.13.0"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"scripts": {
"dev": "npm run develop",
"develop": "gatsby develop",
"lint": "eslint --ext .js,.jsx --ignore-pattern public .",
"test": "jest",
"test:ci": "CI=true jest --reporters=default --reporters=jest-junit",
"test:watch": "jest --watch",
"e2e": "cypress open",
"e2e:ci": "cypress run",
"e2e:verify": "cypress verify",
"format": "prettier --trailing-comma es5 --single-quote --write 'src/**/*' 'bin/*.js'",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean",
"fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{\"semi\": [2, \"never\"], \"no-extra-semi\": [2]}' --fix *.js bin/*.js",
"setup": "node ./bin/setup.js",
"start": "npm run develop",
"heroku-postbuild": "gatsby build",
"cleanup-repository": "yarn remove contentful-import chalk inquirer && node ./bin/cleanup.js && rimraf bin contentful",
"copy-static-queries": "copy .\public\page-data\sq\d .\public\static",
"prestorybook": "npm run copy-static-queries",
"storybook": "NODE_ENV=test start-storybook -p 6006 -s ./src/stories/assets,./static/",
"build-storybook": "NODE_ENV=test build-storybook -s ./src/stories/assets,./static/"
},
"resolutions": {
"react-error-overlay": "6.0.9"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
"src/**/*.{js,jsx,ts,tsx,css}": "prettier --write"
},
"jest-junit": {
"outputDirectory": "test/results/",
"outputName": "unit.xml"
},
"browser": {
"[module-name]": false
}
}
但是当我在本地尝试 运行 我的网站时，出现以下错误：
ERROR in ./src/components/WhatSaunaResults/what-sauna-results.module.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ValidationError: Invalid options object. Mini CSS Extract Plugin Loader has been
initialized using an options object that does not match the API schema.
- options has an unknown property 'hmr'. These properties are valid:
object { publicPath?, emit?, esModule?, layer?, modules? }
at validate (D:\sunlighten-latest\website\node_modules\mini-css-extract-plugin\node_modules\schema-utils\dist\validate.js:105:11)
at Object.pitch (D:\sunlighten-latest\website\node_modules\mini-css-extract-plugin\dist\loader.js:43:29)
@ ./src/components/WhatSaunaResults/WhatSaunaResults.tsx 13:0-53 75:17-30 77:17-35 82:17-37 90:17-27 97:15-29 100:15-36 105:15-26 107:15-29 114:15-26
@ ./src/components/WhatSaunaResults/index.tsx 13:0-50 80:42-58
@ ./src/components/WhatSaunaIsRightForYouForm/WhatSaunaForm.tsx 15:0-66 173:38-63
@ ./src/components/WhatSaunaIsRightForYouForm/index.tsx 16:0-44 36:42-55
@ ./src/components/ReferenceComponent.tsx 460:13-64 435:11-437:35
@ ./src/templates/Page.tsx 23:0-66 177:44-62
@ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 26:11-28:5
@ ./.cache/app.js 18:0-52 31:87-35:1 34:29-42 37:27-40 31:0-35:2
ERROR in ESLint is not a constructor
我有 webpack 版本 5 和节点版本 12 以上，在更新每个过时的 npm 之后我已经尝试了所有方法但无法解决这个迷你 css 提取问题
我在本地 运行ning 时收到此错误：
模块构建失败（来自
./node_modules/gatsby/node_modules/mini-css-extract-plugin/dist/loader.js):
ValidationError：无效的选项对象。 Mini CSS Extract Plugin Loader 已使用
初始化
与 API 架构不匹配的选项对象。
- 选项有一个未知 属性 'hmr'。这些属性是有效的： object { publicPath?, emit?, esModule?, layer?, modules? } 在验证
我已经设置了一个 webpack.config.js 文件，这里是这个文件的代码，任何人都可以建议我缺少什么，我得到这个 hmr 错误：
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
optimization: {
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
// `...`,
new CssMinimizerPlugin(),
],
minimize: true,
},
};
CSS Gatsby v3 以后的模块需要作为 ES 模块导入，所以你的：
import styles from './related-products.modules.css'
应该是：
import * as styles from './related-products.modules.css'
请记住，这不是导入 CSS 模块的推荐方式，因为您不允许 webpack 对您的样式进行 treeshake。理想情况下，您应该导入所需的命名模块，例如：
import { style1, style2, style3 } from './related-products.modules.css'
关于新一期：
I am getting this error while running locally :
Module build failed (from ./node_modules/gatsby/node_modules/mini-css-extract-plugin/dist/loader.js): ValidationError: Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.
尝试添加（开发）依赖项：
yarn add --dev css-loader@^5.0.0 postcss@^8.1.10 postcss-import@^13.0.0 postcss-loader@^4.1.0 postcss-url@^10.1.1
或者 npm 中的等价物。