Error: Module "path" has been externalized for browser compatibility. Cannot access "path.dirname" in client code. #9200
Comments
|
Facing the same issue in sveltekit too, which uses vite. |
|
I'm facing the same issue using I removed the dependency for now. Great work with vite 3.0.2 by the way! Thanks in advance |
bluwy
added
bug
regression
|
This seems to be a bug where SSR is trying to load |
|
I'm also running into this with the --- /tmp/mime-types-working.js 2022-07-20 10:02:13.000000000 -0400
+++ /tmp/mime-types-broken.js 2022-07-20 10:03:00.000000000 -0400
@@ -1,9 +1,6 @@
import {
- __commonJS,
- __esm,
- __export,
- __toCommonJS
-} from "./chunk-JXMXRRTK.js";
+ __commonJS
+} from "./chunk-ASBRWZGP.js";
// node_modules/mime-db/db.json
var require_db = __commonJS({
@@ -8538,18 +8535,15 @@
});
// browser-external:path
-var path_exports = {};
-__export(path_exports, {
- default: () => path_default
-});
-var path_default;
-var init_path = __esm({
- "browser-external:path"() {
- path_default = new Proxy({}, {
- get() {
- throw new Error('Module "path" has been externalized for browser compatibility and cannot be accessed in client code.');
+var require_path = __commonJS({
+ "browser-external:path"(exports, module) {
+ module.exports = Object.create(new Proxy({}, {
+ get(_, key) {
+ if (key !== "__esModule" && key !== "__proto__" && key !== "constructor" && key !== "splice") {
+ throw new Error(`Module "path" has been externalized for browser compatibility. Cannot access "path.${key}" in client code.`);
+ }
}
- });
+ }));
}
});
@@ -8558,7 +8552,7 @@
"node_modules/mime-types/index.js"(exports) {
"use strict";
var db = require_mime_db();
- var extname = (init_path(), __toCommonJS(path_exports)).extname;
+ var extname = require_path().extname;
var EXTRACT_TYPE_REGEXP = /^\s*([^;\s]*)(?:;|\s|$)/;
var TEXT_TYPE_REGEXP = /^text\//i;
exports.charset = charset; |
The solution for the problem with `sanitize-html` was to use the `dompurify` library instead which works on both client and server side. Related issues: vitejs/vite#9200 apostrophecms/sanitize-html#560
|
In case anyone else stumbles upon this... Vscode had auto imported: import { stringify } from 'postcss';Removing this import resolved my issue. |
|
This is definitely a regression. There are some packages, like postcss, which have parts that work in the browser and parts that don't. postcss is already doing the right thing by checking if parts of the path module are defined (dirname, etc.), but as of Vite 3, Vite is throwing at runtime (at least in develop), instead of just allowing these to be undefined. Anyone using tools that use, or uses directly, postcss parts that work in the browser won't be able to upgrade to Vite 3 until this is fixed. There may be other packages that behave this way. |
|
got the same error with |
|
Same problem with |
|
Same here with |
|
It seems But I wonder if it is actually 'vite's fault here. In nodejs, require non-exist module do throw. So what vite did here actually aligns to the nodejs. But postCSS expect require non-exist module to just return |
|
Same error here with |
|
As a temporary workaround. I just alias url, path, fs to a empty file. And the |
|
@mmis1000 This worked for me |
|
Yeah starting to agree with others that the behavior in Vite 2 was probably a mistake / oversight. Such modules should probably be polyfilled |
|
I ran into this issue as well, does the Vite team take into account fixing it asap? |
|
If you want a Vite plugin that polyfills Node modules for the browser for both Rollup and ESBuild, I made this package. |
|
I made one, too 😂 https://github.com/sodatea/vite-plugin-node-stdlib-browser |
|
Yep, answers above are correct Check your imports. React probably added some new imports that mess things up Mine was that: |
Describe the bug
I am having this issue in my app since upgrading to Vite 3. I am still having the issue on v3.0.2. The issue only happens with
vite dev.I have a reproduction case here: https://stackblitz.com/edit/sveltejs-kit-template-default-azwtze?file=src%2Froutes%2Findex.svelte&terminal=dev
To see the error, run
npm run dev, and the index page crashes with this error:Interestingly, it works just fine in "prod" mode. If you run
npm run build && npm run preview, it does not crash.Something in the
dom-to-svgpackage seems to be causing this to show up.Reproduction
https://stackblitz.com/edit/sveltejs-kit-template-default-azwtze?file=src%2Froutes%2Findex.svelte&terminal=dev
System Info
My local dev machine:
And on Stackblitz:
Used Package Manager
npm
Logs
I'm getting an error that this field is too long (maximum is 65536 characters), so I'll have to truncate this part
Click to expand!
Validations
The text was updated successfully, but these errors were encountered: