sveltekit and "ReferenceError: exports is not defined" when trying to include component library

[magick93]

Hello

I'm facing similar issues as to what is discussed on #2579.

I'm running into a problem when I try to view my components, from a component library, in the browser.

Background

• I'm working on a sveltekit monorepo powered by turborepo
• I have a components package called ui that I'm adding https://www.shadcn-svelte.com/ components to.

When I add a component from the ui package to the web app and run pnpm dev I get the following error:

  VITE v4.5.0  ready in 2807 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
12:59:54 pm [vite] Error when evaluating SSR module /@fs/home/sarah/git/morg/awesomegame/packages/ui/dist/components/ui/card/index.js:
|- ReferenceError: exports is not defined
    at /home/sarah/git/morg/awesomegame/packages/ui/dist/components/ui/card/index.js:5:23
    at instantiateModule (file:///home/sarah/git/morg/awesomegame/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56052:15)

12:59:54 pm [vite] Error when evaluating SSR module /@fs/home/sarah/git/morg/awesomegame/packages/ui/dist/index.mjs: failed to import "/@fs/home/sarah/git/morg/awesomegame/packages/ui/dist/components/ui/card/index.js"
|- ReferenceError: exports is not defined
    at /home/sarah/git/morg/awesomegame/packages/ui/dist/components/ui/card/index.js:5:23
    at instantiateModule (file:///home/sarah/git/morg/awesomegame/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56052:15)

12:59:54 pm [vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "/@fs/home/sarah/git/morg/awesomegame/packages/ui/dist/index.mjs"
|- ReferenceError: exports is not defined
    at /home/sarah/git/morg/awesomegame/packages/ui/dist/components/ui/card/index.js:5:23
    at instantiateModule (file:///home/sarah/git/morg/awesomegame/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56052:15)

ReferenceError: exports is not defined
    at /home/sarah/git/morg/awesomegame/packages/ui/dist/components/ui/card/index.js:5:23
    at instantiateModule (file:///home/sarah/git/morg/awesomegame/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56052:15)

If I run pnpm check and pnpm build on both the ui and web projects, they complete without any errors.

The file that is mentioned in the stack trace does exist - this is the contents of it:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CardTitle = exports.CardHeader = exports.CardFooter = exports.CardDescription = exports.CardContent = exports.Card = exports.ColorCard = exports.Title = exports.Header = exports.Footer = exports.Description = exports.Content = exports.Root = void 0;
const card_svelte_1 = __importDefault(require("./card.svelte"));
exports.Root = card_svelte_1.default;
exports.Card = card_svelte_1.default;
const card_content_svelte_1 = __importDefault(require("./card-content.svelte"));
exports.Content = card_content_svelte_1.default;
exports.CardContent = card_content_svelte_1.default;
const card_description_svelte_1 = __importDefault(require("./card-description.svelte"));
exports.Description = card_description_svelte_1.default;
exports.CardDescription = card_description_svelte_1.default;
const card_footer_svelte_1 = __importDefault(require("./card-footer.svelte"));
exports.Footer = card_footer_svelte_1.default;
exports.CardFooter = card_footer_svelte_1.default;
const card_header_svelte_1 = __importDefault(require("./card-header.svelte"));
exports.Header = card_header_svelte_1.default;
exports.CardHeader = card_header_svelte_1.default;
const card_title_svelte_1 = __importDefault(require("./card-title.svelte"));
exports.Title = card_title_svelte_1.default;
exports.CardTitle = card_title_svelte_1.default;
const ColorCard_svelte_1 = __importDefault(require("./ColorCard.svelte"));
exports.ColorCard = ColorCard_svelte_1.default;

Svelte Check

Running svelte-kit sync && svelte-check --tsconfig ./tsconfig.json on both the ui package and web app produces:

svelte-check found 0 errors and 0 warnings.

web vite config

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
	plugins: [sveltekit()],
	resolve: {
        preserveSymlinks: true, //also tried 'false'
    },
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	}
});

I've also tried adding the following the vite config, without any success:

optimizeDeps: {
		exclude: ['ui'] // do not pre-bundle some-library
	  },

and then

optimizeDeps: {
		include: ['ui'],
	},

and also

   ssr: {
	   	noExternal: ['ui'],
	   },

+page.svelte

I've tried both import * as Card from "ui"; and import Card from "ui";. Same error with both.

app.html

I tried adding <script>var exports = {};</script> to the head. This did not solve the issue.

index.mjs in ui project

Tried changing

export * from "./components/ui/card/index.js";

to

import * as Card from "./components/ui/card/index.js";
export default Card;

Also tried:

import {default as Card} from "./components/ui/card/index.js";
export {Card};

I also tried export * as default from "./components/ui/card/index.js"; which resulted in Error: Parse failure: Unexpected keyword 'default'.

Also tried renaming index.cjs to index.js (also update reference to this file in the package.json.
Still no joy.

tsconfig.json of web

Tried adding:

• "module": "esnext", also tried "module": "es6",
• "allowSyntheticDefaultImports": true,

Any help is greatly appreciated.

[ticup]

I'm having the exact same issue, tried all possible options as well.

[dum3ng]

This works for me:

1. change the tsconfig.json of ui package to

"module": "ESNext",
"moduleResolution": "Bundler"

2, change svelte.config.js of ui package to

config = {
	// ...other config
   comilerOptions: {
		generate: "ssr"
	}
}

[rodrigorodriguescosta]

same issue, it didn't work, I'm trying to use grpc-web files