Added shadcn, and now app won't start
[ Wasp ] ext-src/components/foldable-list.tsx(3,24): error TS2307: Cannot find module '@/components/ui/button' or its corresponding type declarations.
[ Wasp ] ext-src/components/foldable-list.tsx(4,26): error TS2307: Cannot find module '@/components/ui/checkbox' or its corresponding type declarations.
[ Wasp ] ext-src/components/foldable-list.tsx(5,26): error TS2307: Cannot find module '@/components/ui/progress' or its corresponding type declarations.
[ Wasp ] ext-src/components/foldable-list.tsx(18,7): error TS2395: Individual declarations in merged declaration 'FoldableList' must be all exported or all local.
[ Wasp ] ext-src/components/foldable-list.tsx(97,17): error TS2395: Individual declarations in merged declaration 'FoldableList' must be all exported or all local.
[ Wasp ] ext-src/components/foldable-list.tsx(129,24): error TS2322: Type '{ items: ListItem[]; }' is not assignable to type 'IntrinsicAttributes'.
[ Wasp ] Property 'items' does not exist on type 'IntrinsicAttributes'.
[ Wasp ] ext-src/components/ui/button.tsx(5,20): error TS2307: Cannot find module '@/lib/utils' or its corresponding type declarations.
[ Wasp ] ext-src/components/ui/checkbox.tsx(5,20): error TS2307: Cannot find module '@/lib/utils' or its corresponding type declarations.
[ Wasp ] ext-src/components/ui/progress.tsx(4,20): error TS2307: Cannot find module '@/lib/utils' or its corresponding type declarations.
5 Replies
Hi @senorioano. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error messages you're seeing indicate that the TypeScript compiler is unable to find the modules you're trying to import in your
foldable-list.tsx, button.tsx, checkbox.tsx, and progress.tsx files. This could be due to a few reasons:
1. The files you're trying to import do not exist at the specified paths. Make sure that the files button.tsx, checkbox.tsx, progress.tsx, and utils.ts exist in the correct directories.
2. The exported names from the modules you're importing do not match what you're trying to import. For example, if you're trying to import a Button component from button.tsx, make sure button.tsx actually exports a Button component.
3. There are issues with your TypeScript configuration. Make sure your tsconfig.json file includes the correct baseUrl and paths configuration.
If you've recently added shadcn to your project, make sure you've followed all the necessary steps to integrate it with your Wasp project. There's a gist (https://gist.github.com/infomiho/b35e9366e16913949e13eaba0538f553) shared by a community member on how to use shadcn with Wasp, which might be helpful.
If none of the above solutions work, you might want to try cleaning your Wasp project by running wasp clean and then wasp start again. This will reinstall and recompile everything for a fresh start (source (https://discord.com/channels/686873244791210014/1215750573278629958)).
If you're still facing issues, it would be helpful to provide more information about your setup, such as your Wasp version, the steps you've taken to add shadcn to your project, and the contents of your tsconfig.json file.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @senorioano, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@kapa.ai yet I defined the paths in the tsconfig.json :
{
"compilerOptions": {
"module": "esnext",
"target": "esnext",
// We're bundling all code in the end so this is the most appropriate option,
// it's also important for autocomplete to work properly.
"moduleResolution": "bundler",
// JSX support
"jsx": "preserve",
"strict": true,
// Allow default imports.
"esModuleInterop": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"typeRoots": [
// This is needed to properly support Vitest testing with jest-dom matchers.
// Types for jest-dom are not recognized automatically and Typescript complains
// about missing types e.g. when using
toBeInTheDocument and other matchers.
"node_modules/@testing-library",
// Specifying type roots overrides the default behavior of looking at the
// node_modules/@types folder so we had to list it explicitly.
// Source 1: https://www.typescriptlang.org/tsconfig#typeRoots
// Source 2: https://github.com/testing-library/jest-dom/issues/546#issuecomment-1889884843
"node_modules/@types"
],
// Since this TS config is used only for IDE support and not for
// compilation, the following directory doesn't exist. We need to specify
// it to prevent this error:
// https://stackoverflow.com/questions/42609768/typescript-error-cannot-write-file-because-it-would-overwrite-input-file
"outDir": ".wasp/phantom",
"paths": {
"@/": ["./src/"],
"@/components/ui/button": ["./src/components/ui/button.ts"],
}
}
}
Still same issueStack Overflow
Typescript error "Cannot write file ... because it would overwrite ...
In my Typescript 2.2.1 project in Visual Studio 2015 Update 3, I am getting hundreds of errors in the error list like:
Cannot write file 'C:/{{my-project}}/node_modules/buffer-shims/index.js' be...
GitHub
Property 'toBeInTheDocument' does not exist on type 'JestMatchers' ...
@testing-library/jest-dom version: 6.1.4 node version: 18.17.1 jest version: 29.7.0 npm version: 10.2.0 Other dependencies: Relevant code or config: import { render, screen } from "@testing-li...
TSConfig Reference - Docs on every TSConfig option
From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project.
Let me check the knowledge base for you. One moment! :books:
----------------------
The
tsconfig.json file you've shared seems to be correctly configured for module resolution with the paths option. However, it's important to note that Wasp currently doesn't take the user's tsconfig.json into account when processing code. The tsconfig.json file is only there for IDE support (source (https://discord.com/channels/686873244791210014/1218225782183170158)). This means that the paths you've defined in your tsconfig.json file won't affect how Wasp resolves your imports.
There's an open issue on the Wasp GitHub repository to support custom TypeScript configuration, which would allow users to specify desired flags in their tsconfig.json files and merge it with Wasp's tsconfig.json files (source (https://github.com/wasp-lang/wasp/issues/835)).
In the meantime, you'll need to ensure that your import paths are correct relative to the file you're importing from. If you're still encountering issues, it might be helpful to share the structure of your src directory and the exact import statements you're using.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @senorioano, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?I followed some github issue but now I got this error :
[ Wasp ] ext-src/components/foldable-list.tsx(18,7): error TS2395: Individual declarations in merged declaration 'FoldableList' must be all exported or all local.
[ Wasp ] ext-src/components/foldable-list.tsx(97,17): error TS2395: Individual declarations in merged declaration 'FoldableList' must be all exported or all local.
[ Wasp ] ext-src/components/foldable-list.tsx(129,24): error TS2322: Type '{ items: ListItem[]; }' is not assignable to type 'IntrinsicAttributes'.
[ Wasp ] Property 'items' does not exist on type 'IntrinsicAttributes'.
@kapa.ai
Let me check the knowledge base for you. One moment! :books:
----------------------
The errors you're seeing are TypeScript errors related to your
FoldableList component.
1. error TS2395: Individual declarations in merged declaration 'FoldableList' must be all exported or all local.
This error occurs when you have multiple declarations of the same name (in this case, FoldableList), but some are exported and some are not. In TypeScript, all merged declarations must either be exported or local. You should check your foldable-list.tsx file and ensure that all declarations of FoldableList are consistently either exported or local.
2. error TS2322: Type '{ items: ListItem[]; }' is not assignable to type 'IntrinsicAttributes'. Property 'items' does not exist on type 'IntrinsicAttributes'.
This error occurs when you're trying to pass a prop (items) to a component (FoldableList), but TypeScript can't find that prop in the component's props type. You should check the props type of your FoldableList component and ensure that it includes an items prop of type ListItem[].
Without seeing the actual code of your FoldableList component, it's hard to provide a more specific solution. However, these general guidelines should help you resolve the issues. If you're still encountering problems, you might want to consider asking for help on the Wasp Discord server (https://discord.com/channels/686873244791210014/1190363293165035560) or opening an issue on the Wasp GitHub repository (https://github.com/wasp-lang/wasp/issues).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @senorioano, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?