"Error: require() of ESModule not supported" when importing Parser into TypeScript

[morphatic]

1. Using version: @json2csv/plainjs@6.3.1
2. Node/Browser versions: node v18.16.0, chromium 112 running inside Electron app
3. sample project with reproduction (note that it's the require-esmodule-not-supported branch that has the repro). To see the error, clone the repo, npm i && npm test. Within this project, @json2csv is used within utilities/axe-results-parser.ts

Things I've tried to fix it:

1. Added "type": "module", to package.json. This caused other things to break.
2. Installed the TypeScript version directly from GitHub as described here
3. Tried importing directly from source, i.e. import { Parser } from 'json2csv/packages/plainjs/src/'
4. Tried replacing it with @json2csv/node and using AsyncParser with the promise() function

⚠️ I know this has something to do with the build environment in this project because I've been using @json2csv/plainjs just fine in a different project that also uses TypeScript.

Here's the output on the console that comes when running the tests.

Error: require() of ES Module C:\Users\xxxx\dev\vanilla-vite-ts\node_modules\@json2csv\plainjs\src\index.js from C:\Users\xxxx\dev\vanilla-vite-ts\utilities\axe-results-parser.ts not supported.
Instead change the require of index.js in C:\Users\xxxx\dev\vanilla-vite-ts\utilities\axe-results-parser.ts to a dynamic import() which is available in all CommonJS modules.

   at ..\utilities\axe-results-parser.ts:8

   6 |  * a way to convert the results into a list of discrete issues. That's what this method does.
   7 |  *
>  8 |  * @module axe-results-parser
     |                ^
   9 |  */
  10 |
  11 | import { createHash } from 'crypto'

    at Object.<anonymous> (C:\Users\xxxx\dev\vanilla-vite-ts\utilities\axe-results-parser.ts:8:16)
    at Object.<anonymous> (C:\Users\xxxx\dev\vanilla-vite-ts\tests\main.spec.ts:8:25)

Here's an example of what the output should look like.

[juanjoDiaz]

HI @morphatic ,

Sorry for the delay responding. I've been busy moving the library to typescript which took some effort. I just released version 7.

I know that there were some issues related to vite and the lack of typescript typings in @json2csv. Is the issue still present if you try version 7?

[morphatic]

@juanjoDiaz thanks for the reply! Also, congrats on the new release!!

I tried updating to v7 in my test project. It does NOT appear to have fixed the issue. BUT, I have new information.

I think it has something to do with module resolution at build time. The @json2csv/plainjs package exports TWO versions: –

– @json2csv
  ├ formatters
  └ plainjs
    └ dist
      ├ cjs <= CommonJS version
      └ mjs <= ES6 version

I updated my import statement as follows:

// the way that does NOT work => module resolves to @json2csv/plainjs/dist/mjs/Parser
import { Parser } from '@json2csv/plainjs'

// THIS way works (explicitly choosing CJS version)
import { Parser } from '@json2csv/plainjs/dist/cjs'

I'm not sure how the vite/babel/node configuration resolves modules, but for whatever reason, the version of Parser that it selects is the cause of the problem I've been experiencing. I honestly don't know enough about the dark arts of module resolution and building distributable node packages to understand why this is happening.

If I figure it out before you do, I'll be sure to come back and update this thread. Thanks for your help!!!

[juanjoDiaz]

Hi @morphatic ,

Indeed! This library exposes both ES6 and CJS. Package JSON does the mapping to the right one based on your module setting in package.json or in the file extension (mjs or cjs). You can read more in Node's documentation.

So, as you suspected, something is off in your build system because you are importing using ES6 syntax but your build system requires commonjs. This is something that you need to fix with your build system configuration.... Maybe something to do with this: https://www.electronforge.io/config/plugins/vite#native-node-modules?

[juanjoDiaz]

Closing it since the issues seems outside of this library and there was no response.