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

[github-actions]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

[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?