Module "assert" has been externalized for browser compatibility and cannot be accessed in client code.

[Snnny]

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

7.0.0

Link to runnable example

No response

Steps to reproduce

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'
<ReactMarkdown children={'# hello'} remarkPlugins={[remarkGfm]}>

Expected behavior

show hello

Actual behavior

Uncaught Error: Module "assert" has been externalized for browser compatibility and cannot be accessed in client code.
at Object.get (browser-external:assert:3)
at go (create-tokenizer.js:213)
at main (create-tokenizer.js:198)
at Object.write (create-tokenizer.js:124)
at fromMarkdown (index.js:117)
at parser (index.js:15)
at Function.parse2 [as parse] (index.js:273)
at ReactMarkdown (react-markdown.js:102)
at renderWithHooks (react-dom.development.js:14985)
at mountIndeterminateComponent (react-dom.development.js:17811)

Runtime

Node v12

Package manager

yarn v1

OS

macOS

Build and bundle tools

Vite

[wooorm]

Vite seems to specify that, in development, development code is loaded: https://github.com/vitejs/vite/blob/ed16488591b7dfac7e54d96f67c6f3674368b0cc/packages/vite/src/node/plugins/resolve.ts#L654.
The development code for micromark includes assertions: https://github.com/micromark/micromark#size--debug.
As importing certain builtin node modules is quite common, e.g., code often depends on path or url, I’m assuming you can configure vite to include assert, too. Other bundlers allow this as well, so Vite should too.
These options might help: https://vitejs.dev/config/#dep-optimization-options

[Snnny]

but I never config ,here is my vite.config.ts:

export default () => {
  return {
    // css 预处理器
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
        },
      },
    },
    // 别名
    resolve: {
    },
    // 接口代理
    server: {
      proxy: {
      },
    },
    // 打包
    build: {
      rollupOptions: {
        cssCodeSplit: true,
      },
      outDir: currConf.outputPath,
      commonjsOptions: { transformMixedEsModules: true },
    },
    // 插件
    plugins: [
      reactRefresh(),
      checker({
        typescript: true,
        overlay: false,
        // enableBuild: false,
        eslint: { files: ['./src'], extensions: ['.ts', '.tsx'] },
      }),
    ],
  };
};

[ChristianMurphy]

vitejs/vite#4479 (comment) suggests using browserify polyfills.
Or as @wooorm suggests https://vitejs.dev/config/#dep-optimization-options may be able to be used to tell vite to include a dependency like assert anyway.

[or2008]

getting the same error with webpack 5, why is the issue closed?

[wooorm]

because it’s not an issue here, but with how your bundler is configured.

[mellson]

Hi @Snnny where you able to fix your issue? Because I'm running into the same issues in my dev environment and hasn't been able to figure out how to fix it 🤔

Update I got mine working by install this assert package as a dev dependency and adding a process.env to my vite config:

config = defineConfig({
    define: {
      "process.env": {},
    },

    plugins: [reactRefresh()],
  })

But interested to know if anyone has a smarter solution?

[or2008]

because it’s not an issue here, but with how your bundler is configured.

true, but I would expect a frontend library to avoid relying on node.js modules

Hi @Snnny where you able to fix your issue? Because I'm running into the same issues in my dev environment and hasn't been able to figure out how to fix it 🤔

Update I got mine working by install this assert package as a dev dependency and adding a process.env to my vite config:

config = defineConfig({
    define: {
      "process.env": {},
    },

    plugins: [reactRefresh()],
  })

But interested to know if anyone has a smarter solution?

this is how I solved it:

...
  resolve: {
            alias: {
                '@src': resolve(__dirname, '../../src'),
            },
            extensions: ['.json', '.ts', '.js'],
            fallback: {
                'buffer': require.resolve('buffer/'),
                'stream': require.resolve('stream-browserify/'),
                'assert': require.resolve('assert/') // don't forget  to install assert (npm i --save-dev assert)
            }
        },
...

  plugins: [
            new ProvidePlugin({
                process: 'process/browser',
                Buffer: ['buffer', 'Buffer']
            })
        ],

[wooorm]

Well, its a bit more complex because:
a) micromark is not a frontend library, it's agnostic
b) micromark uses a very new, node specific feature, to load extra debugging code if --conditions=development is passed as a flag to node. Now, Vite is also extremely new, and for some reason they also decided to pass that flag when not in production. I can somewhat understand that, but there is no precedent here.

[JounQin]

I'm using browserify assert polyfill on development, and @rollup/plugin-strip and alias: { assert: 'src/libs/none.ts' } on production. src/line/none.ts is an empty file. It runs very well now. But I'd prefer it can be 'fixed' in micromark.

[wooorm]

and alias: { assert: 'src/libs/none.ts' } on production

micromark does not include assert in production, so that should not be needed.

[JounQin]

micromark does not include assert in production, so that should not be needed.

Wow, that's great to hear.

[mellson]

@JounQin can you share your config file so I can see how you use the assert polyfill?

[JounQin]

@JounQin can you share your config file so I can see how you use the assert polyfill?

Just yarn add -D assert, and add 'process.env.NODE_DEBUG': undefined into define of vite.config.ts for node-util.

[wooorm]

PS: I didn't understand what you meant by the npm info micromark-factory-label version command? This just shows the latest version of the package, no?

Correct, it does. Which was higher than the one you had!

---

I’ll hide this subthread, for further readers: remove your locks and install again and you won’t hit this old issue!