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

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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 6
Comments: 19 (6 by maintainers)

Commits related to this issue

Update CRA guide Create React App is the most looked at resource by users here on GitHub. But it’s suggesting an old, unmaintained, and buggy way to use MDX. This instead updates the guide to use ou... — committed to mdx-js/mdx by wooorm 4 years ago
Update CRA guide Create React App is the most looked at resource by users here on GitHub. But it’s suggesting an old, unmaintained, and buggy way to use MDX. This instead updates the guide to use ou... — committed to mdx-js/mdx by wooorm 4 years ago
Update CRA guide Create React App is the most looked at resource by users here on GitHub. But it’s suggesting an old, unmaintained, and buggy way to use MDX. This instead updates the guide to use... — committed to mdx-js/mdx by wooorm 4 years ago

Most upvoted comments

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.

nicobrinkkemper on Jun 14, 2020

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)”

thediveo on Dec 16, 2020