React app "Module parse failed: Identifier directly after number" #4
Description
Initial checklist
- I read the support docs
- I read the contributing guide
- I agree to follow the code of conduct
- I searched issues and couldn’t find anything (or linked relevant results below)
Affected packages and versions
rehype-highlight: 5.0.0, hast-util-to-text: 3.0.0
Link to runnable example
No response
Steps to reproduce
npx create-react-app test-app
copy "react-markdown": "^7.0.1" and "rehype-highlight": "^5.0.0" to package.json (from another project that used 'npm install')
npm install
edit App.js:
import logo from './logo.svg';
import './App.css';
import rehypeHighlight from 'rehype-highlight'
import ReactMarkdown from 'react-markdown'
const markdown = "```js\
import React from 'react'\
import ReactDOM from 'react-dom'\
import ReactMarkdown from 'react-markdown'\
import rehypeHighlight from 'rehype-highlight'\
\
ReactDOM.render(\
<ReactMarkdown rehypePlugins={[rehypeHighlight]}>{'# Your markdown here'}</ReactMarkdown>,\
document.querySelector('#content')\
)\
```";
// taken from https://remarkjs.github.io/react-markdown/
function App() {
return <ReactMarkdown rehypePlugins={[rehypeHighlight]}>{markdown}</ReactMarkdown>
}
export default App;npm start
Expected behavior
React launching and a page appearing with syntax highlighting.
Actual behavior
Crash.
I went through the node_modules folder to look at the source code of the module and tracked the issue to line 399, not the one specified in the image (difference probably due to removing comments when serving the app, I'm not really sure).
I found a react-markdown-loader that could possibly fix the "additional loader" problem but that package in itself brings more trouble so I'm excluding it from my project.
In addition, I found an SO thread talking about a different rehype module that uses hast-util-to-text experiencing the same error as I am.
Runtime
Node v16
Package manager
npm v7
OS
Linux
Build and bundle tools
Create React App