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 (#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]

@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.