Build issues with v3. TypeError: Class extends value undefined is not a constructor or null #9703
Comments
sapphi-red
added
inconsistency
|
It seems it's related to @rollup/plugin-commonjs v22. For a workaround, use Esbuild Deps Optimization at Build Time. |
|
Thanks @sapphi-red - those changes do fix the issue in the reproduction repo. I also did try putting 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
There's some tree-shaking issues with it but we're going to make it default in future. |
|
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 |
|
@val-samonte I have the same issue as you with Buffer becoming undefined. Any workaround? Edit: I fixed the issue by setting |
|
Hi! I have a similar issue during test execution only. Any ideas how I could fix that?
|
|
@Vithanco I don't know if this helps but my vite.config.ts looks like this: And I set window.global in my index.html: I don't use |
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) |
Thanks so much @sapphi-red ! The @sapphi-red, is there a simpler/better way to do this in Vite v4? Here's the magic 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 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 <script>
// Global node polyfill.
window.global = window;
</script> |
|
Please check the import and export in the file. |
vite 的 dev 与 build 的 default export module 输出不一致。 举例引入 quill-blot-formatter 包时， dev 输出为 commonJs 格式，build 输出为 es module 格式。 此提交为vite github issue 解决方案。相关issue如下： vitejs/vite#6112 vitejs/vite#9703 Signed-off-by: bawwtracs <kmi1prwiexrb41@gmail.com>
|
Hi ! i tried the 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 ( Dynamically re-importing those values inside the 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')
});
});
} |
"TypeError: Class extends value undefined is not a constructor or null" error was happening in prod after building. Take a look at this [vite issue](vitejs/vite#9703) to make some sense of what was going on.
|
got en error "Uncaught TypeError: EventEmitter is not a constructor" using vite. anyway, fixed by run |
|
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 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: If built with I'm using Tried the suggestions above, but none worked. In particular, using @adueck's snippet (adapted for quasar.config.js), building errors with the following message: |
|
I fixed this with |
|
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. Hope it's useful for others. |
|
Brand new project following the docs on honojs: points too: Referring too Ok. Fix for me was using Node 18 instead of 16. |
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-jsas it used to, and the output code does look a little strange.Reproduction
https://github.com/lostpebble/vite-class-undefined-error
System Info
System: OS: Windows 10 10.0.19044 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 4.29 GB / 15.79 GB Binaries: Node: 16.15.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 104.0.5112.81 Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.54) Internet Explorer: 11.0.19041.1566 npmPackages: vite: ^3.0.8 => 3.0.8Used Package Manager
yarn
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: