Bundle external dependency instead of treating it as external

[marcuslindblom]

Using this simple example:

import confetti from 'https://cdn.skypack.dev/canvas-confetti';

const celebrate = () => {
    confetti();
}

const hello = () => {
    console.log('Hello, world.'); 
}

export { hello, celebrate }

I have tried to install the package using yarn add canvas-confetti but it's still treated as external when i run npx klap build

[osdevisnot]

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

[marcuslindblom]

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.

[osdevisnot]

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.

[marcuslindblom]

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

Thanks 🙏

[marcuslindblom]

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?

[osdevisnot]

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.

[marcuslindblom]

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

[osdevisnot]

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?

[osdevisnot]

🎉 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 📦🚀

[osdevisnot]

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

[marcuslindblom]

@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

[osdevisnot]

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?

[marcuslindblom]

I'm using 6.0.9 atm

[osdevisnot]

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