Missing class properties transform #31853

ionTea · 2021-06-10T07:35:12Z

Description

The build command crashes after updating to v3.7:

yarn run v1.19.1
$ gatsby build --verbose
verbose set gatsby_log_level: "verbose"
verbose set gatsby_executing_command: "build"
verbose loading local command from: /tlp-website/node_modules/gatsby/dist/commands/build.js
verbose running command: build
success open and validate gatsby-configs - 2.571s
success load plugins - 5.280s
success onPreInit - 0.050s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 2.482s
success copy gatsby files - 0.121s
verbose Attaching functions to development server
success Compiling Gatsby Functions - 0.615s
success onPreBootstrap - 1.559s
success createSchemaCustomization - 0.180s
verbose Checking for deleted pages
verbose Deleted 0 pages
verbose Found 0 changed pages
success Checking for changed pages - 0.004s
success source and transform nodes - 0.710s
success building schema - 0.636s
success createPages - 23.034s
verbose    PageCreator: Creating 4 pages from {MarkdownRemark.frontmatter__slug}.tsx
success createPagesStatefully - 0.099s
info Total nodes: 8769, SitePage nodes: 8696 (use --verbose for breakdown)
verbose Number of node types: 9. Nodes per type: Directory: 3, File: 15, GraphQLSource: 1, ImageSharp: 3, MarkdownRemark: 4, Site: 1, SiteBuildMetadata: 1, SitePage: 8696,
SitePlugin: 45
verbose Checking for deleted pages
verbose Deleted 0 pages
verbose Found 8696 changed pages
success Checking for changed pages - 0.004s
success Cleaning up stale page-data - 0.271s
success update schema - 15.253s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.950s
success write out redirect data - 0.002s
success Build manifest and related icons - 0.075s
success onPostBootstrap - 0.079s
info bootstrap finished - 62.397s
success run static queries - 0.389s - 2/2 5.15/s
success run page queries - 5.268s - 8696/8696 1650.84/s
success write out requires - 0.033s
failed Building production JavaScript and CSS bundles - 84.844s

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

/tlp-website/.cache/loader.js: Missing class properties transform.
  101 |   }
  102 |
> 103 |   inFlightNetworkRequests = new Map()
      |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  104 |
  105 |   memoizedGet(url) {
  106 |     let inFlightPromise = this.inFlightNetworkRequests.get(url)

File: .cache/loader.js


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Steps to reproduce

I updated from "gatsby": "^3.6.2" => "gatsby": "^3.7.0" and ran into this issue. Not sure what is causing it yet.
I see that there's been some updates to configs in this release, and I do export a config:

// gatsby-node
exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        path: require.resolve("path-browserify"),
      },
      fallback: {
        fs: false,
      },
    },
  })
}

The crash does however persist if I remove this config.

Expected result

Gatsby should build without issues.

Actual result

The build crashes with what looks like a babel issue? Not 100% sure what's causing it yet.

Environment

  System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.10 - ~/tlp-website/node_modules/.bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Languages:
    Python: 3.7.1 - /Users/jonathan/anaconda3/bin/python
  Browsers:
    Safari: 14.1.1
  npmPackages:
    gatsby: ^3.7.0 => 3.7.0
    gatsby-image: ^3.7.0 => 3.7.0
    gatsby-plugin-advanced-sitemap: ^2.0.0 => 2.0.0
    gatsby-plugin-codegen: ^1.3.0-next => 1.3.0-next
    gatsby-plugin-google-tagmanager: ^3.7.0 => 3.7.0
    gatsby-plugin-manifest: ^3.7.0 => 3.7.0
    gatsby-plugin-material-ui: ^3.0.1 => 3.0.1
    gatsby-plugin-offline: ^4.7.0 => 4.7.0
    gatsby-plugin-react-helmet: ^4.7.0 => 4.7.0
    gatsby-plugin-sharp: ^3.7.0 => 3.7.0
    gatsby-plugin-webfonts: ^2.1.0 => 2.1.0
    gatsby-remark-autolink-headers: ^4.4.0 => 4.4.0
    gatsby-source-filesystem: ^3.7.0 => 3.7.0
    gatsby-source-graphql: ^3.7.0 => 3.7.0
    gatsby-transformer-remark: ^4.4.0 => 4.4.0
    gatsby-transformer-sharp: ^3.7.0 => 3.7.0

No flags in my gatsby-config

The text was updated successfully, but these errors were encountered:

LekoArts · 2021-06-10T10:19:04Z

Thanks for the issue! We're also seeing this on the default blog starter and are investigating it (cc @vladar). Our current theory is that a recent babel update broke things (upstream).

vladar · 2021-06-10T10:47:13Z

For now one workaround to try: remove yarn.lock (or package-lock.json) and re-install dependencies.

elrumordelaluz · 2021-06-10T10:57:54Z

Facing the same issue and can confirm that the workaround proposed by @vladar works perfect:

rm -rf yarn.lock node_modules && yarn

vladar · 2021-06-10T16:52:20Z

The fix is published in [email protected]

Emptymu · 2021-09-24T03:53:50Z

I'm having the same issue with gatsby 3.10.1 inside a pnpm monorepo. When I go into babel-preset-gatsby/index.js, I'm able to log out the returned babel config where plugin-proposal-class-properties was successfully resolved. Deleting the pnpm-lock.yaml and reinstall all dependencies didn't work for me 😢

> gatsby build

success open and validate gatsby-configs, load plugins - 2.103s
success onPreInit - 0.037s
success initialize cache - 0.052s
success copy gatsby files - 0.125s
success Compiling Gatsby Functions - 0.344s
success onPreBootstrap - 0.364s
success createSchemaCustomization - 0.152s
success Checking for changed pages - 0.002s
success source and transform nodes - 1.995s
success building schema - 0.932s
success createPages - 0.097s
success createPagesStatefully - 0.148s
info Total nodes: 109, SitePage nodes: 21 (use --verbose for
breakdown)
success Checking for changed pages - 0.001s
success Cleaning up stale page-data - 0.003s
success update schema - 0.088s
success onPreExtractQueries - 0.003s
success extract queries from components - 0.734s
success write out redirect data - 0.001s
success Build manifest and related icons - 0.059s
success onPostBootstrap - 0.064s
info bootstrap finished - 10.804s
success run static queries - 0.010s - 2/2 203.42/s
success run page queries - 1.369s - 21/21 15.34/s
success write out requires - 0.005s
failed Building production JavaScript and CSS bundles - 25.331s

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

/Users/admin/work/my_monorepo/packages/apps/tux_official_websi
te/.cache/loader.js: Missing class properties transform.
  101 |   }
  102 |
> 103 |   inFlightNetworkRequests = new Map()
      |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  104 |
  105 |   memoizedGet(url) {
  106 |     let inFlightPromise =
this.inFlightNetworkRequests.get(url)

File: .cache/loader.js

{
  presets: [
    [
      '/Users/admin/work/my_monorepo/node_modules/
.pnpm/@[email protected]_@[email protected]/node_mod
ules/@babel/preset-env/lib/index.js',
      [Object]
    ],
    [
      '/Users/admin/work/my_monorepo/node_modules/
.pnpm/@[email protected]_@[email protected]/node_m
odules/@babel/preset-react/lib/index.js',
      [Object]
    ]
  ],
  plugins: [
    [
      '/Users/admin/work/my_monorepo/node_modules/
.pnpm/[email protected]_06114fcf71614dcc795bb7869
8b12418/node_modules/babel-preset-gatsby/optimize-hook-des
tructuring.js',
      [Object]
    ],
    [
      '/Users/admin/work/my_monorepo/node_modules/
.pnpm/@[email protected]_@babe
[email protected]/node_modules/@babel/plugin-proposal-class-pr
operties/lib/index.js',
      [Object]
    ],
    [
      '/Users/admin/work/my_monorepo/node_modules/
.pnpm/@babel+plugin-proposal-nullish-coalescing-operator@7
.14.5_@[email protected]/node_modules/@babel/plugin-propos
al-nullish-coalescing-operator/lib/index.js'
    ],
    [
      '/Users/admin/work/my_monorepo/node_modules/
.pnpm/@[email protected]_@bab
[email protected]/node_modules/@babel/plugin-proposal-optiona
l-chaining/lib/index.js'
    ],
    '/Users/admin/work/my_monorepo/node_modules/.p
npm/[email protected]/node_modules/babel-plugin-ma
cros/dist/index.js',
    '/Users/admin/work/my_monorepo/node_modules/.p
npm/@[email protected]_@babel+core@
7.14.6/node_modules/@babel/plugin-syntax-dynamic-import/li
b/index.js',
    [
      '/Users/admin/work/my_monorepo/node_modules/
.pnpm/@[email protected]_@babel+core@7
.14.6/node_modules/@babel/plugin-transform-runtime/lib/ind
ex.js',
      [Object]
    ],
    [

'/Users/admin/work/my_monorepo/node_modules/.pnpm/
@[email protected]_@[email protected]/n
ode_modules/@babel/plugin-transform-spread/lib/index.js',
      [Object]
    ],
    [
      '/Users/admin/work/my_monorepo/node_modules/
.pnpm/@[email protected]_@babel+core@7
.14.6/node_modules/@babel/plugin-transform-classes/lib/ind
ex.js',
      [Object]
    ],
    [
      '/Users/admin/work/my_monorepo/node_modules/
.pnpm/[email protected]
4/node_modules/babel-plugin-transform-react-remove-prop-ty
pes/lib/index.js',
      [Object]
    ]
  ]
}

ax-vasquez · 2021-11-02T20:36:38Z

Just wanted to point out that it seems this issue wasn't entirely fixed in 3.7.1

I am currently using version 3.10.1 and just hit this same issue. However, the workaround did work for me. Simply reinstalling the packages worked 🤷

But yeah, looks like this issue may have come back up :/

mariusbutuc · 2021-11-03T20:58:54Z

The fix is published in [email protected]

@vladar running [email protected] (as part of the two-step migration process to [email protected]) and the issue/symptoms continue to be present.

failed Building production JavaScript and CSS bundles - 35.751s

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

[…]/.cache/loader.js: Missing class properties transform.
  101 |   }
  102 |
> 103 |   inFlightNetworkRequests = new Map()
      |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  104 |
  105 |   memoizedGet(url) {
  106 |     let inFlightPromise = this.inFlightNetworkRequests.get(url)

File: .cache/loader.js

# […]

Edit: The workaround #31853 (comment) does work though.

laradevitt · 2021-11-11T16:54:25Z

Reporting same as above when updating from 3.12.1 to 3.14.5. (Workaround resolves it.)

axe312ger · 2021-11-13T09:26:14Z

Got rid of the error via yarn-deduplicate && yarn :)

koraysels · 2021-11-26T13:32:30Z

I am still having this error.. even when upgrading to v4... nothing works, tried removeing node_modules and lock files aswel as reinstallign everything. (i do not use yarn)

koraysels · 2021-11-26T15:36:58Z

the solution was adding a .babelrc with

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ],
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ]
}

Executed `yarn-deduplicate && yarn` as it was suggested in gatsbyjs/gatsby#31853 (comment) to fix a gatsby/webpack error described in gatsbyjs/gatsby#31853

mrlubos · 2022-01-18T01:56:53Z

I've got no idea why removing the lock file works but hey, it really works!

MoatazAbdAlmageed · 2022-01-31T03:26:48Z

I got this

Generating JavaScript bundles failed at .cache/loader.js 

/usr/src/app/www/.cache/loader.js: Missing class properties transform.
107 |   }
  108 |
> 109 |   inFlightNetworkRequests = new Map()
      |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  110 |
  111 |   memoizedGet(url) {
  112 |     let inFlightPromise = this.inFlightNetworkRequests.get(url)

For more details see https://gatsby.dev/issue-how-to

mrlubos · 2022-01-31T03:28:18Z

I got this

Generating JavaScript bundles failed at .cache/loader.js 

/usr/src/app/www/.cache/loader.js: Missing class properties transform.
107 |   }
  108 |
> 109 |   inFlightNetworkRequests = new Map()
      |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  110 |
  111 |   memoizedGet(url) {
  112 |     let inFlightPromise = this.inFlightNetworkRequests.get(url)

For more details see https://gatsby.dev/issue-how-to

Did you try the workaround?

MoatazAbdAlmageed · 2022-01-31T04:06:12Z

I got this

Generating JavaScript bundles failed at .cache/loader.js 

/usr/src/app/www/.cache/loader.js: Missing class properties transform.
107 |   }
  108 |
> 109 |   inFlightNetworkRequests = new Map()
      |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  110 |
  111 |   memoizedGet(url) {
  112 |     let inFlightPromise = this.inFlightNetworkRequests.get(url)

For more details see https://gatsby.dev/issue-how-to

Did you try the workaround?

I will and let you know, Thanks.

MoatazAbdAlmageed · 2022-01-31T04:16:23Z

I did the workaround but I didn't found any canges in git ?!

MoatazAbdAlmageed · 2022-01-31T05:47:04Z

MoatazAbdAlmageed · 2022-01-31T11:46:44Z

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ],
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ]
}

thanks works for me

fzyzcjy · 2022-02-04T06:22:38Z

rm -rf yarn.lock node_modules && yarn

works for me, thanks!

altano · 2022-02-28T03:12:14Z

I had to remove node_modules in addition to the package-lock.json:

rm -rf node_modules && rm package-lock.json && npm i

Thanks!

ionTea added the type: bug An issue or pull request relating to a bug in Gatsby label Jun 10, 2021

gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Jun 10, 2021

LekoArts added status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer. and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Jun 10, 2021

vladar mentioned this issue Jun 10, 2021

chore(deps): bump babel minor #31857

Merged

gatsbybot closed this as completed in #31857 Jun 10, 2021

JackDevAU mentioned this issue Nov 15, 2021

📦 update npm packages SSWConsulting/SSW.Rules#740

Closed

tubone24 mentioned this issue Nov 20, 2021

Versionup gatsbyv4 tubone24/blog#689

Merged

Leksat added a commit to AmazeeLabs/silverback-mono that referenced this issue Dec 23, 2021

fix: yarn deduplicate

1590836

Executed `yarn-deduplicate && yarn` as it was suggested in gatsbyjs/gatsby#31853 (comment) to fix a gatsby/webpack error described in gatsbyjs/gatsby#31853

Leksat added a commit to AmazeeLabs/silverback-mono that referenced this issue Dec 23, 2021

fix: yarn deduplicate

9e1e291

Executed `yarn-deduplicate && yarn` as it was suggested in gatsbyjs/gatsby#31853 (comment) to fix a gatsby/webpack error described in gatsbyjs/gatsby#31853

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Missing class properties transform #31853

Missing class properties transform #31853

ionTea commented Jun 10, 2021 •

edited

Loading

LekoArts commented Jun 10, 2021

vladar commented Jun 10, 2021

elrumordelaluz commented Jun 10, 2021

vladar commented Jun 10, 2021

Emptymu commented Sep 24, 2021 •

edited

Loading

ax-vasquez commented Nov 2, 2021

mariusbutuc commented Nov 3, 2021 •

edited

Loading

laradevitt commented Nov 11, 2021

axe312ger commented Nov 13, 2021

koraysels commented Nov 26, 2021

koraysels commented Nov 26, 2021

mrlubos commented Jan 18, 2022

MoatazAbdAlmageed commented Jan 31, 2022

mrlubos commented Jan 31, 2022

MoatazAbdAlmageed commented Jan 31, 2022

MoatazAbdAlmageed commented Jan 31, 2022

MoatazAbdAlmageed commented Jan 31, 2022

MoatazAbdAlmageed commented Jan 31, 2022

fzyzcjy commented Feb 4, 2022

altano commented Feb 28, 2022

Missing class properties transform #31853

Missing class properties transform #31853

Comments

ionTea commented Jun 10, 2021 • edited Loading

Description

Steps to reproduce

Expected result

Actual result

Environment

LekoArts commented Jun 10, 2021

vladar commented Jun 10, 2021

elrumordelaluz commented Jun 10, 2021

vladar commented Jun 10, 2021

Emptymu commented Sep 24, 2021 • edited Loading

ax-vasquez commented Nov 2, 2021

mariusbutuc commented Nov 3, 2021 • edited Loading

laradevitt commented Nov 11, 2021

axe312ger commented Nov 13, 2021

koraysels commented Nov 26, 2021

koraysels commented Nov 26, 2021

mrlubos commented Jan 18, 2022

MoatazAbdAlmageed commented Jan 31, 2022

mrlubos commented Jan 31, 2022

MoatazAbdAlmageed commented Jan 31, 2022

MoatazAbdAlmageed commented Jan 31, 2022

MoatazAbdAlmageed commented Jan 31, 2022

MoatazAbdAlmageed commented Jan 31, 2022

fzyzcjy commented Feb 4, 2022

altano commented Feb 28, 2022

ionTea commented Jun 10, 2021 •

edited

Loading

Emptymu commented Sep 24, 2021 •

edited

Loading

mariusbutuc commented Nov 3, 2021 •

edited

Loading