kit: Directory import is not supported resolving ES modules imported /.svelte/output/server/app.js

Hi all, I have a fix for rxjs https://github.com/ReactiveX/rxjs/pull/6192

IMHO this is not a problem with sveltekit, and rather is a challenge with the node ecosystem. Since sveltekit is using package: module I expect we are going to continue to see this class of problem moving forward.

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.

Thanks to @samccone, that fix is in and deployed in rxjs@7.0.0-beta.14.

Even though SvelteKit projects default to "type":"module", we could add a "type":"commonjs" package.json to the built output and target CJS. I suspect that would solve the module resolution errors

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:

[2021-03-28T20:15:57.520Z]  @firebase/app: 
      Warning: This is a browser-targeted Firebase bundle but it appears it is being
      run in a Node environment.  If running in a Node environment, make sure you
      are using the bundle specified by the "main" field in package.json.
      
      If you are using Webpack, you can specify "main" as the first item in
      "resolve.mainFields":
      https://webpack.js.org/configuration/resolve/#resolvemainfields
      
      If using Rollup, use the @rollup/plugin-node-resolve plugin and specify "main"
      as the first item in "mainFields", e.g. ['main', 'module'].
      https://github.com/rollup/@rollup/plugin-node-resolve

The warning is kind of confusing, because dist/index.cjs.js is actually specified as main in node_modules/firebase/app/package.json.

When running svelte-kit dev, everything works as expected, though.

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';

IMHO this is not a problem with sveltekit, and rather is a challenge with the node ecosystem. Since sveltekit is using package: module I expect we are going to continue to see this class of problem moving forward.

I agree with @samccone.

For Firebase users… Google just released a modularized SDK in Alpha earlier this year: https://modularfirebase.web.app