Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

error "gatsby-plugin-mdx" threw an error while running the onCreateNode lifecycle: #25734

Closed
zhenwan opened this issue Jul 13, 2020 · 23 comments · Fixed by #26198 or #26202
Closed

error "gatsby-plugin-mdx" threw an error while running the onCreateNode lifecycle: #25734

zhenwan opened this issue Jul 13, 2020 · 23 comments · Fixed by #26198 or #26202
Assignees
Labels
status: awaiting author response Additional information has been requested from the author

Comments

@zhenwan
Copy link

zhenwan commented Jul 13, 2020

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

unknown: Unexpected token (5:49)

3 | import * as React from 'react'
4 |

5 | export default { HomepageTemplate, "./index.scss";, React }
| ^

image

@zhenwan zhenwan added the type: bug An issue or pull request relating to a bug in Gatsby label Jul 13, 2020
@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Jul 13, 2020
@blainekasten blainekasten added type: question or discussion Issue discussing or asking a question about Gatsby and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer type: bug An issue or pull request relating to a bug in Gatsby labels Jul 13, 2020
@blainekasten
Copy link
Contributor

This looks like invalid JavaScript. Is this from a file you wrote? If so you just need to fix your code

@zhenwan
Copy link
Author

zhenwan commented Jul 13, 2020

debugging..... close it for the time being,

@zhenwan zhenwan closed this as completed Jul 13, 2020
@Lukespacewalker
Copy link

Lukespacewalker commented Jul 15, 2020

@blainekasten I have exactly same problem after update gatsby-mdx-plugin from 1.2.22 which does not have this problem to 1.2.25.

The error from npm run build

"gatsby-plugin-mdx" threw an error while running the onCreateNode lifecycle:
unknown: Unexpected token, expected "," (4:23)
import * as React from 'react'
export default { Paper from "../../components/paper";, React }

The content of mdx file

import Paper from "../../components/paper";
export const frontmatter = {
        type: "information",
	tag: "history",
        title: "Institute history"
        }
..... Content of mdx files ....

When I revert gatsby-mdx-plugin back to 1.2.22, the compilation process is successful.

Other dependencies

"@mdx-js/mdx": "^1.6.6",
"@mdx-js/react": "^1.6.6",
"gatsby": "^2.24.2",
"gatsby-image": "^2.4.13",
"gatsby-plugin-canonical-urls": "^2.3.10",
"gatsby-plugin-manifest": "^2.4.18",
"gatsby-plugin-mdx": "1.2.22",
"gatsby-plugin-no-sourcemaps": "^2.2.0",
"gatsby-plugin-offline": "^3.2.17",
"gatsby-plugin-react-helmet": "^3.3.10",
"gatsby-plugin-sass": "^2.3.12",
"gatsby-plugin-sharp": "^2.6.19",
"gatsby-plugin-sitemap": "^2.4.11",
"gatsby-plugin-typescript": "^2.4.14",
"gatsby-source-filesystem": "^2.3.19",
"gatsby-transformer-json": "^2.4.11",
"gatsby-transformer-sharp": "^2.5.11",
"moment": "^2.27.0",
"node-sass": "^4.14.1",
"prism-react-renderer": "^1.1.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-helmet": "^6.1.0",
"react-intersection-observer": "^8.26.2",
"remark-slug": "^6.0.0"

@zhenwan zhenwan reopened this Jul 15, 2020
@blainekasten
Copy link
Contributor

@Lukespacewalker can you test the intermediate version numbers for me? It would help to nail down where this was introduced.

1.2.23, 1.2.24

@Lukespacewalker
Copy link

Lukespacewalker commented Jul 16, 2020

@blainekasten Version 1.2.23 1.2.24, and 1.2.26 also have same error.

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

unknown: Unexpected token, expected "," (4:21)

2 | import * as React from 'react'
3 |
4 | export default { Img from "gatsby-image";, React }

@maxval1
Copy link

maxval1 commented Jul 20, 2020

Same Error

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

unknown: Unexpected token (4:37)

  2 | import * as React from 'react'
  3 | 
> 4 | export default { '../less/index.less', React }
    |                                      ^

  31 |   const createAndProcessNode = path => {
  32 |     const fileNodePromise = createFileNode(path, createNodeId, pluginOptions).then(fileNode => {
> 33 |       createNode(fileNode);
     |       ^
  34 |       return null;
  35 |     });
  36 |     return fileNodePromise;

File: ../node_modules/gatsby-source-filesystem/gatsby-node.js:33:7

Version

"babel-preset-gatsby":{
  "version": "0.5.2",
},
"gatsby": {
  "version": "2.24.3"
},
"gatsby-cli": {
  "version": "2.12.61"
},
"gatsby-core-utils": {
  "version": "1.3.12",
},
"gatsby-graphiql-explorer": {
  "version": "0.4.11",
},
"gatsby-legacy-polyfills": {
  "version": "0.0.2",
},
"gatsby-link": {
  "version": "2.4.13",
},
"gatsby-page-utils": {
  "version": "0.2.17",
},
"gatsby-plugin-alias-imports": {
  "version": "1.0.5",
},
"gatsby-plugin-compile-es6-packages": {
  "version": "2.1.0",
},
"gatsby-plugin-emotion": {
  "version": "4.3.10",
},
"gatsby-plugin-less": {
  "version": "3.2.9",
},
"gatsby-plugin-mdx": {
  "version": "1.2.26",
},
"gatsby-plugin-page-creator": {
  "version": "2.3.17",
},
"gatsby-plugin-react-helmet-async": {
  "version": "1.0.16",
},
"gatsby-plugin-root-import": {
  "version": "2.0.5",
},
"gatsby-plugin-typescript": {
  "version": "2.4.15",
},
"gatsby-react-router-scroll": {
  "version": "3.0.12",
},
"gatsby-recipes": {
  "version": "0.1.52",
}

@blainekasten
Copy link
Contributor

Cool. So the bug was introduced in 1.2.23 that only had one commit. 760845a from pr #25437

Going to cc @pvdz since he authored that change.

@johno
Copy link
Contributor

johno commented Jul 20, 2020

Hmmm, any chance anyone can create a minimal reproduction repo for debugging? I tried to copy over the MDX content that @Lukespacewalker provided and it doesn't seem to be reproducible on the latest version of gatsby-plugin-mdx.

@johno johno added topic: MDX and removed type: question or discussion Issue discussing or asking a question about Gatsby labels Jul 20, 2020
@johno johno self-assigned this Jul 20, 2020
@johno johno added the status: awaiting author response Additional information has been requested from the author label Jul 20, 2020
@pvdz
Copy link
Contributor

pvdz commented Jul 31, 2020

I'm sorry, this report flew under my radar.

I believe the trailing semi-colon problem was fixed forward shortly after publishing this version (#25639). Can you confirm this is still a problem now? The fix may not have been complete, although I thought it was quite thorough.

@pvdz
Copy link
Contributor

pvdz commented Jul 31, 2020

Going to close it. If this bug was NOT fixed then please do re-open it. Thanks for reporting it!

@pvdz pvdz closed this as completed Jul 31, 2020
@Lukespacewalker
Copy link

@pvdz It's still not fixed. I test with gatsby-plugin-mdx 1.2.30 and it still throws the error

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

unknown: Unexpected token (4:33)

  2 | import * as React from 'react'
  3 |
> 4 | export default { "./special.scss", React }

revert back to 1.2.22 fixing the issue.

@Lukespacewalker
Copy link

@pvdz
Copy link
Contributor

pvdz commented Aug 3, 2020

Mmmmm okay. This is some non-standard syntax since JS (ES6+) does not allow you to export things this way.

I can probably work around it but need to know what the expected syntax is here. Is it "just" a string? And then what, how does that affect exported symbols and what not?

The thing that was changed here was how exported symbols are collected. Before they were extracted with a full but very expensive Babel step. After they are assumed to be valid JS (ES6+ exports have a very limited syntax). Does exporting this way also include exporting all its symbols or how does it affect that?

@pvdz
Copy link
Contributor

pvdz commented Aug 3, 2020

Nevermind. That syntax is generated becasue the new import scanner does not handle this case well:

import "./foo.css"

Fixing forward. Thank you for reporting. 💜

pvdz added a commit that referenced this issue Aug 3, 2020
The "shorthand" syntax is an import that only imports a path, without declaring any symbols:

```js
import "./foo.css"
```

This happened in the real world so we have to support it.

This fixes #25734
gatsbybot pushed a commit that referenced this issue Aug 3, 2020
The "shorthand" syntax is an import that only imports a path, without declaring any symbols:

```js
import "./foo.css"
```

This happened in the real world so we have to support it.

This fixes #25734
gatsbybot added a commit to gatsbyjs/gatsby-starter-blog-theme-core that referenced this issue Aug 3, 2020
The "shorthand" syntax is an import that only imports a path, without declaring any symbols:

```js
import "./foo.css"
```

This happened in the real world so we have to support it.

This fixes gatsbyjs/gatsby#25734
gatsbybot added a commit to gatsbyjs/gatsby-starter-theme that referenced this issue Aug 3, 2020
The "shorthand" syntax is an import that only imports a path, without declaring any symbols:

```js
import "./foo.css"
```

This happened in the real world so we have to support it.

This fixes gatsbyjs/gatsby#25734
gatsbybot added a commit to gatsbyjs/gatsby-starter-hello-world that referenced this issue Aug 3, 2020
The "shorthand" syntax is an import that only imports a path, without declaring any symbols:

```js
import "./foo.css"
```

This happened in the real world so we have to support it.

This fixes gatsbyjs/gatsby#25734
@pvdz
Copy link
Contributor

pvdz commented Aug 3, 2020

Please try [email protected] and let me know if that fixed it (or not)

@Lukespacewalker
Copy link

Lukespacewalker commented Aug 3, 2020

@pvdz I have updated the minimal reproduction repo to [email protected]. the import is working now

import "./foo.css"

but the export is stop working.

export const frontmatter = {
  title: "gatsby-plugin-mdx bug"
}

I have check GraphQL query of minimal reproduction repo

{
  "data": {
    "allMdx": {
      "edges": [
        {
          "node": {
            "frontmatter": {
              "title": "" <-- this should be "gatsby-plugin-mdx bug"
            }
          }
        }
      ]
    }
  },
  "extensions": {}
}

Reverting back to 1.2.22 fix the problem instantly. (I have run npm run clean to clean .cache and public folder before testing already)

@pvdz
Copy link
Contributor

pvdz commented Aug 3, 2020

@johno weren't exports supposed to be required to be on one line?

@pvdz
Copy link
Contributor

pvdz commented Aug 3, 2020

Confusing.

On 1.2.22 the mdxnode looks like this

node = {
  id: "759a9ad5-424e-5ca2-ad9d-e2487c49a993",
  children: [],
  parent: "84bbff75-233f-52fb-a52e-69bb490180d5",
  internal: {
    content:
      'import "./style.css"\nexport const frontmatter = {\n  title: "gatsby-plugin-mdx bug"\n}\n\n<div>There should be a H1 tag containing "gatsby-plugin-mdx bug"</div>\n\n<div  className="bg">\n  <div className="red">This text is red and the background is whitish red.</div>\n</div>\n\n',
    type: "Mdx",
  },
  frontmatter: { title: "gatsby-plugin-mdx bug" },
  excerpt: undefined,
  exports: {},
  rawBody:
    'import "./style.css"\nexport const frontmatter = {\n  title: "gatsby-plugin-mdx bug"\n}\n\n<div>There should be a H1 tag containing "gatsby-plugin-mdx bug"</div>\n\n<div  className="bg">\n  <div className="red">This text is red and the background is whitish red.</div>\n</div>\n\n',
  fileAbsolutePath:
    "~/gatsby/sites/mdx-importexport-25734/src/contents/bug.mdx",
}

This is 1.2.32:

node = {
  id: "759a9ad5-424e-5ca2-ad9d-e2487c49a993",
  children: [],
  parent: "84bbff75-233f-52fb-a52e-69bb490180d5",
  internal: {
    content:
      'import "./style.css"\nexport const frontmatter = {\n  title: "gatsby-plugin-mdx bug"\n}\n\n<div>There should be a H1 tag containing "gatsby-plugin-mdx bug"</div>\n\n<div  className="bg">\n  <div className="red">This text is red and the background is whitish red.</div>\n</div>\n\n',
    type: "Mdx",
    contentDigest: "f7e58b8743c8135e430270d754d52c60",
  },
  excerpt: undefined,
  exports: [
    'export const frontmatter = {\n  title: "gatsby-plugin-mdx bug"\n}',
  ],
  rawBody:
    'import "./style.css"\nexport const frontmatter = {\n  title: "gatsby-plugin-mdx bug"\n}\n\n<div>There should be a H1 tag containing "gatsby-plugin-mdx bug"</div>\n\n<div  className="bg">\n  <div className="red">This text is red and the background is whitish red.</div>\n</div>\n\n',
  frontmatter: { title: "" },
  fileAbsolutePath:
    "~/gatsby/sites/mdx-importexport-25734/src/contents/bug.mdx",
}

This is the diff: https://gist.github.com/pvdz/5ae1c7b0f4447251b642c4bfcfd65d57/revisions#diff-39859e34161f0cb6f5f50974282a2593

I guess the frontmatter export is explicitly extracted, transformed, handled ,etc? Need to dig further.

@pvdz
Copy link
Contributor

pvdz commented Aug 3, 2020

Ok, we're going to revert this change, again, and leave it as before, for now. See referenced PR for details.

@pvdz
Copy link
Contributor

pvdz commented Aug 3, 2020

This was reverted in [email protected] and I have no plans to attempt it again at this time. Very unfortunate as it saved minutes at bootstrap time with somewhat larger sites, but I now have other priorities. I'm pretty sure this can be done so if someone wants to pick this up lemme know and I can give some pointers.

@pvdz
Copy link
Contributor

pvdz commented Nov 11, 2020

FYI: the same improvement has been merged behind a lessBabel plugin option for mdx. This is currently available on master code (published soon). Could you give it a trial once you can and let me know if it works, and if not, what might have to change?

If your site depends on the Babel transform then there's nothing I can do here. But if the export parser is not catching a particular edge case then I'd be more than happy to fix forward to support it.

(@zhenwan @Lukespacewalker @maxval1, cc @johno)

@desktopofsamuel
Copy link
Contributor

desktopofsamuel commented Dec 11, 2020

[HELP NEEDED] Hi, I'm not sure if I was one of the edge cases, but I found this thread after encountering the same error after updating to the latest version of Gatsby and MDX Plugin. What I am trying to understand is, I didn't use Babel before in my project, and I assumed Gatsby has been taken care of it in the background. If the root cause is true as the error code suggests, Where should I place the options and presets? Currently, I placed it in package.json and it is not working.

Build Error

This is the error I have now in my repo. https://github.com/desktopofsamuel/wave

ERROR #11321  PLUGIN

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

Cannot find module '@babel/plugin-syntax-logical-assignment-operators' from 'C:\Base\Code\wave'

  Error: Cannot find module '@babel/plugin-syntax-logical-assignment-operators' from 'C:\Bas  e\Code\wave'

  - sync.js:90 Function.resolveSync [as sync]
    [wave]/[gatsby-plugin-mdx]/[resolve]/lib/sync.js:90:15

  - plugins.js:101 resolveStandardizedName
    [wave]/[gatsby-plugin-mdx]/[@babel]/core/lib/config/files/plugins.js:101:31

  - plugins.js:54 resolvePlugin
    [wave]/[gatsby-plugin-mdx]/[@babel]/core/lib/config/files/plugins.js:54:10

  - plugins.js:62 loadPlugin
    [wave]/[gatsby-plugin-mdx]/[@babel]/core/lib/config/files/plugins.js:62:20

  - config-descriptors.js:154 createDescriptor
    [wave]/[gatsby-plugin-mdx]/[@babel]/core/lib/config/config-descriptors.js:154:9

  - config-descriptors.js:109 
    [wave]/[gatsby-plugin-mdx]/[@babel]/core/lib/config/config-descriptors.js:109:50        

  - Array.map

  - config-descriptors.js:109 createDescriptors
    [wave]/[gatsby-plugin-mdx]/[@babel]/core/lib/config/config-descriptors.js:109:29        

  - config-descriptors.js:105 createPluginDescriptors
    [wave]/[gatsby-plugin-mdx]/[@babel]/core/lib/config/config-descriptors.js:105:10        

  - config-descriptors.js:40 plugins
    [wave]/[gatsby-plugin-mdx]/[@babel]/core/lib/config/config-descriptors.js:40:19

  - config-chain.js:415 mergeChainOpts
    [wave]/[gatsby-plugin-mdx]/[@babel]/core/lib/config/config-chain.js:415:26

  - config-chain.js:374 
    [wave]/[gatsby-plugin-mdx]/[@babel]/core/lib/config/config-chain.js:374:7

  - Generator.next

  - config-chain.js:228 loadFileChain
    [wave]/[gatsby-plugin-mdx]/[@babel]/core/lib/config/config-chain.js:228:24

  - loadFileChain.next

  - config-chain.js:135 buildRootChain
    [wave]/[gatsby-plugin-mdx]/[@babel]/core/lib/config/config-chain.js:135:29


not finished source and transform nodes - 1.771s

I have @babel/plugin-syntax-logical-assignment-operators installed as a part of @babel/preset-env but I'm not sure about the problem is about gatsby-plugin-mdx or babel.

Before that, I used to receive an error like:

Previous Errors

  Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
  If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
  SyntaxError: C:\Base\Code\wave\src\pages\features.mdx: Support for the experimental syntax 'jsx' isn't currently enabled (3:5):
    1 | function MDXContent({ components, ...props }) {
    2 |   return (
  > 3 |     <MDXLayout
      |     ^
    4 |       {...layoutProps}
    5 |       {...props}
    6 |       components={components}>
  Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
  If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

Things that I have attempted to find the cause

  1. Attempted to install the presets mentioned but it had lead to even more problems when develop / build.
  2. Remove all page content except one to isolate the problem
  3. Add lessBabel: true in gatsby-plugin-mdx as suggested in this thread after googling the same error message.

I have mixed and matched all 3 directions already trying each combination. The reason why it is in the master branch is it passed the build for Gatsby Cloud pull request merge but the build failed to deploy, and I'm stuck ever since, committing even more patch and attempted to rolling back the previous stable version with fail.

Feel free to replicate the repo and try. https://github.com/desktopofsamuel/wave
Any help or suggestion is appreciated!!

My package.json

"babel": {
    "presets": [
      "babel-preset-gatsby",
      "@babel/preset-react",
      "@babel/preset-env"
    ],
    "plugins": [
      "@babel/plugin-syntax-jsx",
      "@babel/plugin-syntax-logical-assignment-operators"
    ]
  }

My Repo Info

System:
    OS: Windows 10 10.0.19041
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
  Binaries:
    Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.8.5
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (87.0.664.57)
  npmPackages:
    gatsby: ^2.28.2 => 2.28.2
    gatsby-cli: ^2.15.1 => 2.15.1
    gatsby-image: ^2.4.5 => 2.7.0
    gatsby-plugin-catch-links: ^2.3.3 => 2.3.11
    gatsby-plugin-feed: ^2.5.3 => 2.5.11
    gatsby-plugin-feed-mdx: ^1.0.1 => 1.0.1
    gatsby-plugin-google-analytics: ^2.3.2 => 2.3.13
    gatsby-plugin-google-tagmanager: ^2.6.0 => 2.6.0
    gatsby-plugin-lodash: ^3.3.2 => 3.3.10
    gatsby-plugin-manifest: ^2.5.2 => 2.5.2
    gatsby-plugin-mdx: ^1.6.0 => 1.6.0
    gatsby-plugin-netlify-cms: ^4.3.3 => 4.3.11
    gatsby-plugin-nprogress: ^2.3.2 => 2.3.10
    gatsby-plugin-offline: ^3.2.7 => 3.6.0
    gatsby-plugin-react-helmet: ^3.3.2 => 3.3.10
    gatsby-plugin-sharp: ^2.6.9 => 2.10.1
    gatsby-plugin-sitemap: ^2.4.3 => 2.4.11
    gatsby-plugin-styled-components: ^3.6.0 => 3.6.0
    gatsby-plugin-twitter: ^2.3.2 => 2.3.10
    gatsby-plugin-use-dark-mode: ^1.1.2 => 1.1.2
    gatsby-remark-autolink-headers: ^2.3.3 => 2.3.11
    gatsby-remark-copy-linked-files: ^2.3.3 => 2.6.0
    gatsby-remark-images: ^3.3.8 => 3.7.1
    gatsby-remark-prismjs: ^3.5.2 => 3.5.10
    gatsby-remark-relative-images: ^2.0.2 => 2.0.2
    gatsby-remark-responsive-iframe: ^2.4.3 => 2.4.11
    gatsby-remark-unwrap-images: ^1.0.2 => 1.0.2
    gatsby-source-filesystem: ^2.3.8 => 2.3.23
    gatsby-source-prismic: ^3.2.1 => 3.2.1
    gatsby-transformer-sharp: ^2.5.3 => 2.8.0
  npmGlobalPackages:
    gatsby-cli: 2.12.109

@hafbau
Copy link

hafbau commented Dec 16, 2020

For future folks that got here still having this issue, hopefully an upgrade is feasible for you. In my case, I got here through docz library and upgrading the deps was not an option. A workaround that works for my situation is to change my import style to something like:

import * as style from './style.css';

fumierkm added a commit to fumierkm/gatsbyjs that referenced this issue Nov 27, 2021
The "shorthand" syntax is an import that only imports a path, without declaring any symbols:

```js
import "./foo.css"
```

This happened in the real world so we have to support it.

This fixes gatsbyjs/gatsby#25734
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: awaiting author response Additional information has been requested from the author
Projects
None yet
8 participants