Generating SSR bundle failed saying it's not possible to compile spread arguments in super() without compiling classes

[nikhilag]

Description

gatsby build is failing with the error:-

error Generating SSR bundle failed
/builds/anant-ag/kompanero/src/components/AddressFormModal.js: 
It's not possible to compile spread arguments in `super()` without compiling classes.

Here's the screenshot of the build logs:-

Steps to reproduce

Clone https://github.com/pieh/i29326 and use steps from README of that repo

Expected result

Build should be successful

Actual result

Build failed

Environment

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

System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Binaries:
Node: 14.15.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 2.7.15
Browsers:
Chrome: 88.0.4324.146
Edge: Spartan (44.18362.449.0)
npmPackages:
gatsby: 2.32.0 => 2.32.0
gatsby-image: 2.11.0 => 2.11.0
gatsby-link: 2.11.0 => 2.11.0
gatsby-plugin-canonical-urls: 2.10.0 => 2.10.0
gatsby-plugin-google-gtag: 2.8.0 => 2.8.0
gatsby-plugin-layout: 1.10.0 => 1.10.0
gatsby-plugin-lunr: 1.5.2 => 1.5.2
gatsby-plugin-manifest: 2.12.0 => 2.12.0
gatsby-plugin-no-sourcemaps: 2.9.0 => 2.9.0
gatsby-plugin-preconnect: ^1.1.54 => 1.1.54
gatsby-plugin-react-helmet: 3.10.0 => 3.10.0
gatsby-plugin-remove-serviceworker: 1.0.0 => 1.0.0
gatsby-plugin-robots-txt: 1.5.5 => 1.5.5
gatsby-plugin-sharp: 2.14.0 => 2.14.0
gatsby-plugin-sitemap: 2.12.0 => 2.12.0
gatsby-source-filesystem: 2.11.0 => 2.11.0
gatsby-source-shopify: 3.10.0 => 3.10.0
gatsby-transformer-sharp: 2.12.0 => 2.12.0
npmGlobalPackages:
gatsby-cli: 2.12.91

[Pessimistress]

I am seeing the same issue. The error is originated from this change in @babel/plugin-transform-spread: babel/babel#12722

Force resolving @babel/plugin-transform-spread to 7.12.1 fixes it.

[gportela85]

same here

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[ghost]

There's no reproduction needed, all our sites used to build but no longer do.

As @Pessimistress mentioned, @babel/plugin-transform-spread pushed a patch that broke many things, I think Gatsby just needs to lock the version.

The one-line fix is: npm i @babel/plugin-transform-spread@7.12.1

But Gatsby itself badly needs to lock the version otherwise you're going to get a whole lot of people opening issues.

[caymanowy]

We got the same error. This is blocking our production environment.

[visiky]

We got the same error. This is blocking our production environment.

Error: https://github.com/antvis/G2Plot/runs/1827390584?check_suite_focus=true

[Skurrr]

We got the same error. This is blocking our production environment.

Error: https://github.com/antvis/G2Plot/runs/1827390584?check_suite_focus=true

Are you using default constructor for yours react component? Overriding constructor should help:
constructor(props) { super(props); }

[visiky]

We got the same error. This is blocking our production environment.
Error: https://github.com/antvis/G2Plot/runs/1827390584?check_suite_focus=true

Are you using default constructor for yours react component? Overriding constructor should help:
constructor(props) { super(props); }

Just use react function component

[nikhilag]

Interestingly the bug got fixed for me when I moved state initialization to the constructor. For example:-

[nabendu82]

Interestingly the bug got fixed for me when I moved state initialization to the constructor. For example:-

Thanks this helped me to solve the issue in my production site

[ggbellotti]

I also have the same problem here. However, it is with the gatsby-plugin-transition-link plugin. When building the project, give this error:

I tried to add @babel/plugin-transform-classes as requested and also change @babel/plugin-transform-spread to version 7.12.1, but so far without success. 😔

I believe that in this case the plugin cannot move the super out of the constructor...

[Pessimistress]

@guilhermebellotti @babel/plugin-transform-spread is a dependency of babel-preset-gatsby. Just adding it to your own package.json does not mean that 7.12.1 is used. You can see this with npm list/yarn ls.

npm dedup may fix it, or if you are using yarn, add a resolutions field to package.json.

[8ctopotamus]

I was able to workaround this build issue on Netlify by installing the suggested version of @babel/plugin-transform-spread@7.12.1 and also added a custom babel config with babel-preset-gatsby.

1. npm i @babel/plugin-transform-spread@7.12.1

2. npm i babel-preset-gatsby

3. Add a .babelrc to the root of the project with the following json:

{  
  "presets": [ "babel-preset-gatsby" ]
}

[Pessimistress]

@LekoArts Here is the minimal repro that I can manage:

• Clone the hello-world starter
• Change the dependency in package.json to "gatsby": "^2.32.0"
• Install
• Replace the content in src/pages/index.js with

import React from "react"

export default class Home extends React.Component {
  state = {};

  render() {
    return <div>Hello world!</div>;
  }
}

• Run the build command, error:

Generating SSR bundle failed

/Users/missx/Source/bug-repro/src/pages/index.js: It's not possible to compile spread arguments in
`super()` without compiling classes.
Please add '@babel/plugin-transform-classes' to your Babel configuration. (This is an error on an internal
node. Probably an internal error.)

File: src/pages/index.js

The issue, as I understand it, is that @babel/plugin-transform-spread@7.12.13 no longer allows itself to be used without @babel/plugin-transform-classes. The following change to babel-preset-gatsby fixes the crash locally:

--- a/packages/babel-preset-gatsby/src/index.js
+++ b/packages/babel-preset-gatsby/src/index.js
@@ -64,8 +64,6 @@ export default function preset(_, options = {}) {
           exclude: [
             // Exclude transforms that make all code slower (https://github.com/facebook/create-react-app/pull/5278)
             `transform-typeof-symbol`,
-            // we already have transforms for these
-            `transform-spread`,
             `proposal-nullish-coalescing-operator`,
             `proposal-optional-chaining`,

@@ -114,12 +112,6 @@ export default function preset(_, options = {}) {
           // absoluteRuntime: absoluteRuntimePath,
         },
       ],
-      [
-        resolve(`@babel/plugin-transform-spread`),
-        {
-          loose: false, // Fixes #14848
-        },
-      ],
       IS_TEST && resolve(`babel-plugin-dynamic-import-node`),
       stage === `build-javascript` && [
         // Remove PropTypes from production build

[ggbellotti]

@guilhermebellotti @babel/plugin-transform-spread is a dependency of babel-preset-gatsby. Just adding it to your own package.json does not mean that 7.12.1 is used. You can see this with npm list/yarn ls.

npm dedup may fix it, or if you are using yarn, add a resolutions field to package.json.

Really! I didn't know this selection of yarn dependencies. Thanks for the help and clarification!

In the end, I solved it this way:

Run commands

1. gatsby clean
2. rm -rf yarn.lock
3. rm -rf node_modules/
4. yarn add @babel/plugin-transform-spread@7.12.1

Add resolutions in package.json file

  "resolutions": {
    "@babel/plugin-transform-spread": "7.12.1"
  },

Let's test!
yarn install
gatsby build

---

After correcting this 'bug', I will need to remove the resolutions and the dependency "@babel/plugin-transform-spread": "7.12.1", correct @Pessimistress?

[Pessimistress]

@guilhermebellotti You do not need to add the dependency as it's already required by babel-preset-gatsby. Removing the resolution may still cause problems later because if @babel/preset-env@7.12.13 is installed, it will ask for @babel/plugin-transform-spread@^7.12.13. The following steps work for my projects:

• rm yarn.lock
• Add the following to package.json:

"resolutions": {
  "@babel/preset-env": "7.12.11",
  "@babel/plugin-transform-spread": "7.12.1"
},

• yarn
• Remove the "resolutions" field from package.json

[barbalex]

@Pessimistress
Unfortunately I still get this error during the dev build:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

ESLint is not a constructor

I am not using classes in this project, only functional components. But probably dependencies do.

[barbalex]

I tried to roll back to previous version of all dependencies. But the issue remains:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

C:\Users\alexa\apf2\.cache\fast-refresh-overlay\index.js: It's not possible to compile spread arguments in `super()` without compiling classes.
Please add '@babel/plugin-transform-classes' to your Babel configuration. (This is an error on an internal node. Probably an internal error.)

File: .cache\fast-refresh-overlay\index.js


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

C:\Users\alexa\apf2\.cache\loading-indicator\index.js: It's not possible to compile spread arguments in `super()` without compiling classes.
Please add '@babel/plugin-transform-classes' to your Babel configuration. (This is an error on an internal node. Probably an internal error.)

File: .cache\loading-indicator\index.js


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

C:\Users\alexa\apf2\.cache\loading-indicator\portal.js: It's not possible to compile spread arguments in `super()` without compiling classes.
Please add '@babel/plugin-transform-classes' to your Babel configuration. (This is an error on an internal node. Probably an internal error.)

File: .cache\loading-indicator\portal.js

failed Building development bundle - 87.433s

[barbalex]

After rolling back all the gatsby updates and adding:

"resolutions": {
  "@babel/preset-env": "7.12.11",
  "@babel/plugin-transform-spread": "7.12.1"
},

yarn dev works again.

Thanks @Pessimistress

I am going to try not to touch any gatsby dependencies for the next weeks now.

[pieh]

Thanks to @Pessimistress for steps to reproduce - minimal reproduction available at https://github.com/pieh/i29326

[visiky]

@guilhermebellotti @babel/plugin-transform-spread is a dependency of babel-preset-gatsby. Just adding it to your own package.json does not mean that 7.12.1 is used. You can see this with npm list/yarn ls.
npm dedup may fix it, or if you are using yarn, add a resolutions field to package.json.

Really! I didn't know this selection of yarn dependencies. Thanks for the help and clarification!

In the end, I solved it this way:

Run commands

1. gatsby clean
2. rm -rf yarn.lock
3. rm -rf node_modules/
4. yarn add @babel/plugin-transform-spread@7.12.1

Add resolutions in package.json file

  "resolutions": {
    "@babel/plugin-transform-spread": "7.12.1"
  },

Let's test!
yarn install
gatsby build

After correcting this 'bug', I will need to remove the resolutions and the dependency "@babel/plugin-transform-spread": "7.12.1", correct @Pessimistress?

i have solved in my project:

npm uninstall @babel/plugin-transform-spread        
npm install @babel/plugin-transform-spread@7.12.1

[hasinduperera]

@guilhermebellotti @babel/plugin-transform-spread is a dependency of babel-preset-gatsby. Just adding it to your own package.json does not mean that 7.12.1 is used. You can see this with npm list/yarn ls.
npm dedup may fix it, or if you are using yarn, add a resolutions field to package.json.

Really! I didn't know this selection of yarn dependencies. Thanks for the help and clarification!
In the end, I solved it this way:
Run commands

1. gatsby clean
2. rm -rf yarn.lock
3. rm -rf node_modules/
4. yarn add @babel/plugin-transform-spread@7.12.1

Add resolutions in package.json file

  "resolutions": {
    "@babel/plugin-transform-spread": "7.12.1"
  },

Let's test!
yarn install
gatsby build
After correcting this 'bug', I will need to remove the resolutions and the dependency "@babel/plugin-transform-spread": "7.12.1", correct @Pessimistress?

i have solved in my project:

npm uninstall @babel/plugin-transform-spread        
npm install @babel/plugin-transform-spread@7.12.1

I've got the same issue and this solved it. Thanks @visiky

[bildungsroman]

Interestingly the bug got fixed for me when I moved state initialization to the constructor. For example:-

Thanks this helped me to solve the issue in my production site

This worked for me as well, and I was able to keep the latest version of @babel/plugin-transform-spread. Thanks!

[pieh]

We published gatsby@2.32.3 which should contain fix ( #29346 )

[barbalex]

I can confirm that it works in my case.

@pieh thanks so much and please have an enjoyable weekend