Gatsby 4 Upgrade - SyntaxError: Invalid left-hand side in assignment

[anthonycolevinomofo]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

When upgrading to gatsby 4 and node 20 I'm getting an issue with building that's appeared after successfully building for a few weeks.

• I've thoroughly checked through my codebase and even went as far to run a codemod for react 17 and nothing has stood out.
• Nothing environmental that I'm aware of has changed.
• I've tried updating various packages to no avail - I'm aware that I'm using gatsby version 5 for some plugins but downgrading them has had no effect.
• I've tried every possible solution I can think of several times over and removed pages, every plugin I'm using, and went as far as trying to upgrade to gatsby 5 and still faced the same issue.

Invalid left-hand side in assignment

 Error: /Users/xxx/.cache/page-ssr/routes/render-page.js:13771

"true" = namespaces;
 ^^^^^^

Reproduction Link

https://github.com/gatsbyjs/gatsby/files/14647093/package.json

Steps to Reproduce

Try to run a build with this package.json

Expected Result

Build to succeed

Actual Result

Build failing

Environment

System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.11.0/bin/yarn
    npm: 10.4.0 - ~/.nvm/versions/node/v20.11.0/bin/npm
  Browsers:
    Chrome: 122.0.6261.129
    Safari: 17.2.1
  npmPackages:
    gatsby: ^4.25.8 => 4.25.8
    gatsby-background-image: ^1.6.0 => 1.6.0
    gatsby-plugin-advanced-sitemap: ^2.1.0 => 2.1.0
    gatsby-plugin-fresnel: ^1.0.1 => 1.1.0
    gatsby-plugin-hubspot: ^2.0.0 => 2.0.0
    gatsby-plugin-image: ^3.8.0 => 3.13.1
    gatsby-plugin-loadable-components-ssr: ^4.3.2 => 4.3.2
    gatsby-plugin-manifest: ^4.0.0 => 4.25.0
    gatsby-plugin-no-index: ^1.0.2 => 1.0.2
    gatsby-plugin-react-helmet: ^5.0.0 => 5.25.0
    gatsby-plugin-remove-console: ^0.0.2 => 0.0.2
    gatsby-plugin-robots-txt: ^1.8.0 => 1.8.0
    gatsby-plugin-segment-js: ^3.7.1 => 3.7.2
    gatsby-plugin-sharp: ^4.25.1 => 4.25.1
    gatsby-plugin-styled-components: ^5.25.0 => 5.25.0
    gatsby-plugin-typescript: ^4.0.0 => 4.25.0
    gatsby-source-filesystem: ^4.25.0 => 4.25.0
    gatsby-source-graphql: ^4.0.0 => 4.25.0
    gatsby-transformer-sharp: ^4.15.1 => 4.25.0

Config Flags

DEV_SSR: true

[Viktor19931]

did you try lower node version ?

[mustaquenadim]

did you try lower node version ?

I was using simple markdown (gatsby-transformer-remark) for writing content. But now I want to use advanced markdown (gatsby-plugin-mdx). So I decided to migrate my gatsby app from version 3 to version 5. I successfully migrated the gatsby app. But when trying to migrate remark to mdx, I'm facing critical issues like fileAbsolutePath word doesn't exist, not getting body content of the .md file with children props and not sure what to use for styling markdown content after removing dangerouslySetInnerHTML.

Also facing this issue

Invalid left-hand side in prefix operation. (1:2)

> 1 | ---
    |   ^
  2 | title: Understanding Inline, Inline-Block, and Block Elements in HTML
  3 | description: Unlock the secrets of inline, inline-block, and block elements in HTML
  4 | date: 2023-07-02

[shakilmith]

did you try lower node version ?

I was using simple markdown (gatsby-transformer-remark) for writing content. But now I want to use advanced markdown (gatsby-plugin-mdx). So I decided to migrate my gatsby app from version 3 to version 5. I successfully migrated the gatsby app. But when trying to migrate remark to mdx, I'm facing critical issues like fileAbsolutePath word doesn't exist, not getting body content of the .md file with children props and not sure what to use for styling markdown content after removing dangerouslySetInnerHTML.

Also facing this issue

Invalid left-hand side in prefix operation. (1:2)

> 1 | ---
    |   ^
  2 | title: Understanding Inline, Inline-Block, and Block Elements in HTML
  3 | description: Unlock the secrets of inline, inline-block, and block elements in HTML
  4 | date: 2023-07-02

Is the issue resolved? If not, it is because you have a tag that is not may be closed, like guess you have a img tag then it should be written like this: .

[mustaquenadim]

Thanks for the reply @shakilmith

But the same thing was working on 'Gatsby-transformer-remark' plugins. I've provided a screenshot below where you can understand the markdown file and error in the terminal.

Here is the repo https://github.com/mustaquenadim/mustaquenadim.github.io

The master branch is working successfully. I've migrated the gatsby version 3 to version 5 and migrating markdown to mdx in a local branch. TIA

[shakilmith]

Thanks for the reply @shakilmith

But the same thing was working on 'Gatsby-transformer-remark' plugins. I've provided a screenshot below where you can understand the markdown file and error in the terminal.

Here is the repo https://github.com/mustaquenadim/mustaquenadim.github.io

The master branch is working successfully. I've migrated the gatsby version 3 to version 5 and migrating markdown to mdx in a local branch. TIA

Comment should be written like this {/* */} in mdx file, it is not valid format <!--....-->. Hope you find this helpful, thanks.

[mustaquenadim]

Thanks for your contribution. My local server is running now. But some texts are broken. Because I removed dangerouslySetInnerHTML attribute according to the documentation.

Here I made a comparison table

Links are opened

Lists are now flat texts

I'm on the fix. Thaks again. 💗