How to import an mdx file that's outside the project directory?

[alex996]

I have the following setup:

/markdown
  demo.mdx
/project
  /src
    App.tsx
    Comp.tsx
  package.json
  webpack.config.js

In React, I import MDX like this:

import Demo from '../../mardown/demo.mdx'

const App = () => <Demo />

export { App }

import {Comp} from '../project/src/Comp.tsx'

# Hello from markdown

<Comp />

Unfortunately, when I run webpack I get an error:

ERROR in ../mardown/demo.mdx 2:0-84
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/path/to/parent-dir/mardown'
resolve 'react/jsx-runtime' in '/path/to/parent-dir/mardown'
  Parsed request is a module
  using description file: /path/to/parent-dir/package.json (relative path: ./mardown)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /path/to/parent-dir/mardown/node_modules doesn't exist or is not a directory
      /path/to/parent-dir/node_modules doesn't exist or is not a directory
      /path/to/node_modules doesn't exist or is not a directory
      /path/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

It builds fine when demo.mdx is inside the project directory.

Is there a workaround to this? My project deps are:

"devDependencies": {
  "@mdx-js/loader": "^2.0.0",
  "webpack": "^5.69.1",
  "webpack-cli": "^4.9.2"
},
"dependencies": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2"
}

Thanks!

[wooorm]

You should copy files into your project.
This problem does not relate to MDX. It’s a question for webpack.

[ChristianMurphy]

@alex996 again, the weirdness with module resolution related to React/JSX appear to be coming from webpack itself.
This would be a good question to raise with the webpack community (https://github.com/webpack/webpack/discussions and https://stackoverflow.com/questions/tagged/webpack).

I looked at the documented options but couldn't find any

There are a number of options which allow tinkering with how JSX is resolved and handled, all of which are documented.

• https://mdxjs.com/packages/loader/#options
• https://mdxjs.com/packages/mdx/#optionsjsx
• https://mdxjs.com/packages/mdx/#optionsjsxruntime
• https://mdxjs.com/packages/mdx/#optionsjsximportsource
• https://mdxjs.com/packages/mdx/#optionspragma

[aakanshaverma11]

@alex996 were you able to resolve this ? I also want to import the mdx files from a remote location but don't know how this import will support a https url import Content from '!@mdx-js/loader!./../../markdown/markdown-features.mdx';

[alex996]

@aakanshaverma11 Nope, I ended up using a different markdown plugin 😞 As a workaround, I could only think of copying node_modules/react to the parent directory and .gitignore'ing it.

[aakanshaverma11]

@alex996 thanks for the quick reply. Is there any other markdown plugin available which supports mdx ? I don't think I can do that, as my package is using pipeline for build.

[alex996]

@aakanshaverma11 I'm not sure, but I'm not using MDX either. It's a dirty workaround, but you could do it between npm install and webpack. Something like "prebuild": "mkdir ../node_modules; cp -r node_modules/react ../node_modules" (if your build script is called "build": "webpack")

[xHomu]

There're some webpack directory issues you can fix with process.cwd(), but I'm not sure if that allows you to go up above the project's root directory.