CODEWITHSUNDEEP
web-componentlit-element
kyw
kyw

Reputation: 7533

Lit-element: How to work with non-esm npm packages?

I have come from a create-react-app/webpack-babel-react world. How do you guys integrate third-party non-esm npm packages when working with Lit-Element?

I'm building on top of a project scafolded with the open-wc. So far I really like that it doesn't involve build/compilation toolings, but I'm struggling to import those npm packages I have been used to...

I have also googled for tutorials on how to use webpack with lit-element in case I really had to, but I couldn't find a decent one. Or do I need to use the Polymer library? Or the Polymer's pwa-starter-kit?

What do you guys think?

Upvotes: 1

Views: 463

Answers (2)

Abbas Cyclewala
Abbas Cyclewala

Reputation: 609

If you are using the setup provided by open-wc which uses web-dev-server, you need to add rollup commonjs plugin in your server.mjs for running and similarly in your rollup.config.js for production build

You can refer this on how to use rollup plugins in web-dev-server - https://modern-web.dev/guides/dev-server/using-plugins/#commonjs

Other alternative is to use vitejs instead of web-dev-server, which automatically handles all these things. It also does not require much configuration as long as you have index.html

Upvotes: 0

ChaseMoskal
ChaseMoskal

Reputation: 7661

if you choose to use a bundler like rollup, you could use their plugin for transforming common-js

if you're like me and you're using import maps via es-module-shims, you can only consume modern esm code

when commonjs-only cases arise, i fork them, upgrade them to esm, launch a pull request, and if they don't accept it, i publish it under a new npm package — easy peasy

for example, i did that to nanoid and made nanoid-esm.. see a github comment about it

cheers 👋 chase

Upvotes: 1

Related Questions