在 Gatsby 中找不到 MDX 模块

时间:2021-03-24 14:05:31

标签: reactjs npm webpack gatsby

我正在制作一个 Gatsby 网站,并且我已经通过 gatsby-transformer-remark 将其设置为使用 Markdown 文件。从那以后,我决定将其转移到 MDX,以便在我可以使用的内容方面有更多的自由。

我已经按照 this guide 将项目从 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

我试过了:

  • 清除缓存和构建文件 (gatsby clean)
  • 更新所有软件包,包括 Gatsby 本身
  • gatsby-config.js 中包含插件的各种方法
  • 将其全部改回 MD,确保其正常工作,然后再次将其迁移到 MDX。
  • 进行构建。与运行 gatsby develop
  • 时发生相同的事情
  • 删除 package-lock.json 和 node_modules 文件夹并再次运行 npm install

没有任何效果。用 NPM 或 Webpack 做这件事一定很愚蠢,但我只是没有看到。

gatsby-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/`,
      },
    },
  ]
}

package.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 入门模板来制作一个新项目,并且开箱即用。

0 个答案:

没有答案
相关问题