Mdx: Error when trying to run the create-react-app example

[tornordqvist]

Subject of the issue

I get an error when trying to run the create-react-app example.

Your environment

Windows 10
Node v10.14.0
NPM 6.4.1

Steps to reproduce

Easy. I do:
git clone
cd mdx/examples/create-react-app
npm i
npm start

Expected behaviour

The app should run without errors.

Actual behaviour

I get this error when running the app;

Failed to compile
./src/App.js
Module not found: You attempted to import C:\Repos\mdx\examples\create-react-app\node_modules\.cache\mdx.macro\Content.796904d8db.mdx.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

[tornordqvist]

The mdx.macro should read the Content file from /src but seems to look locally in the node_modules/.cache/mdx.macro folder.

[briedel1]

I am seeing the same behavior. Did you have any luck?

[briedel1]

I ejected and used the nom package @mdx-js/loader. The CRA docs should be updated to mention that they don't currently work with mdx.macro.

[KeziahMoselle]

I got this error, any fix planned without ejecting ?

[johno]

My guess is it's this line in mdx.macro that doesn't work with Windows environments.

[freaksauce]

I am experiencing the same issue on macOS 10.14.3 so it's not a Windows issue. I tried setting up a new CRA app using the latest mdx package with a simple import - issue raised for mdx.macro

[devuxer]

I'm getting this error on Windows with a pristine CRA --typescript project.

[aress31]

Getting this issue then on a newly created project following the doc - my env is Windows.

[nicobrinkkemper]

I don't understand why this issue is still open since Dec 22, 2018.

var _jsxFileName = "C:\\Users\\nico\\Documents\\Code\\fourymm\\src\\data\\Welcome.mdx";
import React from 'react';
import { MDXTag } from '@mdx-js/tag';
import 'C:\Users\nico\Documents\Code\fourymm\src\data\Welcome.mdx';

The top line is fine, the bottom line is just plain wrong? This should be a easy fix for a maintainer right? Meanwhile it's stopping everyone trying this out on Windows, following the documented advice to use mdx.macro for create-react-app projects. The above fixes seem either very radical (ejecting) and outdated (using .env file). I'm sorry for sounding harsh, maybe I'm missing something? Please help me understand

Edit: just to add to the pool of solution. Using WSL can solve this problem. It's a bit slower, and even more so if you keep the folder where it is, so I suggest moving the folder to the WSL home directory.

[wooorm]

mdx.macro is not maintained here. There is a stalled PR (https://github.com/mdx-js/mdx/pull/589) to change the suggestion in this example. As for “why is this still a problem”, well, the usual: oss, priorities, real life, etc etc etc.

If someone wants to work on a PR to change the docs, that would be greatly appreciated

[TheDiveO]

This PR example doesn't work for me when applied to my cra project:

Unexpected '!' in '!babel-loader!mdx-loader!./About.mdx'. Do not use import syntax to configure webpack loaders  import/no-webpack-loader-syntax

[ChristianMurphy]

@TheDiveO that is a lint warning, not a webpack error.
So it may be, and probably is, working?

[TheDiveO]

Using "// eslint-disable-next-line import/no-webpack-loader-syntax" immediately before the import now results in "Cannot find module '!babel-loader!mdx-loader!./About.mdx' or its corresponding type declarations.ts(2307)"

[ChristianMurphy]

@TheDiveO I can't speak the the specifics how you have your TSConfig setup, but it can work with webpack and typescript .
Here's an example, based on CRA, to start with https://codesandbox.io/s/busy-resonance-lpuvf

[TheDiveO]

my tsconfig.json is as follows:

{
  "compilerOptions": {
    "target": "es5",
    "downlevelIteration": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react",
    "noEmit": true,
    "baseUrl": "src",
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src"
  ]
}

The module resolution is already set to node.

[ChristianMurphy]

The module resolution is already set to node

okay, again, see https://github.com/mdx-js/mdx/issues/365#issuecomment-747084282 for a working example.
Specific suggestions on how to make it compatible with more configs are welcome

---

In terms of typings.

v1 of MDX doesn't natively provide typings, however v2 currently in beta does. https://github.com/mdx-js/mdx/issues/1041
here is the typing for the mdx extension, from the v2 @mdx-js/loader, it should also work with v1 if you want.
https://github.com/mdx-js/mdx/blob/3080444e2a40d79e3a3ac61ec1266154f95f77bf/packages/loader/types/index.d.ts#L5-L8

[TheDiveO]

where should I place this in my project tree?

[ChristianMurphy]

It can go in any of your any of the folders listed in include or typesRoots as defined by the tsconfig.

or you could try mdx 2 and follow the typescript guide for v2 https://github.com/mdx-js/mdx/blob/next/docs/advanced/typescript.mdx

[TheDiveO]

@ChristianMurphy thank you very much, will try mdx2 and as a fallback I can always rename the affected .tsx module to .jsx to work around the typescript error.