kaboom: 'default' is not exported by kaboom.js

I tried to use kaboom in a typescript project setup with vite; however it seems that the default import from kaboom is an empty object:

The error thrown on production build:

~/Documents/dev/games/flappy-like main
❯ yarn build
yarn run v1.22.10
warning package.json: No license field
$ tsc && vite build
vite v2.3.7 building for production...
transforming (2) src/main.tsError when using sourcemap for reporting an error: Can't resolve original location of error.
✓ 3 modules transformed.
'default' is not exported by node_modules/kaboom/dist/kaboom.js, imported by src/main.ts
file: /Users/renan/Documents/dev/games/flappy-like/src/main.ts:1:7
1: import kaboom from "kaboom";
          ^
2: const k = kaboom();
3: k.scene("start", () => {
error during build:
Error: 'default' is not exported by node_modules/kaboom/dist/kaboom.js, imported by src/main.ts
    at error (/Users/renan/Documents/dev/games/flappy-like/node_modules/rollup/dist/shared/rollup.js:7917:30)
    at Module.error (/Users/renan/Documents/dev/games/flappy-like/node_modules/rollup/dist/shared/rollup.js:9859:16)

Browser error on dev: CleanShot 2021-06-09 at 18 24 51@2x

I don’t know if I’m missing something in the vite config or typescript config:

The main.ts file:

import kaboom from 'kaboom'

const k = kaboom() // ⚠️ Throw an error "Uncaught TypeError: kaboom is not a function"

k.scene('start', () => {
  // add a text at position (100, 100)
  k.add([
    k.text("ohhimark", 32),
    k.pos(100, 100),
  ]);
})

k.start('start')

tsconfig.json file

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext", "DOM"],
    "moduleResolution": "node",
    "strict": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noImplicitAny": false,
    "isolatedModules": true,
    "typeRoots": [
      "node_modules/**/*.d.ts"
    ],
  },
  "include": ["./src/*.ts"]
}

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 17 (8 by maintainers)

Most upvoted comments

Oh start() is removed in favor of go(), is that the problem?

slmjkdbtl on Sep 9, 2021

Nice! I believe the package / bundler issue is resolve, closing.

slmjkdbtl on Sep 10, 2021

Oh, it seems that start() was the Problem. So import kaboom from "kaboom"; works fine 😃

WebdevAlexTV on Sep 10, 2021

I tested it and it works too @slmjkdbtl ! adding .mjs and .cjs versions fixes the issue 👍

In my case I was able to bypass this issue (for vitejs) by adding an alias pointing to the kaboom package:

alias: {
      kaboom: path.resolve(projectRoot, 'node_modules/kaboom/dist/kaboom.mjs'),
}

But I confirm that adding the module and main fields is working fine

DecampsRenan on Aug 7, 2021

Adding the module and main field to point to the .mjs and .cjs (8055546) seems to fix this

Can anyone verify by cloning and installing the library locally? (it’s possible your code might break due to other hanging breaking changes on master which is unrelated to this)

slmjkdbtl on Jun 29, 2021

With parcel: import kaboom from “…/node_modules/kaboom/dist/kaboom.mjs”;

micheg on Jun 25, 2021

Looks like vite (is it using rollup?) is ignoring the exports field in kaboom’s package.json and always using the kaboom.js which exposes to window instead of module

"browser": "dist/kaboom.js",
"types": "dist/kaboom.d.ts",
"exports": {
	".": {
		"import": "./dist/kaboom.mjs",
		"require": "./dist/kaboom.cjs"
	},
	"./plugins/*": {
		"import": "./dist/plugins/*.mjs",
		"require": "./dist/plugins/*.cjs"
	}
},

I only tested package with esbuild and it works. I’ll investigate into this, but if anyone is familiar with distributing packages for all cjs, umd and iife help is appreciated!

slmjkdbtl on Jun 15, 2021

Hello.

I have solved the problem using full path to kaboom packages. Using vite and vanilla javascript, not typescript.

import kaboom from '../node_modules/kaboom/dist/kaboom';

With typescript must use .d.td module.

franselles on Jun 12, 2021

I’m having the same issue. Tried with just javascript and typescript, using parcel the error I get is:

Uncaught TypeError: _kaboom.default is not a function
    parcelRequire<["kaboom.ts"]< kaboom.ts:6
    newRequire main.c39d6dcf.js:47
    localRequire main.c39d6dcf.js:53
    parcelRequire<["main.ts"]< main.ts:1
    newRequire main.c39d6dcf.js:47
    parcelRequire main.c39d6dcf.js:81
    <anonymous> main.c39d6dcf.js:120

rainkinz on Jun 11, 2021