ChristopherBiscardi/gatsby-mdx

Unexpected token with <Component {...props} /> in wrap-root-element.js

jonearley opened this issue · 6 comments

I'm really confused how to debug this. Any ideas are appreciated!

Describe the bug

gatsby develop

success open and validate gatsby-configs — 0.013 s
success load plugins — 0.612 s
success onPreInit — 0.005 s
success initialize cache — 0.007 s
success copy gatsby files — 0.115 s
success onPreBootstrap — 0.016 s
success source and transform nodes — 0.135 s
success building schema — 0.259 s
success createPages — 0.000 s
success createPagesStatefully — 0.072 s
success onPreExtractQueries — 0.004 s
success update schema — 0.022 s
success extract queries from components — 0.146 s
success run static queries — 0.021 s — 1/1 52.16 queries/second
success run page queries — 0.014 s — 4/4 293.26 queries/second
success write out page data — 0.011 s
success write out redirect data — 0.001 s
success Build manifest and related icons — 0.253 s
success onPostBootstrap — 0.255 s

info bootstrap finished - 7.353 s

error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html


  Error: /Users/earleyj/development/umich-lib-ui/node_modules/gatsby-mdx/wrap-root-element.js 37:11
  Module parse failed: Unexpected token (37:11)
  You may need an appropriate loader to handle this file type.
  |       ({ guard }) => (guard ? guard(props) : true)
  |     );
  >     return <Component {...props} />;
  |   };
  | 
   @ /Users/earleyj/development/umich-lib-ui/node_modules/gatsby-mdx/gatsby-ssr.js 1:0-39 2:31-35
   @ ./.cache/api-runner-ssr.js
   @ ./.cache/develop-static-entry.js

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @umich-lib/docs@1.0.0 develop: `gatsby develop`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @umich-lib/docs@1.0.0 develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/earleyj/.npm/_logs/2019-04-18T14_41_28_984Z-debug.log

To Reproduce
Repo: umich-lib-ui/next.

  1. clone next branch
  2. npm run bootstrap
  3. npm run build
  4. cd packages/docs
  5. npm run develop

Additional context
This is a mono-repo with Lerna for a design system and the Gatsby site is at packages/docs.

I dove into this on stream today.

Here's the PR that came of it: gatsbyjs/gatsby#13476

tldr; It's likely that one of the packages which you require in your gatsby-node.js file conflicts in name with the one of the set of packages you are symlinking around with lerna (or another error). In the case of mdx-js's docs, we had an example application called webpack and something in gatsby-node for gatsby-plugin-mdx was importing webpack.

To figure out what the error is, you can make the same change as the PR above in your node_modules/gatsby/dist/


also of note is that the error is caused by missing nodeAPIs. The APIs are missing because when any error is thrown during Gatsby's requiring of gatsby-node.js from plugins, it returns an empty array instead.

I appreciate it! I made the same change as gatsbyjs/gatsby#13476, but seeing the same error unfortunately.

I updated from Node v8 to v11 and the issue resolved.

I see a lot of warnings, but I don't see the error you've reported in this issue:

develop output
umich-lib-ui/packages/docs on  next [?] is 📦 v1.0.0 via ⬢ v10.6.0 at ☸️  mntnrs
➜ yarn develop
yarn run v1.13.0
warning ../../package.json: No license field
$ gatsby develop
success open and validate gatsby-configs — 0.008 s
success load plugins — 1.126 s
success onPreInit — 0.006 s
success initialize cache — 0.010 s
success copy gatsby files — 0.062 s
success onPreBootstrap — 0.014 s
⡀ source and transform nodes
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3


WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3


WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3


WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3


WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3


WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3


WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3


WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3


WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3


WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3


WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3


WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

success source and transform nodes — 1.768 s
success building schema — 0.320 s
success createPages — 0.000 s
success createPagesStatefully — 0.400 s
success onPreExtractQueries — 0.003 s
success update schema — 0.047 s
success extract queries from components — 0.097 s
success run static queries — 0.019 s — 1/1 54.29 queries/second
success run page queries — 0.028 s — 16/16 585.45 queries/second
success write out page data — 0.005 s
success write out redirect data — 0.001 s
success Build manifest and related icons — 0.143 s
success onPostBootstrap — 0.144 s

info bootstrap finished - 7.018 s

>  WARNING  Compiled with 22 warnings                                                                11:48:23 AM

Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/alert/lib/index.js
    1:1    warning  'use strict' is unnecessary inside of modules   strict
   20:100  warning  '_typeof' is a function                         no-func-assign
   20:165  warning  '_typeof' is a function                         no-func-assign
   22:23   warning  '_extends' is a function                        no-func-assign
   38:31   warning  '_getPrototypeOf' is a function                 no-func-assign
   42:34   warning  '_setPrototypeOf' is a function                 no-func-assign
   44:296  warning  Don't make functions within a loop              no-loop-func
   44:400  warning  Don't make functions within a loop              no-loop-func
  102:11   warning  'className' is assigned a value but never used  no-unused-vars

✖ 9 problems (0 errors, 9 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/button/lib/index.js
   1:1    warning  'use strict' is unnecessary inside of modules  strict
  18:23   warning  '_extends' is a function                       no-func-assign
  24:296  warning  Don't make functions within a loop             no-loop-func
  24:400  warning  Don't make functions within a loop             no-loop-func
  45:3    warning  Expected a default case                        default-case

✖ 5 problems (0 errors, 5 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/chat/lib/index.js
   1:1    warning  'use strict' is unnecessary inside of modules  strict
  24:100  warning  '_typeof' is a function                        no-func-assign
  24:165  warning  '_typeof' is a function                        no-func-assign
  36:31   warning  '_getPrototypeOf' is a function                no-func-assign
  40:34   warning  '_setPrototypeOf' is a function                no-func-assign

✖ 5 problems (0 errors, 5 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/core/lib/index.js
  1:1  warning  'use strict' is unnecessary inside of modules  strict

✖ 1 problem (0 errors, 1 warning)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/docs/src/components/mdx-components.js
  52:7  warning  'P' is assigned a value but never used  no-unused-vars

✖ 1 problem (0 errors, 1 warning)


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/expandable/lib/expandable-button.js
   1:1    warning  'use strict' is unnecessary inside of modules  strict
  18:100  warning  '_typeof' is a function                        no-func-assign
  18:165  warning  '_typeof' is a function                        no-func-assign
  20:23   warning  '_extends' is a function                       no-func-assign
  32:31   warning  '_getPrototypeOf' is a function                no-func-assign
  36:34   warning  '_setPrototypeOf' is a function                no-func-assign

✖ 6 problems (0 errors, 6 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/expandable/lib/expandable-children.js
   1:1    warning  'use strict' is unnecessary inside of modules  strict
  18:23   warning  '_extends' is a function                       no-func-assign
  20:100  warning  '_typeof' is a function                        no-func-assign
  20:165  warning  '_typeof' is a function                        no-func-assign
  32:31   warning  '_getPrototypeOf' is a function                no-func-assign
  36:34   warning  '_setPrototypeOf' is a function                no-func-assign

✖ 6 problems (0 errors, 6 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/expandable/lib/expandable-provider.js
  1:1  warning  'use strict' is unnecessary inside of modules  strict

✖ 1 problem (0 errors, 1 warning)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/expandable/lib/expandable.js
   1:1    warning  'use strict' is unnecessary inside of modules  strict
  16:100  warning  '_typeof' is a function                        no-func-assign
  16:165  warning  '_typeof' is a function                        no-func-assign
  28:31   warning  '_getPrototypeOf' is a function                no-func-assign
  32:34   warning  '_setPrototypeOf' is a function                no-func-assign

✖ 5 problems (0 errors, 5 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/expandable/lib/index.js
  1:1  warning  'use strict' is unnecessary inside of modules  strict

✖ 1 problem (0 errors, 1 warning)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/header/lib/index.js
  1:1  warning  'use strict' is unnecessary inside of modules  strict

✖ 1 problem (0 errors, 1 warning)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/heading/lib/index.js
   1:1   warning  'use strict' is unnecessary inside of modules  strict
  16:23  warning  '_extends' is a function                       no-func-assign

✖ 2 problems (0 errors, 2 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/icon/lib/icons.js
  1:1  warning  'use strict' is unnecessary inside of modules  strict

✖ 1 problem (0 errors, 1 warning)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/icon/lib/index.js
   1:1   warning  'use strict' is unnecessary inside of modules  strict
  24:23  warning  '_extends' is a function                       no-func-assign

✖ 2 problems (0 errors, 2 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/input/lib/index.js
   1:1   warning  'use strict' is unnecessary inside of modules  strict
  16:23  warning  '_extends' is a function                       no-func-assign

✖ 2 problems (0 errors, 2 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/list/lib/index.js
   1:1    warning  'use strict' is unnecessary inside of modules  strict
  16:23   warning  '_extends' is a function                       no-func-assign
  22:296  warning  Don't make functions within a loop             no-loop-func
  22:400  warning  Don't make functions within a loop             no-loop-func

✖ 4 problems (0 errors, 4 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/record-fields/lib/index.js
  1:1  warning  'use strict' is unnecessary inside of modules  strict

✖ 1 problem (0 errors, 1 warning)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/resource-access/lib/index.js
   1:1    warning  'use strict' is unnecessary inside of modules  strict
  24:100  warning  '_typeof' is a function                        no-func-assign
  24:165  warning  '_typeof' is a function                        no-func-assign
  36:31   warning  '_getPrototypeOf' is a function                no-func-assign
  40:34   warning  '_setPrototypeOf' is a function                no-func-assign

✖ 5 problems (0 errors, 5 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/styles/lib/index.js
   1:1  warning  'use strict' is unnecessary inside of modules  strict
  18:3  warning  '_templateObject' is a function                no-func-assign

✖ 2 problems (0 errors, 2 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/tabs/lib/index.js
   1:1  warning  'use strict' is unnecessary inside of modules  strict
  57:3  warning  Unreachable code                               no-unreachable

✖ 2 problems (0 errors, 2 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/text-input/lib/index.js
   1:1   warning  'use strict' is unnecessary inside of modules   strict
  24:23  warning  '_extends' is a function                        no-func-assign
  62:7   warning  'className' is assigned a value but never used  no-unused-vars

✖ 3 problems (0 errors, 3 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


Module Warning (from /Users/chris/tmp/umich-lib-ui/node_modules/eslint-loader/index.js):

/Users/chris/tmp/umich-lib-ui/packages/text/lib/index.js
   1:1   warning  'use strict' is unnecessary inside of modules  strict
  16:23  warning  '_extends' is a function                       no-func-assign

✖ 2 problems (0 errors, 2 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.


You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

You can now view @umich-lib/docs in the browser.

  http://localhost:8000/

View GraphiQL, an in-browser IDE, to explore your site's data and schema

  http://localhost:8000/___graphql

Note that the development build is not optimized.
To create a production build, use npm run build

⚠ 「wdm」:
ℹ 「wdm」: Compiled with warnings.

glad you figured it out :) I was just running the code locally

FFR, I was using node v10.6.0. Not sure what changes here between v8 and v10+ that would cause this issue