Remix + mdx-bundler, getting error ERROR: [plugin: @mdx-js/esbuild] TypeError: this.replace is not a function
jacargentina opened this issue · 9 comments
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?
I'm using mdx-bundler with React 18 on Remix and not having any issues.
My serverDependenciesToBundle looks like this:
serverDependenciesToBundle: [
'remark-gfm',
/micromark-.*/,
/mdast-.*/,
'ccount',
/unist-.*/,
'decode-named-character-reference',
'character-entities',
'markdown-table'
]interestingly I didn't have to do anything with the mdx2 update.
@Arcath with your serverDependenciesToBundle it works!
Maybe the problem is adding too much packages as I have. My way was to add any suggestion by remix when starting the server.... how do you did it ?
@jacargentina I missed the suggestions so I was adding to that array as I hit errors, which was a lot to begin with, until it started working.
Glad you got it working :)
@Arcath my repo is updated with my real modifications now on utils.server.tsx and it is not working again
UPDATE What I 've found so far, is I can continue using ES modules without serverDependenciesToBundle using async js import()
It seems remix 1.3.5 or up, with serverDependenciesToBundle setting is the culprit of my problem. Leaving here for help to others.
Hi. I am having a similar issue with mdx-bundler.
This is my remix.config.js file
serverDependenciesToBundle: [
"mdx-bundler",
/@mdx-js\/*/,
"remark-frontmatter",
"@esbuild-plugins",
/mdast-.*/,
/micromark/,
/micromark-.*/,
/vfile*/,
/unist-.*/,
/estree-.*/,
/remark-.*/,
/comma-.*/,
"unified",
/hast-.*/,
/property-.*/,
/space-.*/,
"zwitch",
"fault",
"bail",
"trough",
"ccount",
/parse-.*/,
/stringify-.*/,
/decode-.*/,
/character-.*/,
/is-.*/
]and this is my console message
X [ERROR] Could not resolve "builtin-modules"
node_modules/@esbuild-plugins/node-resolve/esm/index.js:37:21:
37 │ import builtins from 'builtin-modules';
╵ ~~~~~~~~~~~~~~~~~
You can mark the path "builtin-modules" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:assert"
node_modules/@mdx-js/esbuild/lib/index.js:16:19:
16 │ import assert from 'node:assert'
╵ ~~~~~~~~~~~~~
You can mark the path "node:assert" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:fs"
node_modules/@mdx-js/esbuild/lib/index.js:17:29:
17 │ import {promises as fs} from 'node:fs'
╵ ~~~~~~~~~
You can mark the path "node:fs" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:path"
node_modules/@mdx-js/esbuild/lib/index.js:18:17:
18 │ import path from 'node:path'
╵ ~~~~~~~~~~~
You can mark the path "node:path" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:process"
node_modules/@mdx-js/esbuild/lib/index.js:19:20:
19 │ import process from 'node:process'
╵ ~~~~~~~~~~~~~~
You can mark the path "node:process" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:stream"
node_modules/@mdx-js/esbuild/node_modules/node-fetch/src/body.js:8:34:
8 │ import Stream, {PassThrough} from 'node:stream';
╵ ~~~~~~~~~~~~~
You can mark the path "node:stream" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:util"
node_modules/@mdx-js/esbuild/node_modules/node-fetch/src/body.js:9:42:
9 │ import {types, deprecate, promisify} from 'node:util';
╵ ~~~~~~~~~~~
You can mark the path "node:util" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:buffer"
node_modules/@mdx-js/esbuild/node_modules/node-fetch/src/body.js:10:21:
10 │ import {Buffer} from 'node:buffer';
╵ ~~~~~~~~~~~~~
You can mark the path "node:buffer" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:util"
node_modules/@mdx-js/esbuild/node_modules/node-fetch/src/headers.js:7:20:
7 │ import {types} from 'node:util';
╵ ~~~~~~~~~~~
You can mark the path "node:util" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:http"
node_modules/@mdx-js/esbuild/node_modules/node-fetch/src/headers.js:8:17:
8 │ import http from 'node:http';
╵ ~~~~~~~~~~~
You can mark the path "node:http" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:http"
node_modules/@mdx-js/esbuild/node_modules/node-fetch/src/index.js:9:17:
9 │ import http from 'node:http';
╵ ~~~~~~~~~~~
You can mark the path "node:http" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:https"
node_modules/@mdx-js/esbuild/node_modules/node-fetch/src/index.js:10:18:
10 │ import https from 'node:https';
╵ ~~~~~~~~~~~~
You can mark the path "node:https" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:zlib"
node_modules/@mdx-js/esbuild/node_modules/node-fetch/src/index.js:11:17:
11 │ import zlib from 'node:zlib';
╵ ~~~~~~~~~~~
You can mark the path "node:zlib" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:stream"
node_modules/@mdx-js/esbuild/node_modules/node-fetch/src/index.js:12:52:
12 │ import Stream, {PassThrough, pipeline as pump} from 'node:stream';
╵ ~~~~~~~~~~~~~
You can mark the path "node:stream" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:buffer"
node_modules/@mdx-js/esbuild/node_modules/node-fetch/src/index.js:13:21:
13 │ import {Buffer} from 'node:buffer';
╵ ~~~~~~~~~~~~~
You can mark the path "node:buffer" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:url"
node_modules/@mdx-js/esbuild/node_modules/node-fetch/src/request.js:9:34:
9 │ import {format as formatUrl} from 'node:url';
╵ ~~~~~~~~~~
You can mark the path "node:url" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:util"
node_modules/@mdx-js/esbuild/node_modules/node-fetch/src/request.js:10:24:
10 │ import {deprecate} from 'node:util';
╵ ~~~~~~~~~~~
You can mark the path "node:util" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:net"
node_modules/@mdx-js/esbuild/node_modules/node-fetch/src/utils/referrer.js:1:19:
1 │ import {isIP} from 'node:net';
╵ ~~~~~~~~~~
You can mark the path "node:net" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:fs"
node_modules/fetch-blob/from.js:1:59:
1 │ import { statSync, createReadStream, promises as fs } from 'node:fs'
╵ ~~~~~~~~~
You can mark the path "node:fs" as external to exclude it from the bundle, which will remove this error.
X [ERROR] Could not resolve "node:path"
node_modules/fetch-blob/from.js:2:25:
2 │ import { basename } from 'node:path'
╵ ~~~~~~~~~~~
You can mark the path "node:path" as external to exclude it from the bundle, which will remove this error.
Build failed with 20 errors:
node_modules/@esbuild-plugins/node-resolve/esm/index.js:37:21: ERROR: Could not resolve "builtin-modules"
node_modules/@mdx-js/esbuild/lib/index.js:16:19: ERROR: Could not resolve "node:assert"
node_modules/@mdx-js/esbuild/lib/index.js:17:29: ERROR: Could not resolve "node:fs"
node_modules/@mdx-js/esbuild/lib/index.js:18:17: ERROR: Could not resolve "node:path"
node_modules/@mdx-js/esbuild/lib/index.js:19:20: ERROR: Could not resolve "node:process"
...
💿 Built in 1.5sWhat can I do to solve this error?
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.
I have similar errors as @ToniMaunde.
All I want to do is to bundle some markdown inside
loaderfunction 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();@ToniMaunde, I have basically made the same adjustments and it work also for me. The ESM list looks a little bit bloated with all modules and submodules but it was necessary. I have skipped the other part with esbuild as in the link it about Nextjs snd the warning pops up occasionally.