"Unexpected Token" error with mdx-deck v4 and code-surfer

[mhartington]

👋 Hey there!

I just threw together a sample project with mdx-deck@v4/gatsby and code-surfer@v3. When I attempted to run gatsby develop I got this error

> gatsby develop

success open and validate gatsby-configs - 0.076s
success load plugins - 0.366s
success onPreInit - 0.012s
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 - 0.045s
success copy gatsby files - 0.234s
success onPreBootstrap - 0.029s
success createSchemaCustomization - 0.004s
success source and transform nodes - 0.993s
success building schema - 0.344s
success createPages - 0.149s
success createPagesStatefully - 0.045s
success onPreExtractQueries - 0.002s
success update schema - 0.050s
success extract queries from components - 0.270s
success write out requires - 0.042s
success write out redirect data - 0.003s
success onPostBootstrap - 0.004s
⠀
info bootstrap finished - 5.281 s
⠀
success run queries - 0.051s - 3/3 59.38/s

 ERROR #98123  WEBPACK

Generating SSR bundle failed

Unexpected token (12:2)

File: node_modules/@mdx-deck/gatsby-plugin/src/index.js:12:2

It seems to be related to code-surfer, though the error being printed is pointing to mdx-deck, so I figured I'd open an issue here and on mdx-deck's repo.

Below is a sample project that should be able to recreate the error.

Sample Project: https://github.com/mhartington/mdx-deck-v4-issue

[rmarku]

Same problem here.

[pomber]

Hey, I haven't tested code surfer with mdx-deck v4 yet. I'll give it a try this week. In the meanwhile, you can always use npx init code-surfer-deck my-deck if you want a stable/tested configuration.

[pomber]

Same problem here.

@rmarku are you also using gatsby-theme-mdx-deck?

[rohit-gohri]

Same problem here.

@rmarku are you also using gatsby-theme-mdx-deck?

Same problem here. Using:

• gatsby-theme-mdx-deck 4.1.0
• mdx-deck: 4.1.1
• code-surfer: 3.1.0

[chug2k]

After some testing i'm pretty sure this is a problem with mdx-deck and webpack - I'm getting errors whenever I import anything on my .mdx files., not just CodeSurfer (although CodeSurfer is definitely the most important and awesome by far)

I'll try to debug over on the mdx-repo with you :)

[mister-what]

It is definitely with mdx-deck. The mdx-deck related packages are published without transpilation, as the authors of mdx-deck seem to assume, that Gatsby handles this (which is a bad and incompatible practice, in my opinion). Nevertheless, I was able to resolve the issue:

1. Install gatsby-plugin-compile-es6-packages as dev-dependency (npm i -D gatsby-plugin-compile-es6-packages)
2. Goto you local gatsby-config.js and add the plugin you installed in step 1:

 module.exports = {
   pathPrefix: "/",
   plugins: [
     {
       resolve: "gatsby-theme-mdx-deck",
-    }
+    },
+    {
+      resolve: "gatsby-plugin-compile-es6-packages",
+      options: {
+        modules: ["@mdx-deck/gatsby-plugin"]
+      }
     }
   ]
 };

I know this could only ever be a "temporary" solution and is just fighting symptoms instead of solving the root cause (little bit like taking pain-killers when wearing too small shoes). mdx-deck packages should ideally follow the convention of pushing a pre-built artifact to npm (instead of pushing bare sources and requiring the consumer to take care for their build).

Edit: Does not solve the issue entirely. I need to check again.

[chug2k]

@mister-what hmm. you're definitely on the right track. my silly fix on the other issue was to basically do the same thing, transpile gatsby-plugin-src, just in the webpack options.

it works with code-surfer 3, but not with 4. i'll try to keep investigating to see how to get the gatsby-theme and v4 to work well together.

[hfinkel]

To ask a likely-naive question, is this issue blocking updating the mdx-deck dependency to allow for version 4.1.1 generally?

I just added code-surfer to an existing mdx-deck presentation (using yarn add code-surfer with a resolutions section in the package.json set to 4.1.1) and things seem to work. The "build": "mdx-deck build deck.mdx" in my scripts section seems to function as well (although I don't understand how that differs from what gatsby develop does in this regard).

[hfinkel]

To ask a likely-naive question, is this issue blocking updating the mdx-deck dependency to allow for version 4.1.1 generally?

I just added code-surfer to an existing mdx-deck presentation (using yarn add code-surfer with a resolutions section in the package.json set to 4.1.1) and things seem to work. The "build": "mdx-deck build deck.mdx" in my scripts section seems to function as well (although I don't understand how that differs from what gatsby develop does in this regard).

Actually, code imports don't seem to work for me either. Using file=, that is. @pomber , what component is responsible for parsing the file=?

[donysukardi]

Can't seem to get mdx-deck v4.1.1 to work with code-surfer file import either

[jannikbuschke]

I spent some hours today to get some combination of dependencies working, so that I can use code-surfer and gatsby and use an pathPrefix to host my presentations on a subpath on some website. I needed to use some older versions, as this is totally fine for me I now am happy with my setup. If anyone is interested:

// package.json

  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@types/react": "^16.9.11",
    "@types/react-dom": "^16.9.4",
    "gatsby": "^2.13.24",
    "gatsby-source-filesystem": "^2.1.48",
    "gatsby-theme-mdx-deck": "^3.0.0",
    "gatsby-plugin-compile-es6-packages": "2.1.1",
    "mdx-deck": "^3.0.10",
    "typescript": "^3.7.2",
    "code-surfer": "3.1.1",
    "react-icons": "4.4.0",
    "prismjs": "1.28.0"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }

// gatsby.config.js

module.exports = {
  pathPrefix: '/decks',
  plugins: [
    {
      resolve: 'gatsby-theme-mdx-deck',
      options: {
        cli: true,
        contentPath: 'decks',
      },
    },
    {
      resolve: 'gatsby-plugin-compile-es6-packages',
      options: {
        modules: ['@mdx-deck/themes'],
      },
    },
  ],
};