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
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
const withTM = require('next-transpile-modules')(['@SCOPE/PACKAGE']);
module.exports = withTM();
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.