[react-markdown, remark-gfm] Webpack error using react-markdown and remark-gfm

[dctalbot]

Using webpack 5, react-markdown 7, remark-gfm 2, and typescript 4.3.5.

        UI         (err): ERROR in ../../node_modules/micromark/dev/lib/initialize/document.js 17:0-27
        UI         (err): Module not found: Error: Can't resolve 'assert' in '/Users/dctalbot/Developer/goalert/goalert/node_modules/micromark/dev/lib/initialize'
        UI         (err): 
        UI         (err): BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
        UI         (err): This is no longer the case. Verify if you need this module and configure a polyfill for it.
        UI         (err): 
        UI         (err): If you want to include a polyfill, you need to:
        UI         (err):       - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        UI         (err):       - install 'assert'
        UI         (err): If you don't want to include a polyfill, you can use an empty module like this:
        UI         (err):       resolve.fallback: { "assert": false }
        UI         (err):  @ ../../node_modules/micromark/dev/lib/parse.js 11:0-49 34:21-29
        UI         (err):  @ ../../node_modules/mdast-util-from-markdown/dev/lib/index.js 77:0-44 117:10-15
        UI         (err):  @ ../../node_modules/mdast-util-from-markdown/dev/index.js 12:0-43 12:0-43
        UI         (err):  @ ../../node_modules/remark-parse/lib/index.js 6:0-53 15:11-23
        UI         (err):  @ ../../node_modules/remark-parse/index.js 1:0-40 3:15-26
        UI         (err):  @ ../../node_modules/react-markdown/lib/react-markdown.js 30:0-38 85:9-20
        UI         (err):  @ ../../node_modules/react-markdown/index.js 6:0-53 10:15-28
        UI         (err):  @ ./app/util/Markdown.js 5:0-43 54:42-55
        UI         (err):  @ ./app/documentation/Documentation.tsx 8:0-40 35:40-48
        UI         (err):  @ ./app/main/routes.js 12:0-59 130:13-26
        UI         (err):  @ ./app/main/App.js 10:0-53 126:52-64 126:65-76
        UI         (err):  @ ./app/index.tsx 14:0-29 58:37-40

I can install assert from npm manually and resolve the error, but it seems like this should be a subdependency of react-markdown? If not, we should note this in the documentation/README

[wooorm]

There are two more alternatives listed in the message. Did you try those?
assert is a builtin in Node.
It’s only used in micromark when an explicit node-specific development condition is passed. Are you doing something with webpack that defines that condition?

[dctalbot]

Yeah, it must be this: https://github.com/target/goalert/blob/master/web/src/webpack.config.js#L90

I figured I would want to include the polyfill since I am just bumping some dependency versions and want to keep all changes minimal. I did not try the alternative empty module e.g. resolve.fallback: { "assert": false }

[dctalbot]

@wooorm Looked into this a bit more and found that setting the mode to development manifests this issue. I'd guess this is a very typical configuration. Do you have any suggestions besides removing the polyfill?

[ChristianMurphy]

Also see the related and ongoing discussion at micromark/micromark#87

[ChristianMurphy]

resolved in micromark/micromark@1b378e7