React-markdown: TypeError: parser is not a function

[pmartin-cogility]

This error occurs because micromark (https://github.com/micromark/micromark/releases) updated from 2.10.1 to 2.11.0.

This lib is found in this dependency chain: react-markdown > remark-parse > mdast-util-from-markdown > micormark.

I fixed this issue by adding to my package.json:

"resolutions": {
    "mdast-util-from-markdown": "0.8.3"
},

[ChristianMurphy]

@pmartin-cogility thanks for the report, could you please fill in the full issue template?
here is the template that you cleared out. for reference filling it in https://raw.githubusercontent.com/remarkjs/.github/main/.github/ISSUE_TEMPLATE/1-bug.md
It includes details which helps the team in assisting with issues, thanks!

[ChristianMurphy]

@pmartin-cogility trying this out with CRA in codesandbox, it appears to still work with the latest micromark (2.11.0).
https://codesandbox.io/s/react-markdown-debug-forked-gfxi0
Could you provide more context on your build environment? (again the issue template would help :slightly_smiling_face: )

[pmartin-cogility]

My app is a create-react-app ("react-scripts": "3.4.4") and TypeScript 4.1, so there's a good bit of code transpiling.

Sorry. Don't have the time right now to fill out the issue template. Just wanted to post something in case anybody else has the issue.

Also, I'm passing in a custom renderer to renderers.

[ChristianMurphy]

Here's the project working with CRA 3.4.4 and TypeScript 4.1.2
https://codesandbox.io/s/trusting-wind-dds46?file=/src/App.tsx
going to need a bit more info to offer a suggestion :slightly_smiling_face:

[dabit3]

I'm also running into the same issue.

I fixed it temporarily by downgrading to 4.3.1.

---

name: 🐛 Bug report
about: TypeError: parser is not a function

labels: 🔍 status/open, 🐛 type/bug

TypeError: parser is not a function error

Describe your issue here.

When running an app using the most up to date version of the library, the following error is thrown:

TypeError: parser is not a function

Your environment

• OS: MacOS 10.14.6
• Packages:

{
  "name": "nextamplify",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^0.2.31",
    "aws-amplify": "^3.3.11",
    "next": "10.0.3",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-markdown": "^5.0.3",
    "react-simplemde-editor": "^4.1.3",
    "uuid": "^8.3.1"
  }
}

• Env: Node v12.16.3, npm version 6.14.8

Steps to reproduce

1. Create a new next.js app
2. Install react markdown
3. Run with npm run dev

Here is an example with it not working:

https://github.com/dabit3/react-markdown-bug-report

Expected behavior

It should render the markdown

Actual behavior

The error is thrown.

[ChristianMurphy]

Thanks @dabit3, I'm able to reproduce that.
Cutting that back to the minimal amount needed to reproduce https://codesandbox.io/s/xenodochial-archimedes-zijhr

/cc @TrySound thoughts or insights?

[RubenMateus]

same. happening here

[ChristianMurphy]

This may be an upstream bug, it looks a lot like https://github.com/vercel/next.js/issues/17806

[dabit3]

@ChristianMurphy unsure if this helps, but the issue goes away when downgrading to version 4.3.1

[ChristianMurphy]

Both

micromark (https://github.com/micromark/micromark/releases) updated from 2.10.1 to 2.11.0.

and

the issue goes away when downgrading to [react-markdown] version 4.3.1

point to https://github.com/micromark/micromark/pull/36 as being related.
I tend to think it may be an upstream bug at next because:

1. the new version includes optional .mjs files https://unpkg.com/browse/[email protected]/
2. Next.js has known issues with .mjs (vercel/next.js#17806) even though webpack can support it (and CRA's configuration does support it, https://github.com/remarkjs/react-markdown/issues/518#issuecomment-741279839 and https://github.com/remarkjs/react-markdown/issues/518#issuecomment-741296821)

[saillinux]

I am also getting the issue and I am not using next.js but just using react(17.0.1) and react-hooks.

Downgrading from 5.0.2 to 4.3.1 also helped me as well.

[ChristianMurphy]

@saillinux please provide your build configuration or even better a codesandbox with an example.
https://raw.githubusercontent.com/remarkjs/.github/main/.github/ISSUE_TEMPLATE/1-bug.md provides a good template for the details that help to track down an issue.

[dabit3]

Just tried reproducing with a CodeSandbox but it worked there, but when I created a new app using CRA I got the same error.

Steps to reproduce with CRA:

1. Create new react app
2. Install react-markdown
3. Update App.js with this code:

import Markdown from 'react-markdown'

const markdown = `
# Hello World
`

export default function App() {
  return (
    <div>
      <Markdown children={markdown} />
    </div>
  );
}

1. Run the app

Here's my package.json:

{
  "name": "markdown-with-cra",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-markdown": "^5.0.3",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[TrySound]

Default exports strikes again (there should not be a problem with named exports).
I guess converting whole chain of packages to es modules would solve the problem.

[wooorm]

Good morning everyone! Unfortunate, a bug, let me see what I can find.

This seems to be webpack related. Rollup and Node itself work fine.

Using the repro from @dabit3, it seems webpack is using ESM where require is used.
Here is the code webpack is generating for mdast-util-from-markdown/index.js (which is CJS). It to me seems like a bug to me that webpack is picking up .mjs files in their “ __webpack_require__”?!

"use strict";
eval("\n\nmodule.exports = fromMarkdown\n\n// These three are compiled away in the `dist/`\n\nvar toString = __webpack_require__(/*! mdast-util-to-string */ \"./node_modules/mdast-util-to-string/index.js\")\nvar assign = __webpack_require__(/*! micromark/dist/constant/assign */ \"./node_modules/micromark/dist/constant/assign.mjs\")\nvar own = __webpack_require__(/*! micromark/dist/constant/has-own-property */ \"./node_modules/micromark/dist/constant/has-own-property.mjs\")\nvar normalizeIdentifier = __webpack_require__(/*! micromark/dist/util/normalize-identifier */ \"./node_modules/micromark/dist/util/normalize-identifier.mjs\")\nvar safeFromInt = __webpack_require__(/*! micromark/dist/util/safe-from-int */ \"./node_modules/micromark/dist/util/safe-from-int.mjs\")\nvar parser = __webpack_require__(/*! micromark/dist/parse */ \"./node_modules/micromark/dist/parse.mjs\")\nvar preprocessor = __webpack_require__(/*! micromark/dist/preprocess */ \"./node_modules/micromark/dist/preprocess.mjs\")\nvar postprocess = __webpack_require__(/*! micromark/dist/postprocess */ \"./node_modules/micromark/dist/postprocess.mjs\")\nvar decode = __webpack_require__(/*! parse-entities/decode-entity */ \"./node_modules/parse-entities/decode-entity.browser.js\")\nvar stringifyPosition = __webpack_require__(/*! unist-util-stringify-position */ \"./node_modules/unist-util-stringify-position/index.js\")\n\nfunction fromMarkdown(value, encoding, options) {\n  if (typeof encoding !== 
...

[wooorm]

Just webpack w/o cra or next is fine:

index.html:

<!doctypehtml>
<title>hi</title>
<body>
<script src="./index.min.js"></script>

index.js:

import fromMarkdown from 'mdast-util-from-markdown'

console.log('tree:', fromMarkdown('# hi2'));

package.json:

{
  "scripts": {
    "test": "webpack"
  },
  "devDependencies": {
    "mdast-util-from-markdown": "^0.8.4",
    "webpack": "^5.10.0",
    "webpack-cli": "^4.2.0"
  }
}

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {path: __dirname, filename: 'index.min.js'}
};

npm test and open index.html in browser works.

[wooorm]

This is solved in webpack to 5

[kvrvgixzis]

im not find solution

im using create-react-app with craco and i have error "parser is not a function"

[wooorm]

Solved. Remove your lockfiles and reinstalling things should fix it for y’all

[dabit3]

Thank you @wooorm !