[bug]: Syntax error with every component

[aidanhorton]

Describe the bug

I'm sure this is a silly configuration issue on my end - but I've tried loads of things and cannot figure it out.
I've got a basic SolidJS application, with Firebase too, meaning I've got an index.html file in the root directory.
It has Tailwind installed too.

So far I've tried to import the Button and ComboBox components, but with both of them, I get issues, meaning that they cannot be used.

With the Button I get an issue with CVA:

And also the Button primitive:

And then on every instance of the ComboBox primitive, I get a similar issue:

Not really sure where to start with this - there are still some aspects of web dev I don't fully grasp, but I would expect this to work based on my setup.

I've followed the manual installation steps, so I have updated my tsconfig.json to have the @ directory.
My tailwind.config.cjs is configured correctly.
My app.css file is actually my index.css file, but that also has the same syntax as the installation instructions.
I also have a cn helper.

I'm using NPM rather than PNPM to install single components (npx shadcn-solid@latest add button VS pnpm dlx degit...), as the PNPM variant doesn't seem to work.

I'm kindof at a dead end with this. I could probably fix these individual components, but I don't want to have to fix a component every time I import it, so I'm hoping some configuration issue!

Error below from Vite:

Error: The following dependencies are imported but could not be resolved:

  @/components/ui/button (imported by C:/Source/Non/solid-chess/src/App.tsx)

Are they installed?
    at file:///C:/Source/Non/solid-chess/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:50534:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///C:/Source/Non/solid-chess/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:50039:26
16:29:54 [vite] Pre-transform error: Failed to resolve import "@/components/ui/button" from "src/App.tsx". Does the file exist?
16:29:54 [vite] Internal server error: Failed to resolve import "@/components/ui/button" from "src/App.tsx". Does the file exist?
  Plugin: vite:import-analysis
  File: C:/Source/Non/solid-chess/src/App.tsx:2:21
  5  |  const _REGISTRY = _$$registry();
  6  |  var _tmpl$ = /* @__PURE__ */ _$template(`<div class="flex h-screen"><div class=w-80></div><div class=flex-grow>`);
  7  |  import { Button } from "@/components/ui/button";
     |                          ^
  8  |  const App = _$$component(_REGISTRY, "App", () => {
  9  |    return (() => {
      at TransformPluginContext._formatError (file:///C:/Source/Non/solid-chess/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:49133:41)
      at TransformPluginContext.error (file:///C:/Source/Non/solid-chess/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:49128:16)
      at normalizeUrl (file:///C:/Source/Non/solid-chess/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:63910:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///C:/Source/Non/solid-chess/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:64042:39
      at async Promise.all (index 4)
      at async TransformPluginContext.transform (file:///C:/Source/Non/solid-chess/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:63969:7)
      at async PluginContainer.transform (file:///C:/Source/Non/solid-chess/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:48974:18)
      at async loadAndTransform (file:///C:/Source/Non/solid-chess/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:51796:27)
      at async viteTransformMiddleware (file:///C:/Source/Non/solid-chess/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:61750:24)

Affected component/components

Button, Combobox, potentially more.

How to reproduce

Create a SolidJS TS app from the template.
Install Firebase & init.
Setup ShadCN prerequisites.
Install a component (such as a Button or Combobox).
Use the component. Build fails.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

FireFox.
Typescript 5.5.4
Vite 5.4.0

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[aidanhorton]

Turns out, having this in my vite.config.ts is absolutely critical, and resolves this issue. Can't see it in the documentation so might be worth adding:

Feel free to close.

[hngngn]

Noted, thanks!

[ahmadaccino]

Seems like this is fixed in the docs now: https://shadcn-solid.com/docs/installation/solid-start

@hngngn should this issue be closed?

[hngngn]

I think he's following this https://shadcn-solid.com/docs/installation/manual, and it doesn't have the resolve.alias. That's why I left this open until I or someone updates the docs.