typia: Can't make it work with Vite/Svelte

Hello. I’d love to test this, but I just can’t make it work with Vite. Tried for days, and nothing. It always throws:

module.ts:653 Uncaught Error: Error on typia.is(): no transform has been configured. Read and follow https://typia.io/docs/setup please

I followed the setup guide, tried the npx typia setup method, the manual installation, and no deal.

I’ve created my test repo using these steps:

pnpm create vite@latest vite-svelte  # then:  Svelte > Typescript
cd vite-svelte
pnpm i -D typia
pnpm i -D rollup-plugin-typescript2 typescript tslib
npx typia setup # then: pnpm > tsconfig.json
pnpm run dev

I checked, and the transformer plugin is in place:

 "plugins": [
      {
        "transform": "typia/lib/transform"
      }
    ],

Until here, project loads normally. Then when I edit App.svelte to include:

  import typia, { tags } from "typia";

  const matched: boolean = typia.is<IMember>({
    email: "samchon.github@gmai19l.com",
    age: 30,
  });

  console.log(matched); // true

  interface IMember {
    email: string & tags.Format<"email">;
    age: number &
      tags.Type<"uint32"> &
      tags.ExclusiveMinimum<19> &
      tags.Maximum<100>;
  }

and as I save, immediately, the error above is thrown.

I’ve uploaded my repository into here: https://github.com/howesteve/typia-test/

Any clues? Is there any bare-bones repository of this actually running with vite?

Thanks.

About this issue

Original URL
State: open
Created 10 months ago
Reactions: 2
Comments: 25 (17 by maintainers)

Links to this issue

Introducing ts_quote: tools for generating TypeScript code from Rust

Most upvoted comments

@a-kla Thank you so much for your answer !

managed to finally make it work with this in vite.config.ts :

" include: [“…/…/**/*.ts+(|x)”],"

MarArMar on Nov 23, 2023

@MarArMar Do you need pnpm-workspaces? Without it I can use TS. This seems to be a Bug in Vite: https://github.com/vitejs/vite/issues/5370

Try this: Move /packages/common/lib/log-ts.ts to apps/SKImportTS/src/lib/log-ts.ts and use import { log, messageLoaded } from "$lib/log-ts" // was "common/lib/log-ts";

And I don’t need check: false but "sourceMap": false, in tsconfig.json to suppress all […] .ts" points to missing source files' messages. The funny thing is that the Source-Maps are still there and working.

a-kla on Nov 12, 2023

I use Typia with SvelteKit (+ MDsveX) and din’t need to modify any code.

My vite.config.ts is like the Docs says:

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

export default defineConfig({
	esbuild: false,
	plugins: [ sveltekit(), typescript()]
});

Typia is not working inside *.svelte files. But on *.ts files that can be imported.

My Workaround looks like this:

// Example.ts
import typia, { tags } from "typia";

export type Example = {
	Id: string & tags.MinLength<12>;
	Date: string & tags.Format<"date">;
	editable: boolean;
}

export const ExampleToJson = typia.json.createAssertStringify<Example>();
export const ExampleFromJson = typia.json.createAssertParse<Example>();
export const ExampleWithRandomData: Example = typia.random<Example>();

<script lang="ts">
	import type { Example } from '$lib/Example';
	import { ExampleToJson, ExampleWithRandomData } from '$lib/Example';

	let example: Example = ExampleWithRandomData;
	let json = '';

	try {
		json = ExampleToJson(example);
	} catch (error) {
		console.error(error);
	}
	console.log(example);
</script>

{json}

Only that Typia isn’t type-safe if i use it with classes (see #683 ) causes me headaches.

a-kla on Nov 10, 2023