Subplugins loading doesn't respect `main` field in `package.json`

I’m currently having issues in Gatsby 4 with my gatsby-remark-acronyms plugin that I never experienced before!

From what I can tell, the initial plugin validation is failing because my plugin entry point is under a “dist” folder instead of the root of the plugin (mind you, there is a “main” entry pointing on the plugin package.json, pointing to this file), but this works fine in Gatsby 2 and 3.

Repro is quite easy, I just created a new Gatsby site with gatsby new, only specification I added was to have markdown with MDX, and then run npm add gatsby-remark-acronyms.

On the gatsby-config.js I replaced this:

`gatsby-plugin-mdx`,

with this:

{
  resolve: `gatsby-plugin-mdx`,
  options: {
    gatsbyRemarkPlugins: [
      {
        resolve: `gatsby-remark-acronyms`,
        options: {
          acronyms: {
            API: 'Application Programming Interface',
            ASAP: 'As Soon As Possible'
          },
        },
      },
    ],
  },
},

When I run npm run build, this is what I got:

> gatsby-test@1.0.0 build D:\Projects\gatsby-test
> gatsby build

Error: Cannot find module 'D:/Projects/gatsby-test/node_modules/gatsby-remark-acronyms/index'
Require stack:
- D:\Projects\gatsby-test\node_modules\gatsby\dist\bootstrap\load-plugins\validate.js
- D:\Projects\gatsby-test\node_modules\gatsby\dist\bootstrap\load-plugins\load.js
- D:\Projects\gatsby-test\node_modules\gatsby\dist\bootstrap\load-plugins\index.js
- D:\Projects\gatsby-test\node_modules\gatsby\dist\bootstrap\load-config-and-plugins.js
- D:\Projects\gatsby-test\node_modules\gatsby\dist\services\initialize.js
- D:\Projects\gatsby-test\node_modules\gatsby\dist\services\index.js
- D:\Projects\gatsby-test\node_modules\gatsby\dist\bootstrap\index.js
- D:\Projects\gatsby-test\node_modules\gatsby\dist\commands\build.js
- D:\Projects\gatsby-test\node_modules\gatsby-cli\lib\create-cli.js
- D:\Projects\gatsby-test\node_modules\gatsby-cli\lib\index.js
- D:\Projects\gatsby-test\node_modules\gatsby\dist\bin\gatsby.js
- D:\Projects\gatsby-test\node_modules\gatsby\cli.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
    at Function.resolve (D:\Projects\gatsby-test\node_modules\v8-compile-cache\v8-compile-cache.js:164:23)
    at D:\Projects\gatsby-test\node_modules\gatsby\src\bootstrap\load-plugins\validate.ts:234:52
    at Object.validate (D:\Projects\gatsby-test\node_modules\joi\lib\types\any.js:47:28)
    at Object.internals.rules (D:\Projects\gatsby-test\node_modules\joi\lib\validator.js:394:33)
    at Object.exports.validate (D:\Projects\gatsby-test\node_modules\joi\lib\validator.js:350:22)
    at internals.Base.$_validate (D:\Projects\gatsby-test\node_modules\joi\lib\base.js:773:26)
    at Object.validate (D:\Projects\gatsby-test\node_modules\joi\lib\types\array.js:273:45)
    at Object.internals.rules (D:\Projects\gatsby-test\node_modules\joi\lib\validator.js:394:33)
    at Object.exports.validate (D:\Projects\gatsby-test\node_modules\joi\lib\validator.js:350:22)
    at internals.Base.$_validate (D:\Projects\gatsby-test\node_modules\joi\lib\base.js:773:26)
    at Object.validate (D:\Projects\gatsby-test\node_modules\joi\lib\types\keys.js:108:45)
    at Object.exports.validate (D:\Projects\gatsby-test\node_modules\joi\lib\validator.js:325:26)
    at Object.internals.entry (D:\Projects\gatsby-test\node_modules\joi\lib\validator.js:142:28)
    at Object.exports.entryAsync (D:\Projects\gatsby-test\node_modules\joi\lib\validator.js:58:30)
    at internals.Base.validateAsync (D:\Projects\gatsby-test\node_modules\joi\lib\base.js:553:26) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\Projects\\gatsby-test\\node_modules\\gatsby\\dist\\bootstrap\\load-plugins\\validate.js',
    'D:\\Projects\\gatsby-test\\node_modules\\gatsby\\dist\\bootstrap\\load-plugins\\load.js',
    'D:\\Projects\\gatsby-test\\node_modules\\gatsby\\dist\\bootstrap\\load-plugins\\index.js',
    'D:\\Projects\\gatsby-test\\node_modules\\gatsby\\dist\\bootstrap\\load-config-and-plugins.js',
    'D:\\Projects\\gatsby-test\\node_modules\\gatsby\\dist\\services\\initialize.js',
    'D:\\Projects\\gatsby-test\\node_modules\\gatsby\\dist\\services\\index.js',
    'D:\\Projects\\gatsby-test\\node_modules\\gatsby\\dist\\bootstrap\\index.js',
    'D:\\Projects\\gatsby-test\\node_modules\\gatsby\\dist\\commands\\build.js',
    'D:\\Projects\\gatsby-test\\node_modules\\gatsby-cli\\lib\\create-cli.js',
    'D:\\Projects\\gatsby-test\\node_modules\\gatsby-cli\\lib\\index.js',
    'D:\\Projects\\gatsby-test\\node_modules\\gatsby\\dist\\bin\\gatsby.js',
    'D:\\Projects\\gatsby-test\\node_modules\\gatsby\\cli.js'
  ]
}
success open and validate gatsby-configs, load plugins - 0.852s
success onPreInit - 0.004s
success initialize cache - 0.080s
success copy gatsby files - 0.096s
success Compiling Gatsby Functions - 0.284s
success onPreBootstrap - 0.297s

 ERROR #11321  PLUGIN

"gatsby-plugin-mdx" threw an error while running the createSchemaCustomization lifecycle:

Cannot read property 'setParserPlugins' of undefined



  TypeError: Cannot read property 'setParserPlugins' of undefined

  - create-schema-customization.js:79 Object.createSchemaCustomization
    [gatsby-test]/[gatsby-plugin-mdx]/gatsby/create-schema-customization.js:79:37

  - api-runner-node.js:430 runAPI
    [gatsby-test]/[gatsby]/src/utils/api-runner-node.js:430:22

  - api-runner-node.js:581 Promise.catch.decorateEvent.pluginName
    [gatsby-test]/[gatsby]/src/utils/api-runner-node.js:581:13

  - debuggability.js:384 Promise._execute
    [gatsby-test]/[bluebird]/js/release/debuggability.js:384:9

  - promise.js:518 Promise._resolveFromExecutor
    [gatsby-test]/[bluebird]/js/release/promise.js:518:18

  - promise.js:103 new Promise
    [gatsby-test]/[bluebird]/js/release/promise.js:103:10

  - api-runner-node.js:579
    [gatsby-test]/[gatsby]/src/utils/api-runner-node.js:579:16

  - util.js:16 tryCatcher
    [gatsby-test]/[bluebird]/js/release/util.js:16:23

  - reduce.js:166 Object.gotValue
    [gatsby-test]/[bluebird]/js/release/reduce.js:166:18

  - reduce.js:155 Object.gotAccum
    [gatsby-test]/[bluebird]/js/release/reduce.js:155:25

  - util.js:16 Object.tryCatcher
    [gatsby-test]/[bluebird]/js/release/util.js:16:23

  - promise.js:547 Promise._settlePromiseFromHandler
    [gatsby-test]/[bluebird]/js/release/promise.js:547:31

  - promise.js:604 Promise._settlePromise
    [gatsby-test]/[bluebird]/js/release/promise.js:604:18

  - promise.js:649 Promise._settlePromise0
    [gatsby-test]/[bluebird]/js/release/promise.js:649:10

  - promise.js:729 Promise._settlePromises
    [gatsby-test]/[bluebird]/js/release/promise.js:729:18

  - async.js:93 _drainQueueStep
    [gatsby-test]/[bluebird]/js/release/async.js:93:12


not finished createSchemaCustomization - 0.116s

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-test@1.0.0 build: `gatsby build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby-test@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\pedro\AppData\Roaming\npm-cache\_logs\2021-10-26T10_00_52_634Z-debug.log

The error makes sense, as there is no “gatsby-remark-acronyms/index”, but I would expect it to respect the “main” entry and thus use “gatsby-remark-acronyms/dist/index”.

Is this expected behavior or some kind of bug introduced in Gatsby 4?

_Originally posted by @pedrolamas in https://github.com/gatsbyjs/gatsby/discussions/32860#discussioncomment-1537560_

[j-e-clark]

I’ve been trying to upgrade a site to Gatsby v4 and discovered the issue also affects gatsby-remark-relative-images.

Plugin uses "main": "dist/index.js", in package.json and is currently breaking v4 with the same error.

[LekoArts]

Please update to

 - gatsby-plugin-mdx@3.1.1
 - gatsby-remark-autolink-headers@5.1.1
 - gatsby-remark-images@6.1.1
 - gatsby-transformer-remark@5.1.1
 - gatsby@4.1.2