`import` issues on Netlify, SvelteKit and ViteJS

I’m getting the following error when building on Netlify:

7:22:56 PM: > Named export 'createWidget' not found. The requested module '@typeform/embed' is a CommonJS module, which may not support all module.exports as named exports.
7:22:56 PM: CommonJS modules can always be imported via the default export, for example using:
7:22:56 PM: import pkg from '@typeform/embed';
7:22:56 PM: const { createWidget } = pkg;

This traces back to:

import { createPopup } from '@typeform/embed';
let showRegistration: boolean = false;
function openRegistrationForm() {
	showRegistration = true;
	// ID omitted from code example
	createPopup('<id>', {
		container: document.querySelector('#register')
	});
}

The code above works fine in the dev environment but isn’t accepted by Netlify. I haven’t seen it on any other libraries. Unfortunately the solution in the error message doesn’t work locally (although it works in Netlify).

It’s not a permalink, but you can currently see the code context at this branch: https://github.com/bahaistudies/conference/tree/netlify-identity

[benmccann]

This library appears to me to be using UMD: https://github.com/Typeform/embed/blob/bc9ddcb1c515617053c9d07480037cfa4a53f714/packages/embed/webpack.config.js#L50

Rather than use UMD and try to serve both browser and server with a single build, the nicer thing to do is typically to output a CJS build specified in main and an ESM build specified in module in package.json. Or better yet, just provide an ESM build in main and set type: "module". You can still provide a UMD build if you have users who include the library via a script tag, but it’s generally not preferred for npm packages

[mathio]

Hello @benaltair

I think this might be an issue with SvelteKit, please see the discussion here: https://github.com/sveltejs/kit/issues/928

Also related: https://github.com/vitejs/vite/issues/3024