"Unexpected Token" error with v4 and code-surfer

[mhartington]

👋 Hey there!

I just threw together a sample project with 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 code-surfer'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

[pomber]

It seems to be a problem when using gatsby-theme-mdx-deck and importing a component that imports something from mdx-deck.

For example, this deck fails:

import Component from "./component"

## Hi

When component.js imports something from mdx-deck:

// component.js
import React from "react";
import { useSteps } from "mdx-deck";

export default props => {
  const length = 4;
  const step = useSteps(length);

  return (
    <h2>
      The current step is {step}/{length}
    </h2>
  );
};

[chug2k]

So I sort of fixed it so far. I was getting an error about webpack, so I added a silly webpack rule (sorry I don't really know what I'm doing):

exports.onCreateWebpackConfig = ({ actions, loaders, getConfig }) => {
  const config = getConfig()
  config.module.rules = [
    ...config.module.rules,
    {
      ...loaders.js(),
      test: /\.js?$/,
      // Exclude all node_modules from transpilation, except for 'the gatsby-plugin/src'
      exclude: modulePath =>
        /node_modules/.test(modulePath) &&
        !/node_modules\/(@mdx-deck\/gatsby-plugin\/src)/.test(modulePath),
    },
  ]
  // This will completely replace the webpack config with the modified object.
  actions.replaceWebpackConfig(config)
}

CodeSurfer isn't working entirely right, but at least it's compiling.

[chug2k]

Okay, downgrading to v3 solved my CodeSurfer problems, at least.

I think it's something to do with the gatsby theme, because in a standalone, CodeSurfer and v4 work fine together.