时间戳

首页 > 解决方案 > 在 Gatsby 中找不到 MDX 模块

reactjs - 在 Gatsby 中找不到 MDX 模块

问题描述

我正在制作一个 Gatsby 网站，我最初将它设置为通过gatsby-transformer-remark. 从那以后，我决定将其移至 MDX，以便在我可以使用的内容上有更多的自由。

我已按照本指南将项目从 MD 迁移到 MDX，但我不断收到以下错误：

Cannot find module 'D:\XXXX\XXXX\gatsby\.cache\caches\gatsby-plugin-mdx\webpack\output.js'
Require stack:
- D:\XXXX\XXXX\gatsby\node_modules\gatsby-plugin-mdx\utils\render-html.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby-plugin-mdx\gatsby\source-nodes.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby-plugin-mdx\gatsby-node.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\bootstrap\load-plugins\validate.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\bootstrap\load-plugins\load.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\bootstrap\load-plugins\index.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\services\initialize.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\services\index.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\state-machines\develop\services.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\state-machines\develop\index.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\commands\develop-process.js
- D:\XXXX\XXXX\gatsby\.cache\tmp-4452-lp3aICfNr8bo

我试过了：

没有任何效果。这对于 NPM 或 Webpack 来说一定是一件非常愚蠢的事情，但我只是看不到它。

盖茨比-config.js

 module.exports = {
  siteMetadata: {
    title: "XXXX",
    copyright: "XXXX"

  },
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.md`, `.mdx`],
      },
    },
    `gatsby-transformer-remark`,
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
  ]
}

包.json

{
  "name": "gatsby-starter-hello-world",
  "private": true,
  "description": "A simplified bare-bones starter for Gatsby",
  "version": "0.1.0",
  "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"
  },
  "dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "gatsby": "^3.1.2",
    "gatsby-plugin-image": "^1.1.2",
    "gatsby-plugin-mdx": "^2.1.0",
    "gatsby-plugin-sharp": "^3.1.2",
    "gatsby-source-filesystem": "^3.1.0",
    "gatsby-transformer-remark": "^3.1.0",
    "gatsby-transformer-sharp": "^3.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-in-viewport": "^1.0.0-alpha.16",
    "react-reveal-text": "^0.1.1",
    "react-spring": "^8.0.27",
    "react-text-loop": "^2.3.0"
  },
  "devDependencies": {
    "prettier": "2.2.1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

编辑：我应该指出，当我转到错误中提到的缓存中的那个位置时，确实没有 webpack 文件夹，也没有 output.js - 所以当我运行时它真的没有生成gatsby develop，我只是无法理解为什么。

我还尝试通过克隆官方 gatsby mdx 入门模板来创建一个新项目，并且开箱即用。

标签： reactjsnpmwebpackgatsby

解决方案

推荐阅读