Open lostpebble opened 2 years ago
It seems it's related to @rollup/plugin-commonjs v22.
For a workaround, use Esbuild Deps Optimization at Build Time.
Set optimizeDeps.disabled = false
and build.commonjsOptions.include = []
.
Thanks @sapphi-red - those changes do fix the issue in the reproduction repo. I also did try putting @rollup/plugin-commonjs
v21 into the build.rollupOptions.plugins
config field- but it seemed to give the same issue.
If we can use the ESBuild optimizations during build and they seem to work really well- what is the point of using the Rollup commonjs plugin? Would this kind of configuration be future-proof for us?
I think you forgot to set build.commonjsOptions.include = []
which disables commonjs plugin v22 used inside Vite.
https://stackblitz.com/edit/github-g2azcc?file=package.json,vite.config.ts
what is the point of using the Rollup commonjs plugin?
There's some tree-shaking issues with it but we're going to make it default in future. See https://vitejs.dev/blog/announcing-vite3.html#esbuild-deps-optimization-at-build-time-experimental
Thanks for the workaround @sapphi-red ! 💓 Subscribing to the issue so we can stay on top of the final fix.
Hi @sapphi-red sorry might need a little bit of help. Since i set optimizeDeps.disabled
to false, it seems like my esbuildOptions.plugins: [NodeGlobalsPolyfillPlugin({ buffer: true })]
doesn't work anymore (ie. Buffer becomes undefined). Is there any workaround for this? Thanks in advance.
@val-samonte I have the same issue as you with Buffer becoming undefined. Any workaround?
Edit: I fixed the issue by setting
commonjsOptions: { transformMixedEsModules: true, }
Source: https://github.com/chnejohnson/vue-dapp/issues/20#issuecomment-973698464
Hi! I have a similar issue during test execution only. Any ideas how I could fix that? My vite.config.ts is looking like this currently:
import { defineConfig } from 'vite' export default defineConfig( { build: { commonjsOptions: { transformMixedEsModules: true, include : [] }, }, optimizeDeps: {disabled: false} })
@Vithanco I don't know if this helps but my vite.config.ts looks like this:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import inject from '@rollup/plugin-inject'
import path from 'path'
import { resolve } from 'path'
// import GlobalsPolyfills from '@esbuild-plugins/node-globals-polyfill'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue()
],
optimizeDeps: {
// disabled: false, // https://github.com/vitejs/vite/issues/9703
},
resolve: {
alias: {
// https://github.com/web3/web3.js/issues/4453#issuecomment-1054186564
https: 'agent-base',
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
build: {
rollupOptions: {
// https://gist.github.com/darkoatanasovski/ed7ea7f4d7d2f174d2ebbd3540879fec
plugins: [inject({ Buffer: ['Buffer', 'Buffer'], process: 'process' })],
input: {
main: resolve(__dirname, 'index.html'),
test: resolve(__dirname, 'test/index.html')
}
},
commonjsOptions: {
transformMixedEsModules: true, // https://github.com/chnejohnson/vue-dapp/issues/20
},
},
define: {
// global: {}, // https://stackoverflow.com/questions/72114775/vite-global-is-not-defined
// 'process.env': {}, // https://github.com/vitejs/vite/issues/1973
},
})
And I set window.global in my index.html:
<script>
// https://github.com/vitejs/vite/issues/2618
window.global = window;
</script>
I don't use optimizeDeps: {disabled: false}
I think you forgot to set
build.commonjsOptions.include = []
which disables commonjs plugin v22 used inside Vite. https://stackblitz.com/edit/github-g2azcc?file=package.json,vite.config.tswhat is the point of using the Rollup commonjs plugin?
There's some tree-shaking issues with it but we're going to make it default in future. See https://vitejs.dev/blog/announcing-vite3.html#esbuild-deps-optimization-at-build-time-experimental
This solution does not work if we're using react...What can be possible solution??
'jsx' is not exported by 'node_modules/react/jsx-runtime.js'
'jsxs' is not exported by 'node_modules/react/jsx-runtime.js'
'createContext' is not exported by 'node_modules/react/index.js'
'createContext' is not exported by 'node_modules/react/index.js'
'createContext' is not exported by 'node_modules/react/index.js'
'createContext' is not exported by 'node_modules/react/index.js'
'createContext' is not exported by 'node_modules/react/index.js'
'createContext' is not exported by 'node_modules/react/index.js'
'createContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useMemo' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useRef' is not exported by 'node_modules/react/index.js'
'useEffect' is not exported by 'node_modules/react/index.js'
'useCallback' is not exported by 'node_modules/react/index.js'
'createContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useMemo' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'Component' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useMemo' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useCallback' is not exported by 'node_modules/react/index.js'
'useEffect' is not exported by 'node_modules/react/index.js'
'useMemo' is not exported by 'node_modules/react/index.js'
'useRef' is not exported by 'node_modules/react/index.js'
'useState' is not exported by 'node_modules/react/index.js'
'useLayoutEffect' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useEffect' is not exported by 'node_modules/react/index.js'
'useMemo' is not exported by 'node_modules/react/index.js'
'useMemo' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'Component' is not exported by 'node_modules/react/index.js'
'Children' is not exported by 'node_modules/react/index.js'
'isValidElement' is not exported by 'node_modules/react/index.js'
'Fragment' is not exported by 'node_modules/react/index.js'
'useRef' is not exported by 'node_modules/react/index.js'
'useState' is not exported by 'node_modules/react/index.js'
'useLayoutEffect' is not exported by 'node_modules/react/index.js'
'useRef' is not exported by 'node_modules/react/index.js'
'useState' is not exported by 'node_modules/react/index.js'
'useLayoutEffect' is not exported by 'node_modules/react/index.js'
'useState' is not exported by 'node_modules/react/index.js'
'useLayoutEffect' is not exported by 'node_modules/react/index.js'
'forwardRef' is not exported by 'node_modules/react/index.js'
'forwardRef' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'forwardRef' is not exported by 'node_modules/react/index.js'
'forwardRef' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useCallback' is not exported by 'node_modules/react/index.js'
'useRef' is not exported by 'node_modules/react/index.js'
'useRef' is not exported by 'node_modules/react/index.js'
'useMemo' is not exported by 'node_modules/react/index.js'
'useCallback' is not exported by 'node_modules/react/index.js'
'useCallback' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'forwardRef' is not exported by 'node_modules/react/index.js'
'useContext' is not exported by 'node_modules/react/index.js'
'useState' is not exported by 'node_modules/react/index.js'
'useState' is not exported by 'node_modules/react/index.js'
'useState' is not exported by 'node_modules/react/index.js'
'useMemo' is not exported by 'node_modules/react/index.js'
'useEffect' is not exported by 'node_modules/react/index.js'
'useEffect' is not exported by 'node_modules/react/index.js'
'useCallback' is not exported by 'node_modules/react/index.js'
'useLayoutEffect' is not exported by 'node_modules/react/index.js'
'useLayoutEffect' is not exported by 'node_modules/react/index.js'
'useLayoutEffect' is not exported by 'node_modules/react/index.js'
'useEffect' is not exported by 'node_modules/react/index.js'
'useEffect' is not exported by 'node_modules/react/index.js'
'useEffect' is not exported by 'node_modules/react/index.js'
'useEffect' is not exported by 'node_modules/react/index.js'
✓ 441 modules transformed.
'default' is not exported by node_modules/form-data/lib/browser.js, imported by node_modules/axios/lib/env/classes/FormData.js
file: D:/Github devsalman247/Metadots/Speak'r/speakr/client/node_modules/axios/lib/env/classes/FormData.js:1:7
1: import FormData from 'form-data';
^
2: export default FormData;
error during build:
Error: 'default' is not exported by node_modules/form-data/lib/browser.js, imported by node_modules/axios/lib/env/classes/FormData.js
at error (file:///D:/Github%20devsalman247/Metadots/Speak'r/speakr/client/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
at Module.error (file:///D:/Github%20devsalman247/Metadots/Speak'r/speakr/client/node_modules/rollup/dist/es/shared/rollup.js:12429:16)
I think you forgot to set
build.commonjsOptions.include = []
which disables commonjs plugin v22 used inside Vite. https://stackblitz.com/edit/github-g2azcc?file=package.json,vite.config.ts
Thanks so much @sapphi-red ! The vite.config.ts
at that stackblitz link is the one thing that got it working perfectly for me. Now I can import cjs stuff and stuff with global
and it's working no problem, using Vite v4. Now I can finally migrate to vite
from create-react-app
. It would be nice if there was some kind of default that could handle this. That's a pretty complex config file and hard to come by.
@sapphi-red, is there a simpler/better way to do this in Vite v4?
Here's the magic vite.config.ts
for anyone with this problem:
import { defineConfig } from 'vite';
import { resolve } from 'path';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
import nodePolyfills from 'rollup-plugin-polyfill-node';
import cjs from '@rollup/plugin-commonjs';
// https://vitejs.dev/config/
export default defineConfig(async ({ mode }) => {
return {
server: {
https: false,
port: 3000,
fs: {
allow: ['../'],
},
},
// envDir: "./env_web",
plugins: [],
build: {
// minify: false,
// target: "es2015",
outDir: 'dist_web',
sourcemap: true,
commonjsOptions: { include: [] },
rollupOptions: {
plugins: [
// Enable rollup polyfills plugin
// used during production bundling
nodePolyfills({
include: ['node_modules/**/*.js', '../../node_modules/**/*.js'],
}),
cjs(),
],
},
},
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
process: 'rollup-plugin-node-polyfills/polyfills/process-es6',
buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6',
events: 'rollup-plugin-node-polyfills/polyfills/events',
util: 'rollup-plugin-node-polyfills/polyfills/util',
sys: 'util',
stream: 'rollup-plugin-node-polyfills/polyfills/stream',
_stream_duplex:
'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
_stream_passthrough:
'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
_stream_readable:
'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
_stream_writable:
'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
_stream_transform:
'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
},
},
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: 'globalThis',
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
}),
NodeModulesPolyfillPlugin(),
],
},
},
};
});
@adueck Solution worked for me.
Checkout this full vite config incase you have any other issues that might be related https://gist.github.com/FbN/0e651105937c8000f10fefdf9ec9af3d
I had to add more config from the link.
@myckhel Thanks your vite config worked for me as well and it looks simpler and more thorough.
I had an absolute field day with the garbage that this error is, I'll spare you with the details and tell you how to solve it.
resolve: {
alias: {
// Whatever you already had here +
'near-api-js': 'near-api-js/dist/near-api-js.js',
},
},
Massive props to the Metaplex team for not adding it in the Vite starter example, but hiding it behind a commit that was done in November to the file itself, not the example. I'll probably make a PR for them, considering they haven't done anything about it since November, until then enjoy.
Also, for the Buffer problem here's my complete config. But you most likely only need the inject
part in rollupOptions
, the buffer
module installed.
import { defineConfig } from 'vite'
import nodePolyfills from "rollup-plugin-node-polyfills";
import inject from '@rollup/plugin-inject'
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
stream: "rollup-plugin-node-polyfills/polyfills/stream",
events: "rollup-plugin-node-polyfills/polyfills/events",
assert: "assert",
crypto: "crypto-browserify",
util: "util",
http: "stream-http",
https: "https-browserify",
url: "url",
'near-api-js': 'near-api-js/dist/near-api-js.js',
},
},
define: {
"process.env": process.env ?? {},
},
build: {
target: "es2020",
rollupOptions: {
plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
},
},
optimizeDeps: {
esbuildOptions: {
target: "es2020"
}
}
})
And inside the index.html
before your main bundle.
<script>
// Global node polyfill.
window.global = window;
</script>
Please check the import and export in the file. 1.check on which file it throwing error 2.console the import and check whether it is undefined or not if not then go ahead 3.remove { } from import statement.
Hi ! i tried the optimizeDeps
to use a old lib writes in JS. It works for this lib. But since I enabled optmizeDeps
, the libs like react-table
not works. I have a weird error Uncaught TypeError: $.current is null
? it seems linked to useRef
hook
What could be the problem ?
Thanks a lot
Just wanted to volunteer another fix I found... In my case, I was importing stuff at the top level that I also used for in-source testing (if (import.meta.vitest) { ... }
).
Dynamically re-importing those values inside the import.meta.vitest
check did the trick for me.
TLDR;
import { doSomething } from 'my-module';
export default () => doSomething();
if (import.meta.vitest) {
const { describe, it } = await import('vitest');
const { doSomething } = await import('my-module'); //<-- Reimport `doSomething` dynamically
describe("DO IT", () => {
it("should do something", () => {
expect(doSomething()).toBe('something')
});
});
}
got en error "Uncaught TypeError: EventEmitter is not a constructor" using vite.
anyway, fixed by run npm install events
. hope it will help someone.
see https://github.com/mapbox/mapbox-gl-geocoder/issues/441#issuecomment-1021774132
Debugged this today but without a solution, but leaving some notes here. The issue is because of an import loop on startup, where it's trying to init requireAccount
(which provides the account_1.Account
class to extend from). However, before requireAccount
can init the Account
class, it invokes other modules that also need to access to the account_1.Account
class. And it explodes.
Presumably it worked in dev because esbuild is able to hoist the class, but I'm guessing this isn't working with nodejs in general. The library would rely on bundlers to hoist and resolve the import loop, which isn't necessarily correct.
I presume encountering the same issue, but with a different message:
TypeError: class heritage lc is not an object or null
If built with --debug
option, I have the following:
TypeError: class heritage Duplex$4 is not an object or null
I'm using quasar
, and this error is related to the N3
library, but a further bundled library (readable-stream
), with:
class Duplexify extends Duplex {
Tried the suggestions above, but none worked. In particular, using @adueck's snippet (adapted for quasar.config.js), building errors with the following message:
Unexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:
(commonjs) load "\u0000../stream?commonjs-proxy"
(commonjs) load "\u0000../stream/promises?commonjs-proxy"
(commonjs) load "\u0000../ours/primordials?commonjs-proxy"
(commonjs) load "\u0000../internal/streams/utils?commonjs-proxy"
(commonjs) load "\u0000../internal/streams/pipeline?commonjs-proxy"
(commonjs) load "\u0000../internal/streams/end-of-stream?commonjs-proxy"
(commonjs) load "\u0000../../lib/stream.js?commonjs-proxy"
(commonjs) load "\u0000buffer?commonjs-proxy"
(commonjs) load "\u0000./ours/primordials?commonjs-proxy"
(commonjs) load "\u0000./ours/util?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/operators?commonjs-proxy"
(commonjs) load "\u0000./ours/errors?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/compose?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/pipeline?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/destroy?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/end-of-stream?commonjs-proxy"
(commonjs) load "\u0000./stream/promises?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/utils?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/legacy?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/readable?commonjs-proxy"
/home/ryey/coding/solid-fixer/node_modules/rollup/dist/shared/rollup.js:23157
reject(new Error(`Unexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:\n` +
^
Error: Unexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:
(commonjs) load "\u0000../stream?commonjs-proxy"
(commonjs) load "\u0000../stream/promises?commonjs-proxy"
(commonjs) load "\u0000../ours/primordials?commonjs-proxy"
(commonjs) load "\u0000../internal/streams/utils?commonjs-proxy"
(commonjs) load "\u0000../internal/streams/pipeline?commonjs-proxy"
(commonjs) load "\u0000../internal/streams/end-of-stream?commonjs-proxy"
(commonjs) load "\u0000../../lib/stream.js?commonjs-proxy"
(commonjs) load "\u0000buffer?commonjs-proxy"
(commonjs) load "\u0000./ours/primordials?commonjs-proxy"
(commonjs) load "\u0000./ours/util?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/operators?commonjs-proxy"
(commonjs) load "\u0000./ours/errors?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/compose?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/pipeline?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/destroy?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/end-of-stream?commonjs-proxy"
(commonjs) load "\u0000./stream/promises?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/utils?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/legacy?commonjs-proxy"
(commonjs) load "\u0000./internal/streams/readable?commonjs-proxy"
at EventEmitter.handleEmptyEventLoop (/home/ryey/coding/solid-fixer/node_modules/rollup/dist/shared/rollup.js:23157:20)
at Object.onceWrapper (node:events:633:28)
at EventEmitter.emit (node:events:519:28)
at process.<anonymous> (/home/ryey/coding/solid-fixer/node_modules/rollup/dist/shared/rollup.js:23151:55)
at process.emit (node:events:519:28)
Node.js v21.2.0
I fixed this with npm i events
and setting window.global = window;
in a script tag before the main.tsx
script. Hope this helps!
Ok, I found the issue for my case. It's because the project is using an old version of Vite (2.x), indirectly imported by quasar. Not sure why a newly-created quasar project will use an old version of quasar toolkit and vite. After manually updating their versions and an override (see here), the issue is gone.
Hope it's useful for others.
Brand new project following the docs on honojs:
(base) ➜ honojs-wordpress npx vite
failed to load config from /project/vite.config.ts
error when starting dev server:
TypeError: Class extends value undefined is not a constructor or null
at file:///project/node_modules/@hono/node-server/dist/index.mjs:8:15
at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async loadConfigFromBundledFile (file:///project/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:68112:21)
at async loadConfigFromFile (file:///project/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:67967:28)
at async resolveConfig (file:///project/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:67579:28)
at async _createServer (file:///project/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:64224:20)
at async CAC.<anonymous> (file:///project/node_modules/vite/dist/node/cli.js:762:24)
points too:
import { createServer as createServerHTTP } from "http";
// src/request.ts
import { Http2ServerRequest } from "http2";
import { Readable } from "stream";
var GlobalRequest = global.Request;
var Request = class extends GlobalRequest {
constructor(input, options) {
if (typeof input === "object" && getRequestCache in input) {
input = input[getRequestCache]();
}
if (options?.body instanceof ReadableStream) {
;
options.duplex = "half";
}
super(input, options);
}
};
Referring too
var GlobalRequest = global.Request;
Ok. Fix for me was using Node 18 instead of 16.
@TibixDev 's solution saved my life, for anyone doing web3 related projects, try add 'near-api-js': 'near-api-js/dist/near-api-js.js',
in alias
@TibixDev 's solution saved my life, for anyone doing web3 related projects, try add
'near-api-js': 'near-api-js/dist/near-api-js.js',
in alias
Thanks a lot , was having a nightmare trying to fix!
I had an absolute field day with the garbage that this error is, I'll spare you with the details and tell you how to solve it.
My case was having abstract class on an indirect import in a test file using vue3 + vitejs. No circular references.
Man, @TibixDev how can I buy you a beer?
Describe the bug
After updating to version 3 we started getting the following error in our bundle script:
This does not occur in v2. It does also not happen while we are in "dev" mode in v3.
It appears to be an issue with how things are being bundled in the newer version- as the new code is unable to create a specific class in a library
near-api-js
as it used to, and the output code does look a little strange.Reproduction
https://github.com/lostpebble/vite-class-undefined-error
System Info
Used Package Manager
yarn
Logs
No response
Validations