Gatsby: Plugin options error for `gatsby-plugin-manifest` and `gatsby-remark-images`

[barbalex]

Description

Two weeks ago I updated my dependencies: https://github.com/FNSKtZH/ae2/commit/1aa2fa097f96c4579e8ee48e5c8bcc55e56c3a7a

That is when yarn dev stopped working with this error:

alexa@PCA C:\Users\alexa\ae2
$ yarn dev
yarn run v1.22.5
$ gatsby develop
success open and validate gatsby-configs - 0.075s
error Invalid plugin options for "gatsby-plugin-manifest":

- "scope" is not allowed
error Invalid plugin options for "gatsby-remark-images":

- "wrapperStyle" must be one of [object]
not finished load plugins - 5.593s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I checked gatsby-plugin-manifest and found absolutely no mention of scope not being allowed.
I also checked gatsby-remark-images and found nothing to be wrong with wrapperStyle.

As all had worked fine before the update, I decided to roll it back.

But now I am facing this error:

$ gatsby develop
success open and validate gatsby-configs - 0.071s
success load plugins - 5.936s
success onPreInit - 0.046s
success initialize cache - 0.008s
success copy gatsby files - 0.459s
success onPreBootstrap - 0.064s
success createSchemaCustomization - 0.118s
success Checking for changed pages - 0.004s
success source and transform nodes - 0.470s
success building schema - 0.377s
info Total nodes: 126, SitePage nodes: 6 (use --verbose for breakdown)
success createPages - 0.052s
success Checking for changed pages - 0.002s
success createPagesStatefully - 0.161s
success update schema - 0.018s
success write out redirect data - 0.002s
success Build manifest and related icons - 0.098s
success onPostBootstrap - 0.109s
info bootstrap finished - 16.776s
success onPreExtractQueries - 0.002s
success extract queries from components - 3.344s
success write out requires - 0.079s
success run page queries - 1.160s - 20/20 17.23/s

 ERROR #98124  WEBPACK

Generating SSR bundle failed

Can't resolve 'react-dom' in 'C:\Users\alexa\ae2\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 - 13.432s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Today (two weeks later) I tried updating to the newest gatsby libs. Hoping the issue had been solved in the meantime. But that only provokes the first issue again.

What I have tried during two full work days several times:

• reverting to the dependencies before updating
• reverting again to the dependencies after updating
• updating to newer dependencies (tow weeks later i.e. today)
• deleting yarn.lock, removing node_modules folder, running gatsby clean in all above cases
• searched the gatsby issues and the www for solutions. Many. None worked so far

So meanwhile I am completely out of options. I have no idea how to get this project running again.

Of course this project has grown over years and it is much too complicated to create a simple reproducible case. So I guess I am stuck for good.

I fear that if no one finds a bug in gatsby that solves this problem, my only way out will be to rebuild this huge project with a different tool, like next.js. Which makes me cry.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

alexa@PCA C:\Users\alexa\ae2                                                                          
$ yarn gatsby info --clipboard                                                                        
yarn run v1.22.5                                                                                      
$ C:\Users\alexa\ae2\node_modules\.bin\gatsby info --clipboard                                        

  System:                                                                                             
    OS: Windows 10 10.0.19041                                                                         
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz                                            
  Binaries:                                                                                           
    Node: 15.0.1 - ~\AppData\Local\Temp\yarn--1604515285930-0.8068366765720616\node.CMD               
    Yarn: 1.22.5 - ~\AppData\Local\Temp\yarn--1604515285930-0.8068366765720616\yarn.CMD               
    npm: 7.0.3 - C:\Program Files\nodejs\npm.CMD                                                      
  Languages:                                                                                          
    Python: 2.7.17                                                                                    
  Browsers:                                                                                           
    Chrome: 86.0.4240.111                                                                             
    Edge: Spartan (44.19041.423.0), Chromium (86.0.622.61)                                            
  npmPackages:                                                                                        
    gatsby: 2.24.80 => 2.24.80                                                                        
    gatsby-cli: 2.12.109 => 2.12.109                                                                  
    gatsby-plugin-create-client-paths: 2.3.13 => 2.3.13                                               
    gatsby-plugin-eslint: 2.0.8 => 2.0.8                                                              
    gatsby-plugin-manifest: 2.4.35 => 2.4.35                                                          
    gatsby-plugin-offline: 3.2.33 => 3.2.33                                                           
    gatsby-plugin-react-helmet: 3.3.14 => 3.3.14                                                      
    gatsby-plugin-sharp: 2.6.42 => 2.6.42                                                             
    gatsby-plugin-styled-components: 3.3.14 => 3.3.14                                                 
    gatsby-plugin-typography: 2.5.13 => 2.5.13                                                        
    gatsby-remark-autolink-headers: 2.3.15 => 2.3.15                                                  
    gatsby-remark-copy-linked-files: 2.3.19 => 2.3.19                                                 
    gatsby-remark-emojis: 0.4.3 => 0.4.3                                                              
    gatsby-remark-external-links: 0.0.4 => 0.0.4                                                      
    gatsby-remark-images: 3.3.35 => 3.3.35                                                            
    gatsby-remark-images-medium-zoom: 1.7.0 => 1.7.0                                                  
    gatsby-source-filesystem: 2.3.35 => 2.3.35                                                        
    gatsby-transformer-remark: 2.8.42 => 2.8.42                                                       
    gatsby-transformer-sharp: 2.5.18 => 2.5.18                                                        

[barbalex]

I just updated another project:

and got the same error after running yarn && yarn upgrade && yarn dev:

$ gatsby develop
success open and validate gatsby-configs - 0.046s
error Invalid plugin options for "gatsby-plugin-manifest":

- "scope" is not allowed
error Invalid plugin options for "gatsby-remark-images":

- "wrapperStyle" must be one of [object]
not finished load plugins - 4.836s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[LekoArts]

Hey!

Sorry to hear that you run into problems -- with the merge of https://github.com/gatsbyjs/gatsby/pull/27242 we enforced plugin options and sadly didn't catch all undocumented ones. You see the errors (for still valid options) as they are not in the schema.

To unblock you, you can update all dependencies but revert both plugins in question to their previous versions. You can do so by installing it with:

npm install [email protected] [email protected]

[barbalex]

@LekoArts thanks for your quick update.

I did:

yarn add [email protected] [email protected]
yarn dev

Then got:

$ gatsby develop
success open and validate gatsby-configs - 0.029s
success load plugins - 5.113s
success onPreInit - 0.031s
success initialize cache - 0.006s
success copy gatsby files - 0.427s
success onPreBootstrap - 0.040s
success createSchemaCustomization - 0.088s
success Checking for changed pages - 0.004s
success source and transform nodes - 0.356s
success building schema - 0.345s
info Total nodes: 126, SitePage nodes: 6 (use --verbose for breakdown)
success createPages - 0.033s
success Checking for changed pages - 0.001s
success createPagesStatefully - 0.143s
success update schema - 0.016s
success write out redirect data - 0.001s
success Build manifest and related icons - 0.090s
success onPostBootstrap - 0.100s
info bootstrap finished - 14.584s
success onPreExtractQueries - 0.003s
success extract queries from components - 3.728s
success write out requires - 0.064s
success run page queries - 0.812s - 20/20 24.63/s

 ERROR #98124  WEBPACK

Generating SSR bundle failed

Can't resolve 'react-dom' in 'C:\Users\alexa\ae2\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 - 12.912s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

So I did (I am on Windows):

del yarn.lock
rd /s node_modules

Which systematically errors because some process seems to block. So repeated after restarting the pc.

then:

yarn && yarn clean && yarn dev

But this still gives me:

ERROR #98124  WEBPACK

Generating SSR bundle failed

Can't resolve 'react-dom' in 'C:\Users\alexa\ae2\node_modules\gatsby-react-router-scroll'

So what could be wrong with gatsby-react-router-scroll?

[barbalex]

I now tried to also run yarn cache clean. But this project seems broken 😢

[barbalex]

As a last resort I updated all libs to the newest versions.

And uncommented the offending plugin options.

But yarn dev still fails.

[gillkyle]

Hey @barbalex, really sorry for the frustration! There's not much worse than not even being able to get a project running.

As a quick attempt to help you bypass the plugin validation, one option is a flag to just skip it, so I opened a PR to bypass the check with an environment variable set, (you can follow it here: https://github.com/gatsbyjs/gatsby/issues/27839) hopefully that would you get around this?

[barbalex]

@gillkyle yes, that would do. Thanks a lot!

[barbalex]

Only: I can't even get this project to run any more if I uncomment the offending options. So it will probably not help either

[barbalex]

What I need is a solution to this problem:

ERROR #98124  WEBPACK

Generating SSR bundle failed

Can't resolve 'react-dom' in 'C:\Users\alexa\ae2\node_modules\gatsby-react-router-scroll'

[LekoArts]

I've reset the React version to v16, reset the plugins to pre-validation versions and I also get that issue.

I see that you forked react-spinners-kit as it has faulty peerDeps. Have you tried removing that package or other packages and see if it's the culprit?

The dependencies/peerDeps of gatsby-react-router-scroll are set correctly. So I doubt that this issue is about any package from us but from other packages and incorrectly set peerDeps.

[mxstbr]

Related to your validation errors:

error Invalid plugin options for "gatsby-plugin-manifest":

• "scope" is not allowed

As far as I can tell, gatsby-plugin-manifest indeed does not have a scope option. It appears nowhere on Google search, nor is it mentioned anywhere in the code. 🤔 Where did you find it/what do you think it does?

error Invalid plugin options for "gatsby-remark-images":

• "wrapperStyle" must be one of [object]

This is an incorrect validation error, as the wrapperStyle option also supports strings! I've opened #27912 to fix this. Sorry for the troubles!

[barbalex]

@mxstbr

Thanks for caring!

Where did you find it/what do you think it does?

https://developer.mozilla.org/en-US/docs/Web/Manifest/scope
also: https://web.dev/add-manifest/#manifest-properties

I've opened #27912 to fix this

Thanks!

[barbalex]

@LekoArts

Have you tried removing that package or other packages and see if it's the culprit?

I've tried that package. But will try others too. Thanks for the pointer!

[barbalex]

I have tried a few dependencies now, so far with no success.

I _did_ see some warnings when installing and updating that seem a bit suspicious:

• warning gatsby > babel-plugin-add-module-exports > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
• warning gatsby > babel-plugin-add-module-exports > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.

Guess I will have to downgrade node to ensure there is no problem.

[barbalex]

O.k., I finally managed to solve this error:

ERROR #98124  WEBPACK

Generating SSR bundle failed

Can't resolve 'react-dom' in 'C:\Users\alexa\ae2\node_modules\gatsby-react-router-scroll'

I went through all my dependencies. There are many 🙄. And cleaned up. Then I stumbled over a dependency that needed some webpack rules to be altered. While looking at the gatsby-node.js file, I spotted another webpack config entry:

if (stage.startsWith('develop')) {
    actions.setWebpackConfig({
      resolve: {
        alias: {
          'react-dom': '@hot-loader/react-dom',
        },
      },
    })
  }

Luckily I had commented why it had been added: https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment-646966955.
So basically it was to patch hot reloading issues. But I forgot to install @hot-loader/react-dom.

After adding @hot-loader/react-dom to the dev dependencies, yarn dev worked again!

To be honest I have absolutely no idea why the missing of @hot-loader/react-dom had no influence for so long (but for hot reloading always seeming to not quite work as expected) and then suddenly - BAM. Maybe some of the other changes had some influence too.

Thanks @LekoArts for your great pointer!

[LekoArts]

Glad to hear that it's working again!

[barbalex]

Today I updated to:

{
  "gatsby-plugin-manifest": "2.6.1",
  "gatsby-remark-images": "3.5.1"
}

and scope as well as wrapperStyle are not causing the build to break any more.

Thanks to all involved!