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

Question

更新

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

我开始了这个项目：

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 installnpm updatenpm i react-domnpm 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"
      }
    }

盖茨比-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`,
    {
      resolve: `gatsby-source-filesystem`,
      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: []
      }
    }
  ],
}

Answer 1

试试 re-adding gatsby-react-router-scroll.

npm install gatsby-react-router-scroll

您可能想先运行一个 gatsby clean。

Answer 2

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

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

从 gatsby-link 更改为 gatsby
安装 react & react-dom

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

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

Can't resolve 'react-dom' in '/path/node_modules/gatsby-react-router-scroll' when running "gatsby-develop"

reactjs

react-dom

gatsby

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

Can't resolve 'react-dom' in '/path/node_modules/gatsby-react-router-scroll' when running "gatsby-develop"

reactjs

react-dom

gatsby

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