electron-react-boilerplate: Error [ERR_REQUIRE_ESM]: require() of ES Module fix-path/index.js from main.ts not supported. Instead change the require of index.js in main.ts to a dynamic import() which is available in all CommonJS modules.

Expected Behavior

Library import of fix-path and its usage works.

Current Behavior

Error on startup.

Steps to Reproduce

1. Add the example code to main.ts

import fixPath from 'fix-path';
fixPath();

1. Build (npm run build) and Run (npm run start)

2. Error on startup

App threw an error during load
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/manuel/src/electron-react-boilerplate/node_modules/fix-path/index.js from /Users/manuel/src/electron-react-boilerplate/src/main/main.ts not supported.
Instead change the require of index.js in /Users/manuel/src/electron-react-boilerplate/src/main/main.ts to a dynamic import() which is available in all CommonJS modules.
    at Object.require.extensions.<computed> [as .js] (/Users/manuel/src/electron-react-boilerplate/node_modules/ts-node/dist/index.js:729:20)
    at Function.c._load (node:electron/js2c/asar_bundle:5:13331)
    at Object.<anonymous> (/Users/manuel/src/electron-react-boilerplate/src/main/main.ts:21:36)
    at Module.m._compile (/Users/manuel/src/electron-react-boilerplate/node_modules/ts-node/dist/index.js:735:29)
    at Object.require.extensions.<computed> [as .ts] (/Users/manuel/src/electron-react-boilerplate/node_modules/ts-node/dist/index.js:737:16)
    at Function.c._load (node:electron/js2c/asar_bundle:5:13331)
    at loadApplicationPackage (/Users/manuel/src/electron-react-boilerplate/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:110:16)
    at Object.<anonymous> (/Users/manuel/src/electron-react-boilerplate/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:222:9)
    at Function.c._load (node:electron/js2c/asar_bundle:5:13331)
    at Object.<anonymous> (node:electron/js2c/browser_init:193:3197)
    at Object../lib/browser/init.ts (node:electron/js2c/browser_init:193:3401)
    at __webpack_require__ (node:electron/js2c/browser_init:1:128)
    at node:electron/js2c/browser_init:1:1200
    at node:electron/js2c/browser_init:1:1267
    at Function.c._load (node:electron/js2c/asar_bundle:5:13331)

Possible Solution (Not obligatory)

I tried the following, but no luck:

• adding "type": "module" in package.json
• lazy import const fixPath = await import('fix-path'); fixPath();
• use libary fix-esm

Context

Your Environment

• Node version : v16.13.1
• electron-react-boilerplate version or branch : https://github.com/mangei/electron-react-boilerplate/commit/10e4462189620ef210ffc229111d51a140f19604
• Operating System and version : MacOS 12.1
• Link to your project :

Resources/Research

• Pure ESM Package
• standard-things/esm
• Dynamic import lands in Node.js, we can import ES6 modules in CommonJS code
• Stackify: NodeJS “Must use import to load ES Module”
• [Solved] TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
• standard-things/esm/issues/868: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module / require() of ES modules is not supported
• https://github.com/jason-henriksen/typescript-with-esm-no-babel-boilerplate
• diauweb/esmRequire.js
• Level/level/issues/140: TypeError The “path” argument must be of type string. Received type undefined

Thanks for your help! 👍