Output

Principles

Because we promote standards, the build output can either be:

  • buildless: sources are shipped un-modified / un-transpiled
  • ES build: sources are processed according to configuration (e.g. Babel), ES module imports are un-modified

Next.js use

Because Next doesn't transpile/bundle node_modules in server (SSR) build, you need to tweak Next webpack configuration to properly use ES modules (in general and the ones generated by WebComponents.dev in particular).

next-transpile-modules does this, so you need to set it up in your project, e.g. in next.config.js:

const withTM = require('next-transpile-modules')(['@SCOPE/PACKAGE']);

module.exports = withTM();

For next-transpile-modules to work, your package needs to be resolve-able (as-in node resolve('@SCOPE/PACKAGE')), which means it must include a root index.js file, or its package.json manifest needs to have a valid main/module field. Once set up though, you can import any part of your package in your next app (e.g. @SCOPE/PACKAGE/PATH_TO_COMPONENT)