import issues on Netlify, SvelteKit and ViteJS

[benaltair]

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

[mathio]

Hello @benaltair

I think this might be an issue with SvelteKit, please see the discussion here: sveltejs/kit#928

Also related: vitejs/vite#3024

[benaltair]

Hi @mathio - yes, looks like Vite isn't able to handle the CJS imports well. Is ESM on the horizon for the Typeform library by any chance?

[benaltair]

Upon further inspection, the solution in the error message does indeed work:

import pkg from '@typeform/embed';
const { createWidget } = pkg;

I'll close this for now, but would love to see ESM support for Typeform. 😊

[mathio]

I went through the docs https://nodejs.org/api/esm.html and I think our lib is ECMAScript module.

BTW It is completely fine to import the lib and use it like this:

import tf from '@typeform/embed';
// ...
tf.createWidget(
  // ...
)

Could you please provide more details on what you mean by "ESM support" and what are we missing in our lib?

[benaltair]

Hi @mathio, I'm pretty unfamiliar with ES modules to be honest, but from what I understand it has to do with exports - right now only a default export is provided (I believe) and it would be nice to provide separate exports in addition the default, rather than exporting the entire module and then using dot notation.

[benaltair]

Looking closer it does look like this library is using CommonJS modules, not ES modules.

The Embed library is a client-side script and CommonJS module that you can use to embed your typeforms in your website or web application.
https://developer.typeform.com/embed/

What I would like to request consideration of is to provide an ES module to support more workflows.

[mathio]

I see there is "module": "CommonJS", in tsconfig.js, however it looks like we are actually using ES modules syntax. @prilutskiy you added this config, do you have any more knowledge on this? Honestly I am a bit lost here :) Maybe its just an incorrect config?

[benmccann]

This library appears to me to be using UMD:

embed/packages/embed/webpack.config.js

Line 50 in bc9ddcb

libraryTarget: 'umd',

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

[mrisoli]

I just tried reproducing this issue with a minimal Sveltekit app and was unable to, could you provide a reproducible example?
I used one of the latest versions of Sveltekit/Vite so maybe this issue has been fixed?
Or is the current issue to just provide multiple outputs?

[mathio]

We were unable to reproduce this. If you still experience this please feel free to reopen this with additional information.