[External SyntaxError] Unable to import npm package into SvelteKit project | TypeScript Community | Page 1

crystal spear Jan 23, 2024, 9:56 PM

#

Trying to import esptool-js ( https://github.com/espressif/esptool-js )

Getting this weird Unexpected token error, tried to debug for 2 days, getting nowhere, this is easily reproducable:

import type { IEspLoaderTerminal } from 'esptool-js'; // No error
import { type IEspLoaderTerminal } from 'esptool-js'; // All hell breaks loose

10:48:53 PM [vite] Error when evaluating SSR module /src/lib/components/EspTool/FlashManager.ts: failed to import "esptool-js"
|- F:\Development\Source\MyProject\Frontend\node_modules\esptool-js\lib\index.js:1
export { ESPLoader } from "./esploader";
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:356:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:305:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)

GitHub

GitHub - espressif/esptool-js: Javascript implementation of flasher...

Javascript implementation of flasher tool for Espressif chips, running in web browser using WebSerial. - GitHub - espressif/esptool-js: Javascript implementation of flasher tool for Espressif chips...

past violet Jan 23, 2024, 10:20 PM

#

export { ESPLoader } from "./esploader";
^^^^^^

SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:77:18)
at wrapSafe (node:internal/modules/cjs/loader:1288:20)
is pretty clear

#

node is trying to import that module in commonjs mode, but it is an ESM-only module
so it will fail

#

@crystal spear

crystal spear Jan 23, 2024, 10:28 PM

#

How can I solve this @past violet ? thinkeyes

past violet Jan 23, 2024, 10:29 PM

#

well, what is your current TS config exactly?

crystal spear Jan 23, 2024, 10:29 PM

#

my package.json is set to module

past violet Jan 23, 2024, 10:29 PM

#

are you using Vite?

crystal spear Jan 23, 2024, 10:29 PM

#

yup

past violet Jan 23, 2024, 10:29 PM

#

what preset/template?

crystal spear Jan 23, 2024, 10:29 PM

#

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "moduleResolution": "bundler"
    }
}

past violet Jan 23, 2024, 10:30 PM

#

and what does .svelte-kit/tsconfig.json look like?

crystal spear Jan 23, 2024, 10:30 PM

#

{
    "compilerOptions": {
        "paths": {
            "$lib": [
                "../src/lib"
            ],
            "$lib/*": [
                "../src/lib/*"
            ]
        },
        "rootDirs": [
            "..",
            "./types"
        ],
        "verbatimModuleSyntax": true,
        "isolatedModules": true,
        "lib": [
            "esnext",
            "DOM",
            "DOM.Iterable"
        ],
        "moduleResolution": "bundler",
        "module": "esnext",
        "noEmit": true,
        "target": "esnext"
    },
    "include": [
        "ambient.d.ts",
        "non-ambient.d.ts",
        "./types/**/$types.d.ts",
        "../vite.config.js",
        "../vite.config.ts",
        "../src/**/*.js",
        "../src/**/*.ts",
        "../src/**/*.svelte",
        "../tests/**/*.js",
        "../tests/**/*.ts",
        "../tests/**/*.svelte"
    ],
    "exclude": [
        "../node_modules/**"
    ]
}

past violet Jan 23, 2024, 10:31 PM

#

everything looks normal to me so far

#

isn't there a node tsconfig file as well?

crystal spear Jan 23, 2024, 10:31 PM

#

yeah, my thought exactly thinkingHD

#

hm?

past violet Jan 23, 2024, 10:31 PM

#

past violet isn't there a node tsconfig file as well?

in the root directory, don't you have 2 tsconfig files?

crystal spear Jan 23, 2024, 10:32 PM

#

#

#

This is compiled as a static site, no server-side js

past violet Jan 23, 2024, 10:33 PM

#

wait, svelte-ts or svelte-kit preset?

crystal spear Jan 23, 2024, 10:34 PM

#

svelte-kit

past violet Jan 23, 2024, 10:34 PM

#

that's not a Vite project, right?

crystal spear Jan 23, 2024, 10:34 PM

#

it is

past violet Jan 23, 2024, 10:35 PM

#

you just happen to use vite to ssr your site

#

but it's not a base Vite template

#

as listed on https://vitejs.dev/guide/

Vite

Next Generation Frontend Tooling

#

you didn't use Vite to scaffold your project

#

it's just a normal svelte-kit project

crystal spear Jan 23, 2024, 10:36 PM

#

npm create svelte@latest my-app
cd my-app
npm i -D esptool-js

#

and then try to use it

crystal spear Jan 23, 2024, 10:36 PM

#

past violet it's just a normal svelte-kit project

yeah its a barebones project

#

i changed it to use @sveltejs/adapter-static

crystal spear Jan 23, 2024, 10:37 PM

#

past violet you didn't use Vite to scaffold your project

sveltekit scaffolder does that for me

#

well full setup i did looks like this:
skeleton scaffolder -> sveltekit scaffolder -> vite scaffolder

#

but that its a https://www.skeleton.dev/ project really shouldnt matter because its just a UI framework on top of svelte on top of vite

Skeleton

Skeleton — UI Toolkit for Svelte + Tailwind

Skeleton is a fully featured UI Toolkit for building reactive interfaces quickly using Svelte and Tailwind.

past violet Jan 23, 2024, 10:45 PM

#

ok, I have no clue how Svelte and SvelteKit work, and how the library works either

#

but installed the deps, imported some stuff from the lib

#

and while serving the site in dev mode, I don't have any import problems

#

building the app worked as well

#

only thing to notice is that verbatimModuleSyntax is enabled by default, so you can only import IEspLoaderTerminal by using a type-only import

crystal spear Jan 23, 2024, 10:50 PM

#

hmm

#

you diffed our package and tsconfig?

#

imma try to create a brand new project

past violet Jan 23, 2024, 10:52 PM

#

I didn't change any of the default

#

and everything you've shared so far is similar to what I have

crystal spear Jan 23, 2024, 10:55 PM

#

My package.json:

#

{
    "name": "frontend",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "test": "npm run test:integration && npm run test:unit",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --check . && eslint .",
        "format": "prettier --write .",
        "test:integration": "playwright test",
        "test:unit": "vitest"
    },
    "devDependencies": {
        "@microsoft/signalr": "^8.0.0",
        "@playwright/test": "^1.28.1",
        "@sentry/svelte": "^7.86.0",
        "@skeletonlabs/skeleton": "2.7.1",
        "@skeletonlabs/tw-plugin": "0.3.1",
        "@sveltejs/adapter-static": "^3.0.1",
        "@sveltejs/kit": "^2.0.0",
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "@tailwindcss/forms": "0.5.7",
        "@tailwindcss/typography": "0.5.10",
        "@types/crypto-js": "^4.2.2",
        "@types/eslint": "8.56.0",
        "@types/node": "20.11.5",
        "@types/w3c-web-serial": "^1.0.6",
        "@typescript-eslint/eslint-plugin": "^6.0.0",
        "@typescript-eslint/parser": "^6.0.0",
        "autoprefixer": "10.4.17",
        "bowser": "^2.11.0",
        "crypto-js": "^4.2.0",
        "eslint": "^8.56.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-svelte": "^2.35.1",
        "esptool-js": "^0.3.2",
        "postcss": "8.4.33",
        "prettier": "^3.1.1",
        "prettier-plugin-svelte": "^3.1.2",
        "svelte": "^4.2.7",
        "svelte-check": "^3.6.0",
        "tailwindcss": "3.4.1",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^5.0.3",
        "vite-plugin-tailwind-purgecss": "0.2.0",
        "vitest": "^1.2.0"
    },
    "type": "module",
    "dependencies": {
        "@floating-ui/dom": "1.5.4",
        "highlight.js": "11.9.0"
    }
}

#

im setting one up from scratch rn

#

trying to reproduce issue

past violet Jan 23, 2024, 10:56 PM

#

crystal spear ``` { "name": "frontend", "version": "0.0.1", "private": true, "...

the only thing I could see that could cause issues is type: "module", but it's set by default

crystal spear Jan 23, 2024, 11:05 PM

#

ok

#

@past violet

#

i reproduced it

#

give me a min

#

npm create skeleton-app@latest my-skeleton-app
cd .\my-skeleton-app\
npm i -D esptool-js @types/w3c-web-serial

routes/+page.svelte

<script lang="ts">
    import { ESPTest } from '$lib';
</script>

<p>test: {ESPTest()}</p>

lib/index.ts

import { ESPLoader, Transport, type LoaderOptions } from 'esptool-js';

export async function ESPTest() {
    const port = await navigator.serial.requestPort();

    const transport = new Transport(port);

    const flashOptions = {
        transport,
        baudrate: 115200
    } as LoaderOptions;

    const loader = new ESPLoader(flashOptions);

    return { loader, transport };
}

npm run dev

#

what node version are you on?

past violet Jan 23, 2024, 11:11 PM

#

@crystal spear if you switch to the adapter-static adapter, and copy the recommended config, everthing works again

crystal spear Jan 23, 2024, 11:12 PM

#

the recommended config?

past violet Jan 23, 2024, 11:12 PM

#

https://kit.svelte.dev/docs/adapter-static

SvelteKit docs

Static site generation • SvelteKit documentation

#

import adapter from '@sveltejs/adapter-static';

export default {
    kit: {
        adapter: adapter({
            // default options are shown. On some platforms
            // these options are set automatically — see below
            pages: 'build',
            assets: 'build',
            fallback: undefined,
            precompress: false,
            strict: true
        })
    }
};

#

...and add the prerender option to your root layout:

#

Before you can deploy your SvelteKit app, you need to adapt it for your deployment target. Adapters are small plugins that take the built app as input and generate output for deployment.

crystal spear Jan 23, 2024, 11:16 PM

#

hm doesnt seem to be working

#

deleting .svelte-kit folder and trying again

past violet Jan 23, 2024, 11:17 PM

#

did you restart the dev server?

crystal spear Jan 23, 2024, 11:17 PM

#

yup

past violet Jan 23, 2024, 11:18 PM

#

wait, now I have it building using the default adapter-auto

crystal spear Jan 23, 2024, 11:18 PM

#

thinkeyes

past violet Jan 23, 2024, 11:18 PM

#

I guess installing @sveltejs/adapter-static did fit it

#

even tho I'm not actively using it

#

just make sure you actually have one adapter for your target

crystal spear Jan 23, 2024, 11:19 PM

#

mhm using static atm

#

them tried to open in browser, and it all fails

past violet Jan 23, 2024, 11:20 PM

#

past violet just make sure you actually have one adapter for your target

because the adapter-auto will decide which one to use
but you need to have one installed, which isn't by default

#

thonk

#

wait, it's very inconsitent

#

one time it builds no problem

#

and if I run the same command again it doesn't work suddenly

#

oh, actually
starting the dev server works, but when you actually go on to the page, it tries to compile that bit and fails

crystal spear Jan 23, 2024, 11:23 PM

#

mhm

#

just run the build command

#

seems to be more consise

past violet Jan 23, 2024, 11:25 PM

#

import { Transport, ESPLoader } from "esptool-js";
^^^^^^^^^
SyntaxError: Named export 'ESPLoader' not found. The requested module 'esptool-js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'esptool-js';
const { Transport, ESPLoader } = pkg;

#

wait, I think I know

#

could be that the lib is just broken?

#

it's detected as CJS, but in reality the lib is ESM

crystal spear Jan 23, 2024, 11:27 PM

#

i hope not

past violet Jan 23, 2024, 11:27 PM

#

that's simply because the authors forgot to set type: "module" in the package.json

crystal spear Jan 23, 2024, 11:28 PM

#

someone as big as Espressif just....

#

forgot?

#

StareChamp

past violet Jan 23, 2024, 11:29 PM

#

guess it really depends on the bundler you use and how they check for CJS/ESM

crystal spear Jan 23, 2024, 11:30 PM

#

is there any way i can just

#

fork and npm it myslef

#

a pr would take weeks

past violet Jan 23, 2024, 11:30 PM

#

crystal spear fork and npm it myslef

would not recommend

#

you could patch the lib locally, but not 100% this is the problem in the 1st place

crystal spear Jan 23, 2024, 11:31 PM

#

are we completely sure?

past violet Jan 23, 2024, 11:34 PM

#

I guess you could try something like https://esbuild.github.io/api/#how-conditions-work

esbuild - API

crystal spear Jan 23, 2024, 11:34 PM

#

#

past violet Jan 23, 2024, 11:36 PM

#

you should explain the problem you are facing and why your solution is the correct way of doing things
rather than simply opening a PR and expecting it to be merged asap without providing any extra info

crystal spear Jan 23, 2024, 11:37 PM

#

will do

#

does this issue happen in sveltekit?

#

or vite?

#

i want to narrow it down

#

minimal example

past violet Jan 23, 2024, 11:38 PM

#

also "type": "module" is still node-specific iirc
so no clue what they are trying to achieve, comply with ecmascript standards? or node-compliant? etc.

past violet Jan 23, 2024, 11:38 PM

#

crystal spear does this issue happen in sveltekit?

not, it's a problem between the lib and the bundler I guess

#

your project uses SvelteKit, SvelteKit uses Vite, Vite uses esbuild
and esbuild is trying to bundle esptool-js but using the wrong file

crystal spear Jan 23, 2024, 11:39 PM

#

honestly I dont have enough knowledge to write a proper PR on this

#

#

esbuild is at the very bottom of this got it

past violet Jan 23, 2024, 11:40 PM

#

but esbuild isn't the problem

crystal spear Jan 23, 2024, 11:40 PM

#

the library decleration is?

past violet Jan 23, 2024, 11:41 PM

#

not sure

#

providing main, module, and browser should be enough

#

and the bundler should be able to pick the right file

#

but here it's picking the wrong one, or at least is expecting a different module system for the one it picks

crystal spear Jan 23, 2024, 11:43 PM

#

https://github.com/evanw/esbuild/issues/2420

GitHub

esbuild selecting incorrect files when bundling · Issue #2420 · eva...

I'm not sure I'll be able to fully articulate the issue here, and I can't produce a minimal failure case. I have a 1st party dependency which then itself depends on d3 to produce bar ch...

#

#

is this related?

past violet Jan 23, 2024, 11:43 PM

#

not sure if statically building the website makes the compiler swicth to CJS or something

past violet Jan 23, 2024, 11:44 PM

#

crystal spear

sounds somewhat related but still different

#

there, the real difference was browser env vs. ESM

#

here we'd like to know why it thinks the module is "CJS"

#

maybe passing additional debug flags to esbuild when building would help

crystal spear Jan 23, 2024, 11:45 PM

#

how would we do that? xd

past violet Jan 23, 2024, 11:46 PM

#

https://vitejs.dev/config/shared-options.html#esbuild
or
https://vitejs.dev/config/build-options.html#build-rollupoptions

#

maybe https://vitejs.dev/config/ssr-options.html#ssr-resolve-externalconditions could help, idk

#

but anyway, there is still something a bit wrong with that library
because of the main property pointing to an ESM file inside of a CJS, like it would normally be the case for node

#

probably messes with the bundler

crystal spear Jan 23, 2024, 11:55 PM

#

hm...

crystal spear Jan 23, 2024, 11:57 PM

#

past violet but anyway, there is still something a bit wrong with that library because of th...

how is it inside of a CJS?

#

i dont see that

crystal spear Jan 24, 2024, 11:30 AM

#

@past violet I have a really cursed fix

#

Im going to do a pre-build script

#

Goes in and modifies the node package

#

Adds type: module

#

And renames files to .mjs

past violet Jan 24, 2024, 11:31 AM

#

does it work?

crystal spear Jan 24, 2024, 11:31 AM

#

Idk yet

#

Just thought of it

#

I hate this with a passion

crystal spear Jan 24, 2024, 12:53 PM

#

https://www.npmjs.com/package/patch-package

npm

patch-package

Fix broken node modules with no fuss. Latest version: 8.0.0, last published: 6 months ago. Start using patch-package in your project by running npm i patch-package. There are 839 other projects in the npm registry using patch-package.

#

Imma use this

crystal spear Jan 24, 2024, 1:24 PM

#

@past violet i fixed it

#

esptool-js+0.3.2.patch

diff --git a/node_modules/esptool-js/lib/esploader.js b/node_modules/esptool-js/lib/esploader.js
index fe979ac..3ac57ce 100644
--- a/node_modules/esptool-js/lib/esploader.js
+++ b/node_modules/esptool-js/lib/esploader.js
@@ -1,7 +1,7 @@
-import { ESPError } from "./error";
+import { ESPError } from "./error.js";
 import { deflate, Inflate } from "pako";
-import { Transport } from "./webserial";
-import { customReset, usbJTAGSerialReset } from "./reset";
+import { Transport } from "./webserial.js";
+import { customReset, usbJTAGSerialReset } from "./reset.js";
 async function magic2Chip(magic) {
     switch (magic) {
         case 0x00f01d83: {
diff --git a/node_modules/esptool-js/lib/index.js b/node_modules/esptool-js/lib/index.js
index c4e4046..9e97eef 100644
--- a/node_modules/esptool-js/lib/index.js
+++ b/node_modules/esptool-js/lib/index.js
@@ -1,2 +1,2 @@
-export { ESPLoader } from "./esploader";
-export { Transport } from "./webserial";
+export { ESPLoader } from "./esploader.js";
+export { Transport } from "./webserial.js";
diff --git a/node_modules/esptool-js/package.json b/node_modules/esptool-js/package.json
index 5cbd77d..d55fe74 100644
--- a/node_modules/esptool-js/package.json
+++ b/node_modules/esptool-js/package.json
@@ -1,6 +1,7 @@
 {
   "name": "esptool-js",
   "version": "0.3.2",
+  "type": "module",
   "module": "lib/index.js",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

#

and then just run

#

npx patch-package

#

its horrible

#

but

#

ShrugQueen

past violet Jan 24, 2024, 1:25 PM

#

yeah, idk, the package is kinda broken in the first place

#

maybe just open a GH issue to ask with they didn't set the type: "module" and used proper ES imports with the file extension, as required by the node-esm syntax

crystal spear Jan 24, 2024, 1:27 PM

#

i already did

#[External SyntaxError] Unable to import npm package into SvelteKit project