Bundle external dependency instead of treating it as external about klap HOT 14 CLOSED

thank you for the issue @marcuslindblom, but I don't think any of the other JS bundler packages/bundles a URL import.

For your use case, since you've canvas-confetti already installed, perhaps you can change the import statement to:

import confetti from 'canvas-confetti';

from klap.

Tried that one also but the output is just

import"canvas-confetti";var o=()=>{console.log("Hello, world.")};export{o as hello};

Maybe it's important to tell you that my target is the browser and plain vanilla js in an es module.

from klap.

with the import changed to import confetti from 'canvas-confetti';, you should be able to get it bundled.

Please note that, klap will mark all the dependencies and peerDependencies as external by default.

If you really want to bundle canvas-confetti, you should move it to devDependencies. That way, when your library is installed, user's don't have to install canvas-confetti since your dist file already bundles it.

from klap.

Ah cool, that was the issue. Using devDependencies instead if dependencies did the trick.

Thanks 🙏

from klap.

Opening this issue again.

I'm using klap only to build my production package so for development I'm using imports like this import { openDB, deleteDB } from 'https://cdn.skypack.dev/idb';.

For production I would like Klap to bundle the external libraries and it's not an option to use import { openDB, deleteDB } from 'idb'; Installing idb as a devDependencies did not work?

from klap.

Without changing the import to from 'idb', there is now way for klap to map it to the devDependency.

Can you speak more about your workflow? One way to resolve this is to add a CDN plugin, which downloads the file when building for production and just ignore the urls when building for development.

from klap.

My workflow is pretty simple. My project use vanilla js with es modules. In production I bundle all my modules into a single file. I have two external dependencies that I would like to bundle because CDNs harm the performance of my app. A CDN plugin would work but maybe it's better to just download the scripts and put them in a lib folder. Seems like the easiest way atm :)

from klap.

Great, that helps. If it's not too much to ask, can you create a smallest reproduction for this workflow, or perhaps point me to existing project?

from klap.

🎉 This issue has been resolved in version 6.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from klap.

@marcuslindblom Let me know if you notice any issues with this feature.

from klap.

@osdevisnot I just tried the new release and it fails with this exception.

❯ npx klap build -s wwwroot/scripts/index.js -e wwwroot/app.js
internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'typescript'
Require stack:
- /Users/marcus/Library/Mobile Documents/com~apple~CloudDocs/Projects/private/wieldy/src/app/node_modules/klap/dist/index.js
- /Users/marcus/Library/Mobile Documents/com~apple~CloudDocs/Projects/private/wieldy/src/app/node_modules/klap/cli.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.975034 (/Users/marcus/Library/Mobile Documents/com~apple~CloudDocs/Projects/private/wieldy/src/app/node_modules/klap/dist/index.js:723366:18)
    at __webpack_require__ (/Users/marcus/Library/Mobile Documents/com~apple~CloudDocs/Projects/private/wieldy/src/app/node_modules/klap/dist/index.js:723415:43)
    at Object.956237 (/Users/marcus/Library/Mobile Documents/com~apple~CloudDocs/Projects/private/wieldy/src/app/node_modules/klap/dist/index.js:607953:17)
    at __webpack_require__ (/Users/marcus/Library/Mobile Documents/com~apple~CloudDocs/Projects/private/wieldy/src/app/node_modules/klap/dist/index.js:723415:43)
    at Module.600669 (/Users/marcus/Library/Mobile Documents/com~apple~CloudDocs/Projects/private/wieldy/src/app/node_modules/klap/dist/index.js:694664:30)
    at __webpack_require__ (/Users/marcus/Library/Mobile Documents/com~apple~CloudDocs/Projects/private/wieldy/src/app/node_modules/klap/dist/index.js:723415:43) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/marcus/Library/Mobile Documents/com~apple~CloudDocs/Projects/private/wieldy/src/app/node_modules/klap/dist/index.js',
    '/Users/marcus/Library/Mobile Documents/com~apple~CloudDocs/Projects/private/wieldy/src/app/node_modules/klap/cli.js'
  ]
}

This is a vanilla js project with es modules only

from klap.

This is strange. typescript is marked as external dependency.

What version of klap are you upgrading from?

Also, can you please add a dependency on typescript temporarily, until this issue is resolved?

from klap.

I'm using 6.0.9 atm

from klap.

@marcuslindblom the latest version should fix this issue. Can you point me yo your repository if this is not the case?

from klap.