Error in dynamic import in web component

[dman777]

I am trying a dynamic import in chrome. I have

      const { default: Papa } = await import('papaparse');
      const csv = Papa.parse(data);

but I get the error Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'Papa') which traces to the module code

(function(root, factory)
{
	/* globals define */
	if (typeof define === 'function' && define.amd)
	{
		// AMD. Register as an anonymous module.
		define([], factory);
	}
	else if (typeof module === 'object' && typeof exports !== 'undefined')
	{
		// Node. Does not work with strict CommonJS, but
		// only CommonJS-like environments that support module.exports,
		// like Node.
		module.exports = factory();
	}
	else
	{
		// Browser globals (root is window)
		root.Papa = factory();
	}
	// in strict mode we cannot access arguments.callee, so we need a named reference to
	// stringify the factory method for the blob worker
	// eslint-disable-next-line func-name
}(this, function moduleFactory()

This is being used in the lit element library, which is a web component library using shadow dom. Am I doing anything wrong in the above to cause this error?

[dman777]

This happens also with a normal import in the browser. This is being done with no typescript or transpiling.... just native ES in browser

[j0sh]

Getting the same - I wonder if it is because of missing esm support? Eg #939 / #875 (note the workarounds suggested in the #939 don't seem to help with dynamic imports as far as I can tell)

[j0sh]

Here is what worked for me; the relevant parts were taken from #978 (via nix-shell which I use to set up my development environment)

    if ! [ -f papaparse.js ]; then
      curl -Lo papaparse-v5.4.0.zip "https://github.com/mholt/PapaParse/archive/refs/tags/5.4.0.zip"
      unzip papaparse-v5.4.0.zip
      pushd PapaParse-5.4.0
      echo "export default globalThis.Papa;" >> papaparse.js
      sed -i "s/function(root,/function(root=window,/" papaparse.js
      esbuild --minify papaparse.js > ../papaparse.js
      popd
    fi

Now this is working in my project, a Chrome extension:

async function loadPapaParse(){
  const src = chrome.runtime.getURL('papaparse.js');
  const { default:Papa } = await import(src);
  return Papa;
}

[TuringTux]

@j0sh Thanks for the helpful workaround! For future reference, I needed to install esbuild using:

npm install --save-exact --save-dev esbuild

This assumes you already have Node.js pre-installed. I also needed to prefix npx before the esbuild call, i.e. like this:

...
npx esbuild --minify papaparse.js > ../papaparse.js
...

In my client-side JavaScript code, I then needed to write (replacing "/location/of/papaparse.js" with the location of the just-generated file):

import { default as Papa } from "/location/of/papaparse.js"

[markg85]

I was having this issue too.
The comment from @TuringTux didn't work for me in a browser context. I had to use this command:

npx esbuild --format=esm --minify papaparse.js > papaparse.min.mjs

And then import as:

import Papa from "/location/of/papaparse.min.mjs"

It does give a parse warning at the npx esbuild time but it works so.. that's good enough for me :)

[mitra42]

This is a lot of mess to get ESM support in a module that seems to have decided not to support it - is there another CSV parser with ESP support ?

csv-parser doesn't have ESM support; and I can't figure out how to get csv-parse to look at the results of a fetch.