SvelteKit and TypeORM produces errors in both dev and production with minimal repository #3334

Glench · 2022-01-14T03:41:17Z

Glench
Jan 14, 2022

I know that SvelteKit is still in beta and changing a lot, but I'd still like to ask about getting TypeORM to work with the SvelteKit dev server and production node server.

I made a minimal repository with a basic SvelteKit project (using npm init svelte@next) and TypeORM (using all the installation instructions here).

According to the TypeORM docs, my very basic repository shouldn't throw any errors, but it does. So this seems like a bug somewhere in the SvelteKit/Vite stack. Both development and production (with adapter-node) throw errors.

When I try to do npm run dev -- I get a warning that import-metadata isn't importing correctly:

reflect-metadata doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

Then I get an exception from TypeORM:

[vite] Error when evaluating SSR module /src/lib/User.ts:
ColumnTypeUndefinedError: Column type for User#id is not defined and cannot be guessed. Make sure you have turned on an "emitDecoratorMetadata": true option in tsconfig.json. Also make sure you have imported "reflect-metadata" on top of the main entry file in your application (before any entity imported).If you are using JavaScript instead of TypeScript you must explicitly provide a column type.

I'm not sure why the reflect-metadata library doesn't seem to be importing correctly. I've tried both import "reflect-metadata" and import * as Reflect from 'reflect-metadata'; but got the same error. Heck, I even tried copying and pasting the JS library into hooks.ts and commenting out the imports, but the same reflect-metadata and TypeORM errors seem to happen.

Right now my assumption is that if the reflect-metadata library can be imported correctly then that would fix the TypeORM error, but I'm not sure. Here's a relevant issue in the SvelteKit Github. I'm hoping that my issue can be solved without opening a new SvelteKit issue but I want to make sure that it's possible to use TypeORM with SvelteKit since it's the most starred JS ORM on Github.

Update 3: After putting reflect-metadata into the SSR external config for vite, the warning goes away but TypeORM still doesn't work. Same errors as listed in dev.

Also, when running npm run build with adapter-node, this error happens:

import { PrimaryGeneratedColumn, Column, Entity, BaseEntity } from "typeorm";
                                                 ^^^^^^^^^^
SyntaxError: Named export 'BaseEntity' not found. The requested module 'typeorm' 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 'typeorm';
const { PrimaryGeneratedColumn, Column, Entity, BaseEntity } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async prerender (file:///Users/glen/tmp/sveltekit-typeorm-test/node_modules/@sveltejs/kit/dist/chunks/index5.js:352:28)
    at async Object.prerender (file:///Users/glen/tmp/sveltekit-typeorm-test/node_modules/@sveltejs/kit/dist/chunks/index5.js:728:24)
    at async adapt (file:///Users/glen/tmp/sveltekit-typeorm-test/node_modules/@sveltejs/adapter-node/index.js:39:4)
    at async adapt (file:///Users/glen/tmp/sveltekit-typeorm-test/node_modules/@sveltejs/kit/dist/chunks/index5.js:760:2)
    at async file:///Users/glen/tmp/sveltekit-typeorm-test/node_modules/@sveltejs/kit/dist/cli.js:1053:5

Node.js v17.0.1

BaseEntity is obviously part of the TypeORM library so it's not clear to me what's going on.

If you have any ideas or solutions I'd love to hear them!

Update: @hyunbinseo below found that adding the database type to the Column constructor (e.g. @Column('text')) removes the ColumnTypeUndefinedError. That's a good workaround for now, but doesn't solve the issue that it should work without it, and that it doesn't work when running npm run build with adapter-node.

Update 2: @benmccann suggested using Vite's SSR/external option and that fixed the dev server warnings and errors completely! However, the issue with npm run build still exists.

Update 3: @benmccann's suggestion didn't work after all. I had just tested it wrong. Both npm run dev and npm run build are still broken with the errors shown above.

Glench · 2022-01-29T14:06:38Z

Glench
Jan 29, 2022
Author

Wanted to refresh this issue because it seems important to support the most-starred JS ORM on Github with SvelteKit. I'll be opening an issue if no one has any ideas.

2 replies

hyunbinseo Jan 30, 2022

Please address issues in your reproduction repository before opening an issue. Reference #3334 (comment).

gamelaster Jan 30, 2022

@Glench thank you for bringing up this issue, basically this is only reason I can't use SvelteKit 😞

hyunbinseo · 2022-01-30T01:22:59Z

hyunbinseo
Jan 30, 2022

The provided reproduction repository should first be updated to fix the following issues.

There is a top-level await in src/hooks.js, which shows the following error.

Top-level 'await' expressions are only allowed when the 'module' option is set to 'es2022', 'esnext', 'system', or 'nodenext', and the 'target' option is set to 'es2017' or higher.ts(1378)

hooks.js file is not following the required format. Reference documentation.

2 replies

Glench Jan 30, 2022
Author

Fixed the await thing, but hooks doesn't need to have any functions exported. Also you missed where I included "emitDecoratorMetadata" right at the top of tsconfig.json. Look again. I also just npm updated so it's the latest version of everything. Try again.

hyunbinseo Jan 30, 2022

My bad. Updated the comment regarding tsconfig.json and package-lock.json.

hyunbinseo · 2022-01-30T02:35:12Z

hyunbinseo
Jan 30, 2022

Please check the following PR - Glench/sveltekit-typeorm-test#1.

Regarding the following error, reference Why can't reflect-metadata be used in vite.

reflect-metadata doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

Vite uses ESBuild which doesn't support "emitDecoratorMetadata" in tsconfig, since ESBuild doesn't have its own type system implemented. Refer to this vitejs/vite#788 for more details on this topic.

5 replies

Glench Jan 30, 2022
Author

If you look at #798 you can see this comment:

esbuild has been removed from adapter-node, so this should work there now. It's still present in adapter-vercel, which is what this issue was originally filed about. I'm not sure why it's still there. Possibly it could be removed with a bit of work. It might be mentioned in one of the resolved reviews on #2931

Type reflection issues #798 (comment)

Glench Jan 30, 2022
Author

So yes, adding the "type" to the Column constructor (e.g. @Column('text')) does seem to fix the errors in development, which is the major change you introduced in your PR. So that's a great step forward! Thanks!

But two issues remain:

According to the TypeORM docs, I shouldn't need to provide the column type. It should be inferred automatically. So my current repository should still work fine.
npm run build still produces an error with adapter-node.

hyunbinseo Jan 30, 2022

Why not edit the discussion and add the above two issues that you faced?

This way, the community members can actually understand what your issues are.

In fact, it should have been added in the first place, especially the issue no. 1.

All you have mentioned in the discussion is the following exception from TypeORM.

[vite] Error when evaluating SSR module /src/lib/User.ts:
ColumnTypeUndefinedError: Column type for User#id is not defined and cannot be guessed. Make sure you have turned on an "emitDecoratorMetadata": true option in tsconfig.json. Also make sure you have imported "reflect-metadata" on top of the main entry file in your application (before any entity imported).If you are using JavaScript instead of TypeScript you must explicitly provide a column type.

Glench Jan 30, 2022
Author

Good idea!

Glench Jan 30, 2022
Author

Done, made the title reflect the actual issues and mentioned your workaround. I think this is entering reportable bug territory.

benmccann · 2022-01-30T17:29:43Z

benmccann
Jan 30, 2022
Maintainer

reflect-metadata doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

That comes from this line:
https://github.com/vitejs/vite/blob/a4895ed9d71531c71243ffcb3aab465ecd5694a0/packages/vite/src/node/ssr/ssrExternal.ts#L170

You can see that it checks if it's CJS with:

const CJS_CONTENT_RE =
  /\bmodule\.exports\b|\bexports[.\[]|\brequire\s*\(|\bObject\.(defineProperty|defineProperties|assign)\s*\(\s*exports\b/

reflect-metadata's Reflect.js does not have module, exports, or require in it, which is why it's not being detected as CommonJS

You could manually add it to Vite's ssr.external since it can't be autodetected as CJS

7 replies

benmccann Jan 31, 2022
Maintainer

I think with build it will depend on the deployment platform. The adapters using esbuild will need extra work (i.e. Cloudflare and Vercel if my memory is correct) and will need to investigate the solutions above or in other threads. If you used an adapter without esbuild (e.g. adapter-node or adapter-netlify I believe) then you'll likely face fewer struggles

Glench Jan 31, 2022
Author

Hm ok, thanks for the clarification. I'm actually using adapter-node though :/

Glench Jan 31, 2022
Author

Wait actually I tried again and your solution with SSR external didn't actually work. Dev is still broken. I had old code in my repo.

lkj4 May 5, 2022

@Glench did you get it working? I tried following and still get the error in production builds:

 import preprocess from 'svelte-preprocess'
 import adapter from '@sveltejs/adapter-node'

 export default {
   preprocess: preprocess(),
   kit: {
     adapter: adapter({ out: 'my-output-directory' }),
   },
   vite: {
     ssr: {
       external: ['reflect-metadata'],
     },
   },
 }

benmccann May 5, 2022
Maintainer

I've sent vitejs/vite#8033 to fix this. It would probably be a Vite 3 improvement though so you might have to wait a couple months

mustofa-id · 2022-02-12T11:30:41Z

mustofa-id
Feb 12, 2022

Specify column type as mention above and using default import seem work well for me in dev and build. Here example.

1 reply

Glench Aug 19, 2022
Author

This uses the data mapper pattern but doesn't allow the ActiveRecord pattern as far as I know.

MusiCode1 · 2022-08-16T19:26:19Z

MusiCode1
Aug 16, 2022

Will there be full support for TypeORM for version 1.0.0?

1 reply

benmccann Aug 16, 2022
Maintainer

Is it not working today? If not, please provide a repository that reproduces the issue

TongChia · 2023-01-15T03:16:51Z

TongChia
Jan 15, 2023

still problem with esbuild
but turn it off works

vite.config.ts

import typescript from "@rollup/plugin-typescript";
import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';

const config: UserConfig = {
	plugins: [sveltekit(), typescript()],
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	},
	ssr: {
		external: ["reflect-metadata"]
	},
	esbuild: false
};

export default config;

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SvelteKit and TypeORM produces errors in both dev and production with minimal repository #3334

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 7 comments 18 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

SvelteKit and TypeORM produces errors in both dev and production with minimal repository #3334

Replies: 7 comments · 18 replies

Glench Jan 29, 2022 Author

Glench Jan 30, 2022 Author

Glench Jan 30, 2022 Author

Glench Jan 30, 2022 Author

Glench Jan 30, 2022 Author

Glench Jan 30, 2022 Author

benmccann Jan 30, 2022 Maintainer

benmccann Jan 31, 2022 Maintainer

Glench Jan 31, 2022 Author

Glench Jan 31, 2022 Author

benmccann May 5, 2022 Maintainer

Glench Aug 19, 2022 Author

benmccann Aug 16, 2022 Maintainer

Replies: 7 comments 18 replies

Glench
Jan 29, 2022
Author

Glench Jan 30, 2022
Author

Glench Jan 30, 2022
Author

Glench Jan 30, 2022
Author

Glench Jan 30, 2022
Author

Glench Jan 30, 2022
Author

benmccann
Jan 30, 2022
Maintainer

benmccann Jan 31, 2022
Maintainer

Glench Jan 31, 2022
Author

Glench Jan 31, 2022
Author

benmccann May 5, 2022
Maintainer

Glench Aug 19, 2022
Author

benmccann Aug 16, 2022
Maintainer