Directory import is not supported resolving ES modules imported /.svelte/output/server/app.js #612
Comments
|
One option that works is importing from |
|
@babichjacob it doesn't seem to work for me. When I try that then rollup complains during the build process that it can't resolve "rxjs/operators/index.js" Rollup failed to resolve import "rxjs/operators/index.js" from "src/swr.ts".Error: [vite]: Rollup failed to resolve import "rxjs/operators/index.js" from "src/swr.ts". I also tried this: Rollup failed to resolve import "rxjs/dist/types/operators/index" from "src/swr.ts".Error: [vite]: Rollup failed to resolve import "rxjs/dist/types/operators/index" from "src/swr.ts". editI can get build to finish without an error by using To the |
|
Similar issues with Firebase Admin and Amazon S3 SDK. Everything works fine in dev, but on build: for Amazon S3 SDK, Any help would be greatly appreciated, thanks! |
|
Specifically this seems quite related to this upstream issue: and this note: https://nodejs.org/api/esm.html#esm_customizing_esm_specifier_resolution_algorithm
For the However my new error is Which I have to imagine is due to the indirection of the package.json file inside of the operators folder I was able to add inside of rxjs's root rxjs workaround
In your src file: |
|
I have the same issue with the Firebase JS SDK (which is supposed to work in server and browser environments https://firebase.google.com/docs/web/environments-js-sdk). As a workaround, I tried importing import firebase from 'firebase/app/dist/index.cjs';instead of import firebase from 'firebase/app';This, however, throws errors on execution (on Firebase functions) and prints the following warning on build time: The warning is kind of confusing, because When running |
|
I solve this issues. But it's a temporary solution. Waiting the best solution.... import {share, filter, map, finalize} from "rxjs/dist/cjs/operators/index.js";
to
import { map } from 'rxjs/internal/operators/map.js';
import { filter } from 'rxjs/internal/operators/filter.js';
import { share } from 'rxjs/internal/operators/share.js';
import { finalize } from 'rxjs/internal/operators/finalize.js'; |
|
None of these workarounds work for me because |
|
Hi all, I have a fix for rxjs ReactiveX/rxjs#6192 IMHO this is not a problem with sveltekit, and rather is a challenge with the node ecosystem. Since sveltekit is using The path for fixing things is going to be to send PRs upstream to your libraries to fix. @Rich-Harris @benmccann +1 to close this issue imho. |
In order for module resolution to work with .mjs or package: module code we need to utilize the conditional export feature of node. > The current specifier resolution does not support all default behavior of the CommonJS loader. One of the behavior differences is automatic resolution of file extensions and the ability to import directories that have an index file. https://nodejs.org/api/esm.html#esm_customizing_esm_specifier_resolution_algorithm https://nodejs.org/api/packages.html#packages_conditional_exports This directly enables rxjs to work with mjs code and commonjs code since mjs does not support loading bare folder paths. This is a fix to: sveltejs/kit#612 and is directly related to the conversation in this issue within node core nodejs/node#27408
In order for module resolution to work with .mjs or package: module code we need to utilize the conditional export feature of node. > The current specifier resolution does not support all default behavior of the CommonJS loader. One of the behavior differences is automatic resolution of file extensions and the ability to import directories that have an index file. https://nodejs.org/api/esm.html#esm_customizing_esm_specifier_resolution_algorithm https://nodejs.org/api/packages.html#packages_conditional_exports This directly enables rxjs to work with mjs code and commonjs code since mjs does not support loading bare folder paths. This is a fix to: sveltejs/kit#612 and is directly related to the conversation in this issue within node core nodejs/node#27408
|
Even though SvelteKit projects default to |
…oading. In order for module resolution to work with .mjs or package: module code we need to utilize the conditional export feature of node. > The current specifier resolution does not support all default behavior of the CommonJS loader. One of the behavior differences is automatic resolution of file extensions and the ability to import directories that have an index file. https://nodejs.org/api/esm.html#esm_customizing_esm_specifier_resolution_algorithm https://nodejs.org/api/packages.html#packages_conditional_exports This directly enables rxjs to work with mjs code and commonjs code since mjs does not support loading bare folder paths. This is a fix to: sveltejs/kit#612 and is directly related to the conversation in this issue within node core nodejs/node#27408
…oading. (#6192) * feat(esm): Add exports within package.json to enable scoped package loading. In order for module resolution to work with .mjs or package: module code we need to utilize the conditional export feature of node. > The current specifier resolution does not support all default behavior of the CommonJS loader. One of the behavior differences is automatic resolution of file extensions and the ability to import directories that have an index file. https://nodejs.org/api/esm.html#esm_customizing_esm_specifier_resolution_algorithm https://nodejs.org/api/packages.html#packages_conditional_exports This directly enables rxjs to work with mjs code and commonjs code since mjs does not support loading bare folder paths. This is a fix to: sveltejs/kit#612 and is directly related to the conversation in this issue within node core nodejs/node#27408 * feat(esm): Add test case for esm imports. Context: sveltejs/kit#612 nodejs/node#27408
|
Thanks to @samccone, that fix is in and deployed in |
I agree with @samccone. For Firebase users.. Google just released a modularized SDK in Alpha earlier this year: https://modularfirebase.web.app |
|
@lschmierer I've been trying to get the modularized Firebase SDK to work client and server side with no success in solving this module resolution error. See my repro at https://github.com/jwrunner/SSR-import-firebase-exp-bug which I used as a starter for adding the exports (listed below) to the firebase/app/package.json in an attempt to sniff out a possible bug fix to contribute to the firebase@exp repo. The following didn't help: @samccone Any pointers on how to proceed with a bug fix for the modular Firebase package? |
|
@jwrunner I am sorry, I haven’t actually tried using the modularized SDK. |
|
Also I just tried it with the new modularized firebase and it doesn't work. I still get the same error in de build process. |
|
I am currently getting the same error. Trying to generate a SPA for firebase hosting, but i am getting the following error |
|
For Firebase, please use SDK v9 which provides a modular SDK approach that's currently in beta. The old versions are very difficult to get working especially with SSR and also resulted in a much larger client download size. |
|
@benmccann I encountered some issues with the ESM v9 build, namely with the functions import. It has some top-level code that runs on- mport that references I've found a temporary fix by moving firebase into There's a detailed description and example at firebase/firebase-js-sdk#4846 |
|
For compatibility with deno... I just went ahead and added all my extensions... I had already mostly done that during the MJS era. It should be easy to make a js script to go though all your source and replace anything missing an extension to .js or index.js if it doesn't exist. Regex for finding scripts without extensions In Code, for unnamed CJS package exports: ReplaceAll: |
Describe the bug
When running
npm run buildon a project that uses RxJS I get the following error:If I indeed manually change that line in
/.svelte/output/server/app.jsfrom this:To this:
then I can successfully run
npm run startand everything works.To Reproduce
Just install RxJS and import some operators somewhere. I tested this on kit version
1.0.0-next.55.Expected behavior
This to just work without a hitch.
Stacktrace
Stack trace
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/evert/Sites/svelte-kit-tailwind-jit/node_modules/rxjs/operators' is not supported resolving ES modules imported from /Users/evert/Sites/svelte-kit-tailwind-jit/.svelte/output/server/app.js
Did you mean to import rxjs/dist/cjs/operators/index.js?
at new NodeError (node:internal/errors:329:5)
at finalizeResolution (node:internal/modules/esm/resolve:319:17)
at moduleResolve (node:internal/modules/esm/resolve:758:10)
at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:869:11)
at Loader.resolve (node:internal/modules/esm/loader:86:40)
at Loader.getModuleJob (node:internal/modules/esm/loader:230:28)
at ModuleWrap. (node:internal/modules/esm/module_job:57:40)
at link (node:internal/modules/esm/module_job:56:36)
Information about your SvelteKit Installation:
The output of `npx envinfo --system --npmPackages svelte,@sveltejs/kit --binaries --browsers`
System:
OS: macOS 11.2.3
CPU: (8) x64 Apple M1
Memory: 19.48 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 15.8.0 - ~/.nvm/versions/node/v15.8.0/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v15.8.0/bin/yarn
npm: 7.6.1 - ~/.nvm/versions/node/v15.8.0/bin/npm
Browsers:
Chrome: 89.0.4389.90
Safari: 14.0.3
npmPackages:
@sveltejs/kit: ^1.0.0-next.55 => 1.0.0-next.55
svelte: ^3.29.0 => 3.35.0
My browser: Chrome
My adapter: adapter-node
Severity
For now I'm just playing around with SvelteKit. So it's okay with me if I can't run
npm run buildas long as I can runnpm run dev, which for now seems to be working fine.The text was updated successfully, but these errors were encountered: