Uncaught TypeError: Cannot set property default of #<Object> which has only a getter

[jacobodeharo]

Describe the bug

After upgrading to version 2.3.0 seems like there is an issue with EsBuild (In my case it happens when I try to mount components from Prime React). Vite version 2.2.4 seems to work fine with the same project configuration/dependencies.

Reproduction

This minimal project reproduces the issue.

Steps:

1. npm i
2. npm run dev

This is the error in the browser's console:

Uncaught TypeError: Cannot set property default of #<Object> which has only a getter
    at _interopRequireWildcard (Button.js:24)
    at node_modules/primereact/components/button/Button.js (Button.js:8)
    at __require (chunk-GZDVDKT7.js?v=b1e101bf:6)
    at node_modules/primereact/button.js (button.js:3)
    at __require (chunk-GZDVDKT7.js?v=b1e101bf:6)
    at dep:primereact_button:1

And this is line error:

System Info

 System:
    OS: macOS Mojave 10.14.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 2.11 GB / 32.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.22.5 - ~/.nvm/versions/node/v12.13.1/bin/yarn
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Edge: 90.0.818.62
    Firefox: 86.0
    Firefox Developer Edition: 71.0
    Safari: 14.0.3
    Safari Technology Preview: 13.2
  npmPackages:
    vite: 2.3.0 => 2.3.0 

Used package manager: npm

Logs

  vite:spa-fallback Rewriting GET / to /index.html +20s
  vite:time 5ms   /index.html +20s
  vite:cache [memory] /@vite/client +0ms
  vite:time 1ms   /@vite/client +57ms
  vite:cache [memory] /src/main.tsx +2ms
  vite:time 0ms   /src/main.tsx +1ms
  vite:cache [memory] /node_modules/vite/dist/client/env.js +55ms
  vite:time 0ms   /node_modules/vite/dist/client/env.js +55ms
  vite:cache [memory] /node_modules/.vite/preact.js?v=b1e101bf +0ms
  vite:time 1ms   /node_modules/.vite/preact.js?v=b1e101bf +1ms
  vite:cache [memory] /node_modules/.vite/preact_debug.js?v=b1e101bf +2ms
  vite:time 1ms   /node_modules/.vite/preact_debug.js?v=b1e101bf +2ms
  vite:cache [memory] /src/App.tsx +2ms
  vite:time 0ms   /src/App.tsx +1ms
  vite:cache [memory] /src/index.css +1ms
  vite:time 1ms   /src/index.css +1ms
  vite:cache [memory] /node_modules/.vite/chunk-GZDVDKT7.js?v=b1e101bf +3ms
  vite:time 1ms   /node_modules/.vite/chunk-GZDVDKT7.js?v=b1e101bf +3ms
  vite:cache [memory] /node_modules/@prefresh/core/src/index.js?v=b1e101bf +4ms
  vite:time 1ms   /node_modules/@prefresh/core/src/index.js?v=b1e101bf +4ms
  vite:cache [memory] /node_modules/@prefresh/utils/src/index.js?v=b1e101bf +1ms
  vite:time 1ms   /node_modules/@prefresh/utils/src/index.js?v=b1e101bf +1ms
  vite:cache [memory] /node_modules/.vite/primereact_button.js?v=b1e101bf +2ms
  vite:time 4ms   /node_modules/.vite/primereact_button.js?v=b1e101bf +5ms
  vite:cache [memory] /node_modules/primereact/resources/themes/saga-blue/theme.css +6ms
  vite:time 0ms   /node_modules/primereact/resources/themes/saga-blue/theme.css +3ms
  vite:cache [memory] /node_modules/primereact/resources/primereact.min.css +2ms
  vite:time 0ms   /node_modules/primereact/resources/primereact.min.css +2ms
  vite:cache [memory] /node_modules/primeicons/primeicons.css +1ms
  vite:time 0ms   /node_modules/primeicons/primeicons.css +1ms
  vite:cache [memory] /node_modules/@prefresh/core/src/runtime/catchError.js?v=b1e101bf +1ms
  vite:time 0ms   /node_modules/@prefresh/core/src/runtime/catchError.js?v=b1e101bf +1ms
  vite:cache [memory] /node_modules/@prefresh/core/src/runtime/debounceRendering.js?v=b1e101bf +1ms
  vite:time 1ms   /node_modules/@prefresh/core/src/runtime/debounceRendering.js?v=b1e101bf +2ms
  vite:cache [memory] /node_modules/@prefresh/core/src/runtime/vnode.js?v=b1e101bf +1ms
  vite:time 1ms   /node_modules/@prefresh/core/src/runtime/vnode.js?v=b1e101bf +1ms
  vite:cache [memory] /node_modules/@prefresh/core/src/runtime/unmount.js?v=b1e101bf +2ms
  vite:time 0ms   /node_modules/@prefresh/core/src/runtime/unmount.js?v=b1e101bf +1ms
  vite:cache [memory] /node_modules/@prefresh/core/src/constants.js?v=b1e101bf +2ms
  vite:time 2ms   /node_modules/@prefresh/core/src/constants.js?v=b1e101bf +3ms
  vite:cache [memory] /node_modules/@prefresh/core/src/computeKey.js?v=b1e101bf +2ms
  vite:time 0ms   /node_modules/@prefresh/core/src/computeKey.js?v=b1e101bf +1ms
  vite:cache [memory] /node_modules/@prefresh/core/src/runtime/vnodesForComponent.js?v=b1e101bf +1ms
  vite:time 0ms   /node_modules/@prefresh/core/src/runtime/vnodesForComponent.js?v=b1e101bf +1ms
  vite:cache [memory] /node_modules/@prefresh/core/src/runtime/signaturesForType.js?v=b1e101bf +1ms
  vite:time 0ms   /node_modules/@prefresh/core/src/runtime/signaturesForType.js?v=b1e101bf +1ms
  vite:time 2ms   /src/favicon.svg +96ms

[hedlund]

I'm experiencing this by trying out Grommet with Vite. It looks to me to be similar to: apollographql/apollo-client#4843

That led onwards to: rollup/rollup#3137

Which was fixed here: rollup/rollup#3959

But simply bumping Rollup does not resolve the situation - not when running yarn dev at least, but perhaps something else is used in development HMR builds?

[julytang]

Same issue

[PuruVJ]

Experiencing it with React RnD

[Cubelrti]

Same issue here, it is affecting react-base16-styling as well (a dependency of react-json-tree).

Error log:

Uncaught TypeError: Cannot set property default of #<Object> which has only a getter
    at _interopRequireWildcard (index.ts:298)
    at node_modules/react-base16-styling/lib/index.js (index.ts:1)
    at __require2 (chunk-G3IZEHTJ.js?v=525325c9:17)
    at node_modules/react-json-tree/lib/createStylingFromTheme.js (createStylingFromTheme.ts:1)
    at __require2 (chunk-G3IZEHTJ.js?v=525325c9:17)
    at node_modules/react-json-tree/lib/index.js (index.tsx:9)
    at __require2 (chunk-G3IZEHTJ.js?v=525325c9:17)
    at dep:react-json-tree:1

I found it is possibly related to #2976 . Rollup and esbuild is not the cause since downgrading them have no effect.

By following this migration guide to apply dynamic import polyfill, this error will gone. So there might be some difference between native dynamic imports and the polyfill, which cause this issue. For those who encountered this issue, you can try adding back the polyfill to your vite.config.js for a temporary fix.

Add a plugin in your vite.config.js telling rollup to transform your dynamic imports.

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      name: 'dynamic-import-polyfill',
      renderDynamicImport() {
        return {
          left: '__import__(',
          right: ', import.meta.url)'
        }
      }
    }
  ]
})

[jacobodeharo]

The issue seems to be in babel and it was fixed here. The same issue was fixed in the TypeScript compiler.

If your project is using one dependency that is shipped by using a Babel version under v7.14.0, then it has to be updated from their side to be compatible with esbuild.

Update:

Confirmed, at Prime React they bumped their babel version, fixing the issue with esbuild. So since version 6.4.0 of Prime React it works with Vite 2.3.x.

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.