Remix + mdx-bundler, getting error ERROR: [plugin: @mdx-js/esbuild] TypeError: this.replace is not a function

Repo for repro

https://github.com/jacargentina/my-remix

npm install
remix dev
open http://localhost:3000
Write some text... clic Convert

Error

 ERROR: [plugin: @mdx-js/esbuild] TypeError: this.replace is not a function

Notes

Using react 18; plus remix.config.js with serverDependenciesToBundle setting When using react 17 it worked. Maybe related to react 18?

[ToniMaunde]

I have similar errors as @ToniMaunde.

All I want to do is to bundle some markdown inside loader function and then in the same file in client I want to use that markdown as component.

Got rid of the error by moving the function that was responsible for calling bundleMDX to a fileName.server.ts file. This is to prevent Remix from running backend code on the browser. Explanation here.

After that I got a new message

mdx-bundler warning: esbuild maybe unable to find its binary, if your build fails you'll need to set ESBUILD_BINARY_PATH.

and it contained a link to how I could fix it.

I have this code at the top of my fileName.server.ts and the errors are gone. 😌

function fixEsbuildBinaryError() {
  if (process.platform === 'win32') {
    process.env.ESBUILD_BINARY_PATH = path.join(
      process.cwd(),
      'node_modules',
      'esbuild',
      'esbuild.exe',
    )
  } else {
    process.env.ESBUILD_BINARY_PATH = path.join(
      process.cwd(),
      'node_modules',
      'esbuild',
      'bin',
      'esbuild',
    )
  }
}

fixEsbuildBinaryError();

[kwiat1990]

I have similar errors as @ToniMaunde.

All I want to do is to bundle some markdown inside loader function and then in the same file in client I want to use that markdown as component.