Can't resolve component error in CRA

[freaksauce]

I am having trouble getting MDX (0.2.8) to work with CRA (react-scripts 2.1.8) and React (16.8.6). I am using Node 10.1.0. (Just updated to 11.13.0, problem persists)

I keep getting the error:
Can't resolve './MyComponent' in '...node_modules/.cache/mdx.macro/MyComponent.84dc28b7ef.mdx.js'
despite it being in the same dir?

Not sure if it is related but I also get a loop of errors in iTerm immediately after it fails:
node[50284] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21) until it eventually errors too many times and halts the output to the terminal.

[freaksauce]

I just set up a new instance of CRA with App set up like this:

import React from 'react';
import { importMDX } from 'mdx.macro'
const Content = importMDX.sync('./test.mdx')
const App = () => {
  return (
    <div className="App">
      <Content />
    </div>
  );
}
export default App;

and my mdx file:

import Button from './Button'

# MDX File

<Button />

Button just returns a simple button.

Same error:

Failed to compile.

./node_modules/.cache/mdx.macro/test.a2d9224b3e.mdx.js
Module not found: Can't resolve './Button' in '/Users/XXX/DEV/PERSONAL/mdx-test/node_modules/.cache/mdx.macro'

[jamesknelson]

Hey, right now mdx.macro doesn't support import() statements, sorry. In fact, I wouldn't recommend using mdx.macro at all, as macros require that you reload the development server to pick up any changes.

If you want to use MDX with CRA, currently the best way is to use a loader string (e.g. !mdx-loader!), to eject and use mdx-loader by itself, or to use the react-scripts-mdx fork.

This may change with a future version of CRA, but unfortunately CRA@2 really just isn't made to work with MDX. :-(

[dreadwail]

This seems to be the recommended path for create-react-app now, for this issue:
https://frontarm.com/james-k-nelson/mdx-with-create-react-app/

I think this documentation is misleading:
https://mdxjs.com/getting-started/create-react-app

I think those docs should probably get updated to direct folks to the article above (or have that stuff brought in to the official docs) because the docs currently imply that the mdx.macro approach works but does not call out the import limitation.

Would you agree with that assessment @jamesknelson ?

[Canopix]

Thanks @dreadwail for your response! Today I was struggling with the same error! The docs of mdxjs.com are still showing the old path to usemdx.macro with CRA and MDX.

But I don't have confidence to replace react-scripts with react-scripts-mdx.
What happens with the updates on react-scripts that are not present in react-scripts-mdx?

[DaniGuardiola]

A better solution would be using react-app-rewired or craco. Let's see if I can get it up and running.