Next-plugins: Babel throws at imports above the project folder

Created on 6 Jun 2019  Â·  6Comments  Â·  Source: vercel/next-plugins

I'm getting this error

Module not found: Can't resolve '@babel/runtime-corejs2/helpers/esm/extends' 
in '/Users/username/Projects/projectname/content-mdx'

at

import * as Test from "../../content-mdx/Test.mdx":

None of proposed (on the internet) workaround helps. I believe that's because to outdated @babel/runtime-corejs2 which NextJS pinned in its deps. Any ideas on how to resolve this?

All 6 comments

I'm very ignorant here and unlikely to be of help, but I have to wonder what's in Test.mdx, and whether the content matters. You might also want to share your next.config.js . I know, it's probably copy/pasted straight from github, but others can't assume that.

outdated @babel/runtime-corejs2 which NextJS pinned in its deps

I don't think this is the problem. When I look in mynode_modules for a next 8.1.0 project, I see the @babel/runtime-corejs2/helpers/esm/extends.js module (in the old, pinned 7.1.2 runtime-corejs2). Do you? If not, what else is missing?

In addition to your version skew hypothesis, consider a "not plugged in" hypothesis, where somehow you've somehow got a very screwed-up project, and this error is just the tip of the iceberg. For instance, if you remove the .mdx, does the rest build? Does deleting node_modules and reinstalling fix it?

I'm very ignorant here and unlikely to be of help, but I have to wonder what's in Test.mdx, and whether the content matters.

Thank you for the discussion Ed! The content is a sample:

# H1 test

## H2 test

P test

It doesn't matter. MDX fails on the import step, before parsing.

In addition to your version skew hypothesis, consider a "not plugged in" hypothesis, where somehow you've somehow got a very screwed-up project, and this error is just the tip of the iceberg. For instance, if you remove the .mdx, does the rest build? Does deleting node_modules and reinstalling fix it?

No, that's a production product with a good code quality and properly updated deps, folders, etc. I tried to remove node_modules a bunch of times – that was a popular workaround which helped some people (according to their comments). Yet no result for me.

You might also want to share your next.config.js . I know, it's probably copy/pasted straight from github, but others can't assume that.

That was actually a great idea to explore. Unfortunately, no luck here either. I basically nullified next.config.js to

let withMDX = require('@next/mdx')()

module.exports = withMDX()

And I still get the same error :(

In case noone answers me, I'll try to make a proof case repo tomorrow.

MDX fails on the import step, before parsing.

Is there a stack trace? You may know better, but I wouldn't assume that it's failing pre-parse - I've no idea.

A wild shot: move your .mdx to /pages.

Suggestion: see whether a known-good-at-one-time demo works, like https://codesandbox.io/s/23noo5r05r?from-embed

Thank you Ed! I started from the official example as you suggested. It worked.

Then, I added a few changes and I see the same problem. It definitely looks like an MDX, MDX-plugin or a Babel bug to me.

Proof-case: https://github.com/ivan-kleshnin/mdx-bug

It happens when you import .mdx from the folder above src or .next folder (not sure which) in the filesystem. That's not a common case and probably the reason why most people don't experience the problem.

$ clone https://github.com/ivan-kleshnin/mdx-bug 
$ ...
$ cd mdx-bug/client
$ yarn install
$ yarn dev

http://localhost:3000/mdx -- works
http://localhost:3000/mdx2 -- crashes the whole app unrecoverably

The difference between URLs is the following:

client/pages/mdx.js

import React from "react"
import * as Test from "../content-mdx/Test.mdx"

export default function() {
  return <div>MdxPage</div>
}

client/pages/mdx2.js

import React from "react"
import * as Test from "../../content2-mdx/Test2.mdx" // import from above the `client` folder
// something weird happens with Babel here

export default function() {
  return <div>MdxPage</div>
}

Great! You might want to rename the issue now.

I verified that a foo.js page-component module works correctly in the root directory, to verify that this is mdx-specific.

It's probably time for a project member to triage this.

Hey! We're deprecating this repository so this issue is being closed. If you're still experiencing it please create a detailed issue on https://github.com/vercel/next.js

Was this page helpful?
0 / 5 - 0 ratings