TypeError: parser is not a function #518

pmartin-cogility · 2020-12-08T23:43:55Z

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"
},

The text was updated successfully, but these errors were encountered:

ChristianMurphy · 2020-12-08T23:46:42Z

@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 · 2020-12-09T00:06:10Z

@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 🙂 )

pmartin-cogility · 2020-12-09T00:12:33Z

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 · 2020-12-09T00:18:14Z

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 🙂

dabit3 · 2020-12-09T00:22:15Z

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

Create a new next.js app
Install react markdown
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 · 2020-12-09T00:40:31Z

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?

ChristianMurphy · 2020-12-09T01:50:19Z

This may be an upstream bug, it looks a lot like vercel/next.js#17806

dabit3 · 2020-12-09T01:52:25Z

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

ChristianMurphy · 2020-12-09T01:57:57Z

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 micromark/micromark#36 as being related.
I tend to think it may be an upstream bug at next because:

the new version includes optional .mjs files https://unpkg.com/browse/[email protected]/
Next.js has known issues with .mjs (ESM in .mjs files cause a dev mode runtime error vercel/next.js#17806) even though webpack can support it (and CRA's configuration does support it, TypeError: parser is not a function #518 (comment) and TypeError: parser is not a function #518 (comment))

ChristianMurphy · 2020-12-09T02:16:46Z

@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 · 2020-12-09T03:40:47Z

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:

Create new react app
Install react-markdown
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>
  );
}

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 · 2020-12-09T08:17:08Z

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 · 2020-12-09T08:34:04Z

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 · 2020-12-09T09:01:15Z

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 · 2020-12-09T09:51:39Z

This is solved in webpack to 5

webpack 4 is widely used (CRA, next) and does not like actual ESM + CJS projects if default exports are used. This removes ESM from `dist/` and tests on `lib/` (dev build) instead. Related to remarkjs/react-markdown#518. Related to syntax-tree/mdast-util-from-markdown#9.

wooorm · 2020-12-09T11:26:22Z

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

dabit3 · 2020-12-09T13:06:47Z

Thank you @wooorm !

pmartin-cogility added 🐛 type/bug This is a problem 🙉 open/needs-info This needs some more info labels Dec 8, 2020

ChristianMurphy added 🧘 status/waiting and removed 🐛 type/bug This is a problem 🙉 open/needs-info This needs some more info labels Dec 8, 2020

ChristianMurphy added 🐛 type/bug This is a problem 🙆 yes/confirmed This is confirmed and ready to be worked on 🏗 area/tools This affects tooling and removed 🧘 status/waiting labels Dec 9, 2020

This comment has been minimized.

Sign in to view

ChristianMurphy added the 🌊 blocked/upstream This cannot progress before something external happens first label Dec 9, 2020

jaywcjlove mentioned this issue Dec 9, 2020

Error when upgrading to version 2.0.0 uiwjs/react-markdown-preview#42

Closed

liaokaime mentioned this issue Dec 9, 2020

序号渲染不正常 HarryChen0506/react-markdown-editor-lite#170

Closed

This comment has been minimized.

Sign in to view

wooorm closed this as completed Dec 9, 2020

wooorm mentioned this issue Dec 9, 2020

Parser broken syntax-tree/mdast-util-from-markdown#9

Closed

This was referenced Dec 16, 2020

Cannot assign to read only property 'exports' of object '#<Object>' after upgrading to v5 #523

Closed

Build Modernization mdx-js/mdx#1271

Closed

wooorm mentioned this issue Feb 15, 2021

Next major for the ecosystem unifiedjs/unified#121

Closed

27 tasks

wooorm mentioned this issue Mar 27, 2021

Discuss: Should Highlight.js version 11 npm release be ESM only? highlightjs/highlight.js#2600

Closed

wooorm mentioned this issue May 10, 2021

Refactor using typescript, while supporting esm/cjs wooorm/markdown-table#24

Closed

ChristianMurphy mentioned this issue Jul 31, 2021

xdm webpack loader doesn’t work with webpack cli wooorm/xdm#11

Closed

ChristianMurphy mentioned this issue Sep 13, 2021

Publish separate package with rehype-minify-enumerated-attribute schema? rehypejs/rehype-minify#37

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: parser is not a function #518

TypeError: parser is not a function #518

pmartin-cogility commented Dec 8, 2020

ChristianMurphy commented Dec 8, 2020 •

edited

Loading

ChristianMurphy commented Dec 9, 2020

pmartin-cogility commented Dec 9, 2020 •

edited

Loading

ChristianMurphy commented Dec 9, 2020

dabit3 commented Dec 9, 2020

ChristianMurphy commented Dec 9, 2020

This comment has been minimized.

ChristianMurphy commented Dec 9, 2020

dabit3 commented Dec 9, 2020

ChristianMurphy commented Dec 9, 2020 •

edited

Loading

This comment has been minimized.

ChristianMurphy commented Dec 9, 2020 •

edited

Loading

dabit3 commented Dec 9, 2020

TrySound commented Dec 9, 2020

wooorm commented Dec 9, 2020

wooorm commented Dec 9, 2020

wooorm commented Dec 9, 2020

This comment has been minimized.

wooorm commented Dec 9, 2020

dabit3 commented Dec 9, 2020

TypeError: parser is not a function #518

TypeError: parser is not a function #518

Comments

pmartin-cogility commented Dec 8, 2020

ChristianMurphy commented Dec 8, 2020 • edited Loading

ChristianMurphy commented Dec 9, 2020

pmartin-cogility commented Dec 9, 2020 • edited Loading

ChristianMurphy commented Dec 9, 2020

dabit3 commented Dec 9, 2020

name: 🐛 Bug report about: TypeError: parser is not a function labels: 🔍 status/open, 🐛 type/bug

TypeError: parser is not a function error

Your environment

Steps to reproduce

Expected behavior

Actual behavior

ChristianMurphy commented Dec 9, 2020

This comment has been minimized.

ChristianMurphy commented Dec 9, 2020

dabit3 commented Dec 9, 2020

ChristianMurphy commented Dec 9, 2020 • edited Loading

This comment has been minimized.

ChristianMurphy commented Dec 9, 2020 • edited Loading

dabit3 commented Dec 9, 2020

TrySound commented Dec 9, 2020

wooorm commented Dec 9, 2020

wooorm commented Dec 9, 2020

wooorm commented Dec 9, 2020

This comment has been minimized.

wooorm commented Dec 9, 2020

dabit3 commented Dec 9, 2020

ChristianMurphy commented Dec 8, 2020 •

edited

Loading

pmartin-cogility commented Dec 9, 2020 •

edited

Loading

name: 🐛 Bug report
about: TypeError: parser is not a function
labels: 🔍 status/open, 🐛 type/bug

ChristianMurphy commented Dec 9, 2020 •

edited

Loading

ChristianMurphy commented Dec 9, 2020 •

edited

Loading