运行“ gatsby-develop”时，无法解析“ / path / node_modules / gatsby-react-router-scroll”中的“ react-dom”

编程问答 2022-08-13

问题描述

更新

事实证明，从我的gatsby-plugin-preact中删除gatsby-config.js可以解决此问题。我不知道为什么，但我想使用预先言语

Here is the project on Github

我通过以下方式开始了该项目：

gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default

我运行gatsby develop并获得

 ERROR #98124  WEBPACK

Generating SSR bundle Failed

Can't resolve 'react-dom' in '/path/node_modules/gatsby-react-router-scroll'

If you're trying to use a package make sure that 'react-dom' is installed. If you're trying to use a local file make sure that the path is correct.

File: node_modules/gatsby-react-router-scroll/scroll-container.js

not finished Generating image thumbnails - 7.221s

我已经尝试过rm -rf node_modules && npm install npm update npm i react-dom npm i react-router-dom，但这并没有改变

package.json 

    {
      "name": "gatsby-starter-default","private": true,"description": "A simple starter to get up and developing quickly with Gatsby","version": "0.1.0","author": "Kyle Mathews <mathews.kyle@gmail.com>","dependencies": {
        "gatsby": "^2.24.50","gatsby-image": "^2.4.16","gatsby-plugin-manifest": "^2.4.24","gatsby-plugin-netlify": "^2.3.13","gatsby-plugin-offline": "^3.2.25","gatsby-plugin-preact": "^4.0.9","gatsby-plugin-purgecss": "^5.0.0","gatsby-plugin-react-helmet": "^3.3.10","gatsby-plugin-root-import": "^2.0.5","gatsby-plugin-sass": "^2.3.12","gatsby-plugin-sharp": "^2.6.28","gatsby-plugin-sitemap": "^2.4.12","gatsby-plugin-typescript": "^2.4.18","gatsby-source-filesystem": "^2.3.26","gatsby-transformer-json": "^2.4.11","gatsby-transformer-sharp": "^2.5.13","prop-types": "^15.7.2","react": "^16.12.0","react-bootstrap": "^1.3.0","react-dom": "^16.13.1","react-helmet": "^6.1.0","react-router-dom": "^5.2.0","react-scroll": "^1.8.1"
      },"devDependencies": {
        "prettier": "2.1.0"
      },"keywords": [
        "gatsby"
      ],"license": "0BSD","scripts": {
        "build": "gatsby build","develop": "gatsby develop","format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"","start": "npm run develop","serve": "gatsby serve","clean": "gatsby clean","test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
      },"repository": {
        "type": "git","url": "https://github.com/gatsbyjs/gatsby-starter-default"
      },"bugs": {
        "url": "https://github.com/gatsbyjs/gatsby/issues"
      }
    }

gatsby-config.js 

const path = require(`path`)

module.exports = {
  siteMetadata: {
    title: `Title`,description: `Description.`,author: `Autho name`,themeColor: "#d2f5fb",siteUrl: "https://example.ca",},plugins: [
    `gatsby-plugin-react-helmet`,{
      resolve: `gatsby-source-filesystem`,options: {
        name: `images`,path: `${__dirname}/src/assets/images`,`gatsby-transformer-json`,options: {
        name: `data`,path: `${__dirname}/src/data`
      }
    },`gatsby-transformer-sharp`,`gatsby-plugin-sharp`,{
      resolve: `gatsby-plugin-manifest`,options: {
        name: `gatsby-starter-default`,short_name: `starter`,start_url: `/`,background_color: `#663399`,theme_color: `#663399`,display: `minimal-ui`,icon: `src/assets/images/gatsby-icon.png`,// This path is relative to the root of the site.
      },{
      resolve: 'gatsby-plugin-root-import',options: {
        "components": path.join(__dirname,"src/components"),"styles": path.join(__dirname,"src/assets/styles"),"interfaces": path.join(__dirname,"src/interfaces"),"data": path.join(__dirname,'src/data'),"pages": path.join(__dirname,'src/pages')
      }
    },`gatsby-plugin-typescript`,`gatsby-plugin-sass`,`gatsby-plugin-offline`,`gatsby-plugin-sitemap`,`gatsby-plugin-netlify`,`gatsby-plugin-preact`,{ 
      resolve: `gatsby-plugin-purgecss`,options: {
        // printRejected: true,// Print removed selectors and processed file names
        purgeOnly: ['src/assets/styles','src/components','node_modules/'],ignore: ['node_modules/'],whitelist: [],whitelistPatterns: []
      }
    }
  ],}

解决方法

从 Gatsby v1 迁移到 v2 时可能会出现此错误。此处提供官方升级指南：https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v1-to-v2/

在我的案例中我必须做的步骤是：

  1. 从 gatsby-link 改为 gatsby
  2. 安装 react 和 react-dom

在您的情况下，可能会在 gatsby-plugin-preact 更新到最新版本：https://www.gatsbyjs.com/plugins/gatsby-plugin-preact/

,

尝试重新添加gatsby-react-router-scroll。

npm install gatsby-react-router-scroll

您可能想先运行gatsby clean。

gatsbyreact-domreactjsreactjsreactjsreactjs