Build issues with v3. TypeError: Class extends value undefined is not a constructor or null

lostpebble commented 2 years ago

Describe the bug

After updating to version 3 we started getting the following error in our bundle script:

account_multisig.js:48 Uncaught TypeError: Class extends value undefined is not a constructor or null
    at account_multisig.js:48:41
    at requireAccount_multisig (account_multisig.js:453:2)
    at common-index.js:34:31
    at requireCommonIndex (common-index.js:53:136)
    at requireRpc_errors (rpc_errors.js:10:24)
    at json-rpc-provider.js:20:22
    at requireJsonRpcProvider (json-rpc-provider.js:356:27)
    at index.js:9:29
    at requireProviders (index.js:12:131)
    at requireAccount (account.js:10:21)

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

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.8

Used Package Manager

yarn

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

sapphi-red commented 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 = [].

lostpebble commented 2 years ago

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?

sapphi-red commented 2 years ago

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

mikemaccana commented 2 years ago

Thanks for the workaround @sapphi-red ! 💓 Subscribing to the issue so we can stay on top of the final fix.

val-samonte commented 2 years ago

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.

zoan37 commented 1 year ago

@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

Vithanco commented 1 year ago

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} })

zoan37 commented 1 year ago

@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}

devsalman247 commented 1 year ago

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

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)

adueck commented 1 year ago

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(),
        ],
      },
    },
  };
});

myckhel commented 1 year ago

@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.

adueck commented 1 year ago

@myckhel Thanks your vite config worked for me as well and it looks simpler and more thorough.

TibixDev commented 1 year ago

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>

Pankaj-Surya commented 1 year ago

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.

vlefr commented 1 year ago

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 useRefhook

What could be the problem ?

Thanks a lot

helmturner commented 1 year ago

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')
    });
  });
}

Jogiter commented 1 year ago

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

bluwy commented 1 year ago

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.

renyuneyun commented 1 year ago

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

drewrodrigues commented 1 year ago

I fixed this with npm i events and setting window.global = window; in a script tag before the main.tsx script. Hope this helps!

renyuneyun commented 12 months ago

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.

MANTENN commented 9 months ago

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.

qiweiii commented 6 months ago

@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

TechTronixx commented 5 months ago

@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!

JFCodes commented 3 months ago

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?

vitejs / vite