Gatsby.jsでローカルプラグイン利用時に“Perhaps you need to install its package?”のエラーが発生

Created:
Updated:

バージョン

  • react 17.0.x
  • react-dom 17.0.x

“Perhaps you need to install its package?”のエラーメッセージの内容

 ERROR

There was a problem loading plugin "{プラグイン名}". Perhaps you need to install its package?
Use --verbose to see actual error.

Error: unreachable
    at resolvePlugin (/home/node/sample_app/node_modules/gatsby/src/bootstrap/load-plugins/load.ts:145:11)
    at map (/home/node/sample_app/node_modules/gatsby/src/bootstrap/load-plugins/validate.ts:231:44)
    at Array.map (<anonymous>)
    at /home/node/sample_app/node_modules/gatsby/src/bootstrap/load-plugins/validate.ts:225:35
    at Object.validate (/home/node/sample_app/node_modules/joi/lib/types/any.js:47:28)
    at Object.internals.rules (/home/node/sample_app/node_modules/joi/lib/validator.js:394:33)
    at Object.exports.validate (/home/node/sample_app/node_modules/joi/lib/validator.js:350:22)
    at internals.Base.$_validate (/home/node/sample_app/node_modules/joi/lib/base.js:773:26)
    at Object.validate (/home/node/sample_app/node_modules/joi/lib/types/keys.js:108:45)
    at Object.exports.validate (/home/node/sample_app/node_modules/joi/lib/validator.js:325:26)
    at Object.internals.entry (/home/node/sample_app/node_modules/joi/lib/validator.js:142:28)
    at Object.exports.entryAsync (/home/node/sample_app/node_modules/joi/lib/validator.js:58:30)
    at internals.Base.validateAsync (/home/node/sample_app/node_modules/joi/lib/base.js:553:26)
    at _callee$ (/home/node/sample_app/node_modules/gatsby-plugin-utils/dist/validate.js:40:33)
    at tryCatch (/home/node/sample_app/node_modules/regenerator-runtime/runtime.js:45:40)
    at Generator.invoke [as _invoke] (/home/node/sample_app/node_modules/regenerator-runtime/runtime.js:274:22)
Initializing gatsby-remark-component

 ERROR

There was a problem loading plugin "{プラグイン名}". Perhaps you need to install its package?
Use --verbose to see actual error.


 ERROR

unreachable



  Error: unreachable

  - load.ts:145 resolvePlugin
    [app]/[gatsby]/src/bootstrap/load-plugins/load.ts:145:11

  - load.ts:252 map
    [app]/[gatsby]/src/bootstrap/load-plugins/load.ts:252:20

  - Array.map

  - load.ts:231 processPlugin
    [app]/[gatsby]/src/bootstrap/load-plugins/load.ts:231:35

  - load.ts:285 forEach
    [app]/[gatsby]/src/bootstrap/load-plugins/load.ts:285:31

  - Array.forEach

  - load.ts:284 loadPlugins
    [app]/[gatsby]/src/bootstrap/load-plugins/load.ts:284:20

  - index.ts:118 loadPlugins
    [app]/[gatsby]/src/bootstrap/load-plugins/index.ts:118:23

  - load-config-and-plugins.ts:97 loadConfigAndPlugins
    [app]/[gatsby]/src/bootstrap/load-config-and-plugins.ts:97:28

  - initialize.ts:146 initialize
    [app]/[gatsby]/src/services/initialize.ts:146:40

“Perhaps you need to install its package?”のエラー対応

package.jsonをローカルファイル参照に編集

// package.json
  "dependencies": {
    ...
    "{プラグイン名}": "file:./plugins/{プラグイン名}",
    ...
  }

“npm install”する

npm install

require.resolveを使わないように修正

// gatsby-config.js
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        extensions: [`.mdx`],
        gatsbyRemarkPlugins: [
          {
            //resolve: require.resolve('./plugins/{プラグイン名}'),
            resolve: '{プラグイン名}',

これでエラーが発生せずに実行することができました。

Must Buy

TOP