Cannot use import statement outside a module: blocking package upgrade

[hahnrobert]

Describe the bug

Cannot use Firelord in a Sveltekit project but can use it in a pure Svelte-only (not Sveltekit) project.
Since Firelord works with pure Svelte, React and a few other frameworks this clearly seems like a blocking Sveltekit issue -- most likely blocking a few libraries, not just Firelord.

Reproduction

Reproduction steps:

• Repo: https://github.com/hahnrobert/firelord-repro
• npm i && npm run dev

Alternative:

• npm create svelte@latest (select Skeleton app)
• npm i [email protected]
• Add the following to your +page.svelte file:

<script lang="ts">
	import { getFirelord } from 'firelordjs';
</script>

Working pure Svelte-only (no Sveltekit) repo:

• https://github.com/tylim88/firelord-vite-svelte

Logs

Internal server error: Cannot use import statement outside a module
      at internalCompileFunction (node:internal/vm:73:18)
      at wrapSafe (node:internal/modules/cjs/loader:1175:20)
      at Module._compile (node:internal/modules/cjs/loader:1219:27)
      at Module._extensions..js (node:internal/modules/cjs/loader:1309:10)
      at Module.load (node:internal/modules/cjs/loader:1113:32)
      at Module._load (node:internal/modules/cjs/loader:960:12)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:165:29)
      at ModuleJob.run (node:internal/modules/esm/module_job:192:25)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async DefaultModuleLoader.import (node:internal/modules/esm/loader:246:24) (x2)
/Users/rob/workspace/firelord_repro/node_modules/firelordjs/dist/index.js:21
import { docCreator, collectionCreator, collectionGroupCreator, andCreator, orCreator, } from './refs';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1175:20)
    at Module._compile (node:internal/modules/cjs/loader:1219:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1309:10)
    at Module.load (node:internal/modules/cjs/loader:1113:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:165:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:192:25)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async DefaultModuleLoader.import (node:internal/modules/esm/loader:246:24)

System Info

System:
    OS: macOS 13.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 4.84 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.3.0 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 108.0.5359.94
    Edge: 114.0.1823.43
    Firefox: 99.0.1
    Safari: 16.5
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0 
    @sveltejs/kit: ^1.5.0 => 1.20.2 
    svelte: ^3.54.0 => 3.59.1 
    vite: ^4.3.0 => 4.3.9

Severity

blocking an upgrade

Additional Information

No response

[Conduitry]

This is a bug in the packaging of that library. They are shipping .js files that are ESM, but they do not have "type": "module" in their package.json. https://nodejs.org/dist/latest/docs/api/packages.html#type

[tylim88]

that is because it is not an ESM, the reason I do not transpile import statement is because of this firebase issue firebase/firebase-js-sdk#7135

unfortunately there is nothing much I can do, other than hoping for bundler able to deal with import statement from non ESM

[tylim88]

update: after giving it some thoughts, my guess is, if build tools can resolve import in non ESM, then they definitely can work with ESM, so I change my package to ESM

I tested both non ESM and ESM

results:

1. Non ESM (without "type": "module" in package.json)

• ✅work with react-sctipts(v5.0.1)
• ✅work with @vitejs/plugin-react-swc
• ✅work with @sveltejs/vite-plugin-svelte
• ✅work with nextjs with next-transpile-modules
• ❌does not work with @sveltejs/kit/vite

2. ESM (add "type": "module" in package.json)

• ✅work with @vitejs/plugin-react-swc
• ✅work with @sveltejs/vite-plugin-svelte
• ✅work with nextjs with next-transpile-modules
• ❌does not work with react-sctipts(v5.0.1), "type": "module" with React. [module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'] facebook/create-react-app#11865
• ❌still does not work with @sveltejs/kit/vite because of Directory import is not supported resolving ES modules imported /.svelte/output/server/app.js #612
  
  repo: https://github.com/tylim88/firelord-vite-svelte-2
  update: wrong repo, should be https://github.com/tylim88/firelord-vite-svelte-3

I want to keep the non ESM because it works with most build tools but I can give up react-sctipts because it is dying anyway

but how can I solve the “Directory import is not supported resolving ES modules” error, @Conduitry?

Should I open a new issue or continue it here or #612?

[ghostdevv]

I would imagine that instead of importing from dist/refs you want dist/refs/index.js

[tylim88]

@ghostdevv if I fix this, there will be a new one

note: I corrected the repo link in my previous comment so you can reproduce it

I need to go to node_modules/firelord/dist and fix every single import, the experience is terrible, I definitely don't want my users to do that

Currently my best option is to release Non ESM package with import statement because it is compatible with most build tools (as shown in my previous comment)

but since react-scripts is dying, I am willing to give up create-react-app and release a real ESM package, which is unfortunately also does not work properly with svelte kit

CommonJS package works with svelte kit. This surprised me because CommonJS does not works with other build tools (it will break them, see firebase fked up)

Should I release a CommonJS variant only to support svelte kit users?

Maybe, but I prefer svelte kit solves this issue, this will make not only me, but also others library author job easier