Shadcn configuration throwing exceptions

Hilla
1

I am trying to setup shadcn with latest hilla, always getting this:

[plugin:vite:import-analysis] Failed to resolve import “@/components/ui/button” from “src/main/frontend/views/about-hilla.tsx”. Does the file exist?
C:/projects/pos/src/main/frontend/views/about-hilla.tsx:2:21
15 | }
16 | var _jsxFileName = “C:\projects\pos\src\main\frontend\views\about-hilla.tsx”;
17 | import { Button } from “@/components/ui/button”;
| ^
18 | import { jsxDEV as _jsxDEV } from “react/jsx-dev-runtime”;
19 | export const config = {

please help, or if you can point to any updated documentation that would help as well.

I followed this one: https://medium.com/@krishnaraj.sooji/setting-up-shadcn-ui-in-a-hilla-project-eaa47ad722e6, but out of luck.

2

okay, I had updated vite.config.ts with following in custom config:

plugins: [react()],
resolve: {
alias: {
“@”: path.resolve(__dirname, “./src/main/frontend”),
},
},

and now it is failing with the following error:

[plugin:vite:esbuild] Transform failed with 3 errors:
C:/projects/pos/src/main/frontend/views/@layout.tsx:1:856: ERROR: The symbol “inWebWorker” has already been declared
C:/projects/pos/src/main/frontend/views/@layout.tsx:1:952: ERROR: The symbol “prevRefreshReg” has already been declared
C:/projects/pos/src/main/frontend/views/@layout.tsx:1:971: ERROR: The symbol “prevRefreshSig” has already been declared

here is additional trace:

at failureErrorWithLog (C:\projects\pos\node_modules\esbuild\lib\main.js:1472:15)
at C:\projects\pos\node_modules\esbuild\lib\main.js:755:50
at responseCallbacks.<computed> (C:\projects\pos\node_modules\esbuild\lib\main.js:622:9)
at handleIncomingPacket (C:\projects\pos\node_modules\esbuild\lib\main.js:677:12)
at Socket.readFromStdout (C:\projects\pos\node_modules\esbuild\lib\main.js:600:7)
at Socket.emit (node:events:518:28)
at addChunk (node:internal/streams/readable:559:12)
at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
at Readable.push (node:internal/streams/readable:390:5)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23

any suggestions would be very helpful!

3

Here’s what my vite.config.ts looks like (in a project with a working shadcn config)

import path from "node:path";
import type { UserConfigFn } from "vite";
import { overrideVaadinConfig } from "./vite.generated";

const customConfig: UserConfigFn = (env) => ({
	resolve: {
		alias: {
			"@": path.resolve(__dirname, "./src/main/frontend"),
		},
	},
});

export default overrideVaadinConfig(customConfig);

I used the “manual” setup guide as far as i can remember - you need to adapt some steps to vaadin/hilla e.g. baseUrl should remain "src/main/frontend") in the tsconfig.json: Manual Installation - shadcn/ui

1 Like
4

thanks Pascalmh!

the issue in my setup was the react() plugins, I too was able to compile my project successfully after removing that from my custom configuration.