Wasp module error
Im getting an error saying the file cannot be found. Whats causing this?
[ Server ] 🔍 Validating environment variables...
[ Server!] node:internal/modules/esm/resolve:275
[ Server!] throw new ERR_MODULE_NOT_FOUND(
[ Server!] ^
[ Server!]
[ Server!] Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/guinness/PetTreat/pets/app/.wasp/out/sdk/wasp/dist/ext-src/emails/templates/orderEmails' imported from /home/guinness/PetTreat/pets/app/.wasp/out/sdk/wasp/dist/ext-src/emails/operations.js
[ Server!] at finalizeResolution (node:internal/modules/esm/resolve:275:11)
[ Server!] at moduleResolve (node:internal/modules/esm/resolve:932:10)
[ Server!] at defaultResolve (node:internal/modules/esm/resolve:1056:11)
[ Server!] at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:654:12)
[ Server!] at #cachedDefaultResolve (node:internal/modules/esm/loader:603:25)
[ Server!] at ModuleLoader.resolve (node:internal/modules/esm/loader:586:38)
[ Server!] at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:242:38)
[ Server!] at ModuleJob._link (node:internal/modules/esm/module_job:135:49) {
[ Server!] code: 'ERR_MODULE_NOT_FOUND',
[ Server!] url: 'file:///home/guinness/PetTreat/pets/app/.wasp/out/sdk/wasp/dist/ext-src/emails/templates/orderEmails'
34 Replies
Hi @Bruno Njeru. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error you're seeing,
Error [ERR_MODULE_NOT_FOUND]: Cannot find module .../ext-src/emails/templates/orderEmails, typically means that the file or module you're trying to import does not exist at the specified path. In Wasp, this often happens if:
- The file was not created or is missing.
- The import path is incorrect (e.g., typo, wrong folder, or missing file extension).
- The Wasp compiler hasn't picked up recent changes, or the build artifacts are out of sync.
This is a common issue in Wasp projects, especially when working with custom code in the ext-src directory or when import paths are not accurate. The error message is coming from Node.js when it tries to resolve the import in the generated .wasp/out directory, but can't find the file.
What you should check:
1. Make sure the file orderEmails.js (or .ts, depending on your setup) actually exists in src/emails/templates/ (or wherever your source files are).
2. Ensure your import statement matches the file name and extension exactly.
3. If you recently added or moved files, try running wasp clean and then wasp start to force Wasp to rebuild everything. This can resolve issues where the .wasp build output is out of sync with your source files, as suggested in similar cases by the community Discord support thread: Hey! Any ideas on some solutions to these errors?.
4. Double-check that you are not missing a file extension in your import path, as missing extensions can cause module resolution to fail in Node.js ES Modules, and Wasp currently requires explicit extensions in some cases Github Issue: Improve error messages reported by the framework code.
If after these steps the error persists, review your import paths and file structure carefully. If the file is missing, create it; if the path is wrong, correct it.
Let me know if you need help with a specific import statement or file structure!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Bruno Njeru, 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?the files/import paths are both ok. the error is still there after running wasp clean. what could be causing this? @kapa.ai
Let me check the knowledge base for you again. One moment! :books:
----------------------
If your files and import paths are correct, and running
Sometimes, the
This approach has resolved similar issues for others in the community Discord support thread: Hey! Any ideas on some solutions to these errors?. 2. Issues with the Wasp SDK or Generated Code
Wasp generates code and the SDK in the
The Wasp SDK is linked via a local dependency in your
Even if the file exists, missing or incorrect file extensions in import statements can cause Node.js to fail to resolve the module, especially in ESM mode. Double-check that your import statements include the correct file extension, as this has been a source of confusion and errors in Wasp projects Improve error messages reported by the framework code. If none of these steps resolve the issue, it may be a deeper problem with the Wasp build process or a bug. In that case, providing a minimal reproduction and sharing it with the Wasp community or maintainers may help identify the root cause. Let me know if you try these steps and the problem persists, or if you have more details about your setup! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Bruno Njeru, 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?
wasp clean followed by wasp start does not resolve the error, there are a few additional possibilities based on the knowledge sources:
1. Build Artifacts Out of Sync or CorruptedSometimes, the
.wasp build output can get into a bad state that isn't fixed by a simple clean. Community members have reported that deleting both the .wasp directory and node_modules, then reinstalling dependencies and restarting Wasp, can help resolve persistent module resolution issues. This is especially relevant if you see errors like "Cannot find module 'wasp/entities'" or similar, even after cleaning and rebuilding. The recommended steps are:
- Delete the .wasp directory and node_modules
- Run npm install or yarn
- Run wasp startThis approach has resolved similar issues for others in the community Discord support thread: Hey! Any ideas on some solutions to these errors?. 2. Issues with the Wasp SDK or Generated Code
Wasp generates code and the SDK in the
.wasp/out/sdk directory. If there is a mismatch or corruption in the generated SDK, or if the build process did not properly update the SDK, you may encounter module resolution errors. The Wasp team has acknowledged that the current solution for SDK generation is somewhat hacky and can lead to issues if the build artifacts are not properly cleaned or regenerated Improve how we generate code (especially SDK) during wasp build.
3. Incorrect or Stale SymlinksThe Wasp SDK is linked via a local dependency in your
package.json. If the symlink is broken or stale, Node.js may not be able to resolve the module. Cleaning and reinstalling dependencies as described above can help.
4. File Extension IssuesEven if the file exists, missing or incorrect file extensions in import statements can cause Node.js to fail to resolve the module, especially in ESM mode. Double-check that your import statements include the correct file extension, as this has been a source of confusion and errors in Wasp projects Improve error messages reported by the framework code. If none of these steps resolve the issue, it may be a deeper problem with the Wasp build process or a bug. In that case, providing a minimal reproduction and sharing it with the Wasp community or maintainers may help identify the root cause. Let me know if you try these steps and the problem persists, or if you have more details about your setup! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Bruno Njeru, 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?
How are you importing
orderEmails in operations.js please share code. Which Wasp version are you using? 🙂import { sendDeliveryConfirmationEmail } from './templates/orderEmails'
import { sendShippingConfirmationEmail } from './templates/orderEmails' @miho and im using version 15
Try doing it like this:
im using .ts @miho
Just FYI, but that doesn't matter, Typescript doesn't rewrite the module import paths from
ts to js because the code without types still needs to be valid Javascript code: https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution
TLDR: it's perfectly valid to see something.js in the import statement even though you are using Typescript 😄
That beind said, please try changing the import so we can debug further and see if it maybe works like that 🙂
I'm just trying to asses what could be the issue first and then we'll figure it out together 🙂ok
it seems to work @miho but now im getting more errors so im having to change all imports to have the js extension
If you can, please share your project in the DMs so I can test it out locally myself 🙂
how do i share it if its in a private repo? @miho
Zip it without
node_modules and it should be fine 😄also ive reset the changes, there are too many files/modules and every time i change one import theres another error for another import
where should i send the .zip @miho
Wohooo @Bruno Njeru, you just became a Waspeteer level 6!
the error still persists 🔍 Validating environment variables...
[ Server!] node:internal/modules/esm/resolve:275
[ Server!] throw new ERR_MODULE_NOT_FOUND(
[ Server!] ^
[ Server!]
[ Server!] Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/bryan/PetTreat/pets/app/.wasp/out/sdk/wasp/dist/ext-src/emails/orderjwt' imported from /home/bryan/PetTreat/pets/app/.wasp/out/sdk/wasp/dist/ext-src/emails/operations.js
[ Server!] at finalizeResolution (node:internal/modules/esm/resolve:275:11)
[ Server!] at moduleResolve (node:internal/modules/esm/resolve:860:10)
[ Server!] at defaultResolve (node:internal/modules/esm/resolve:984:11)
[ Server!] at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:685:12)
[ Server!] at #cachedDefaultResolve (node:internal/modules/esm/loader:634:25)
[ Server!] at ModuleLoader.resolve (node:internal/modules/esm/loader:617:38)
[ Server!] at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:273:38)
[ Server!] at ModuleJob._link (node:internal/modules/esm/module_job:135:49) {
[ Server!] code: 'ERR_MODULE_NOT_FOUND',
[ Server!] url: 'file:///home/bryan/PetTreat/pets/app/.wasp/out/sdk/wasp/dist/ext-src/emails/orderjwt'
[ Server!] }
[ Server!] @kapa.ai @miho whats the way around this?
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the knowledge sources, this error means that Node.js cannot find the module at the specified path in the generated
Make sure that the file (e.g.,
Ensure your import statements include the correct file extension (e.g.,
If you haven't already, try the following steps: - Delete the
This process has resolved similar issues for others in the community Discord support thread: Hey! Any ideas on some solutions to these errors?. 4. Check for typos or case sensitivity:
File names and import paths are case-sensitive on most systems. Make sure there are no typos or case mismatches. If you have verified all of the above and the error still persists, it may be a deeper issue with the Wasp build process or a bug. In that case, you may want to provide a minimal reproduction and share it with the Wasp community or maintainers for further investigation. If you have more details about your file structure or import statements, feel free to share them for more targeted help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Bruno Njeru, 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?
.wasp/out/sdk/wasp/dist/ext-src/emails/orderjwt. This is a common issue in Wasp projects when:
- The file does not exist at the expected location.
- The import path in your code is incorrect or missing a file extension.
- The generated code in .wasp/out is out of sync with your source files.
What you can try, based on community and official guidance:
1. Double-check the file exists:Make sure that the file (e.g.,
orderjwt.js or orderjwt.ts) actually exists in your src/emails/ directory (or wherever your source files are). The generated path in .wasp/out/sdk/wasp/dist/ext-src/emails/orderjwt should correspond to a real file in your source.
2. Check import statements:Ensure your import statements include the correct file extension (e.g.,
.js or .ts). Missing extensions can cause module resolution to fail in Node.js ES Modules, and Wasp currently requires explicit extensions in some cases. This has been highlighted as a source of errors in Wasp projects Improve error messages reported by the framework code.
3. Clean and rebuild:If you haven't already, try the following steps: - Delete the
.wasp directory and node_modules folder.
- Run npm install (or yarn).
- Run wasp clean.
- Run wasp start.This process has resolved similar issues for others in the community Discord support thread: Hey! Any ideas on some solutions to these errors?. 4. Check for typos or case sensitivity:
File names and import paths are case-sensitive on most systems. Make sure there are no typos or case mismatches. If you have verified all of the above and the error still persists, it may be a deeper issue with the Wasp build process or a bug. In that case, you may want to provide a minimal reproduction and share it with the Wasp community or maintainers for further investigation. If you have more details about your file structure or import statements, feel free to share them for more targeted help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Bruno Njeru, 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?
is it an issue with the config? // =============================== IMPORTANT =================================
//
// This file is only used for Wasp IDE support. You can change it to configure
// your IDE checks, but none of these options will affect the TypeScript
// compiler. Proper TS compiler configuration in Wasp is coming soon 🙂
{
"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"
}
} im using wasp 0.15.0 @kapa.aiGitHub
Property 'toBeInTheDocument' does not exist on type 'JestMatchers<H...
@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 again. One moment! :books:
----------------------
No, this is not an issue with your config. According to the knowledge sources, the
tsconfig.json file in a Wasp project is only used for IDE support and does not affect the actual TypeScript compiler or the build process. This is explicitly stated in the comment at the top of the file and confirmed by the Wasp team:
"The tsconfig.json files in user source only have effect on IDE support. Our users have no way of configuring the TypeScript compiler, neither for the server nor for the client."Support custom TypeScript configuration So, changes you make to this file will help with editor features like autocomplete and type checking, but will not impact how Wasp compiles or runs your code. The actual build process uses its own internal configuration, and user
"We should allow them to specify desired flags in their tsconfig.json files and merge it with our tsconfig.json files (i.e., the ones we actually use when compiling)."
tsconfig.json is currently ignored for compilation.
Your module resolution error is not caused by this config file. The root cause is likely elsewhere, such as a missing file, incorrect import path, or a build artifact issue, as discussed previously.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Bruno Njeru, 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?the file is present in .wasp ext-src. why the module error? @kapa.ai
Let me check the knowledge base for you again. One moment! :books:
----------------------
If the file is present in
Node.js ESM requires explicit file extensions in import statements. If your import looks like: but the actual file is
Even if the file exists, if the generated code in
File systems (especially on Linux) are case-sensitive. Double-check that the file name and import path match exactly, including case. If you have confirmed the file exists in the generated directory and the import path (including extension) is correct, but the error persists after a full clean and reinstall, it may be a deeper issue with Wasp's code generation or a bug. In that case, sharing a minimal reproduction with the Wasp community may help identify the root cause. If you want to share your import statement and the exact file name, I can help check for subtle issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Bruno Njeru, 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?
.wasp/out/sdk/wasp/dist/ext-src/emails/orderjwt (or the relevant generated directory), but you are still getting a module not found error, the knowledge sources suggest a few possible causes:
1. File Extension Missing in ImportNode.js ESM requires explicit file extensions in import statements. If your import looks like: but the actual file is
orderjwt.js or orderjwt.ts, Node.js will not resolve it unless you write:
This has been a recurring source of errors in Wasp projects, and the error message can be confusing. The Wasp team has noted that missing extensions in server imports can cause these issues, and improving this is an open topic Improve error messages reported by the framework code.
2. Generated Code Out of SyncEven if the file exists, if the generated code in
.wasp/out is out of sync with your source files, the import may fail. The recommended fix is to delete both .wasp and node_modules, reinstall dependencies, and restart Wasp. This has resolved similar issues for others Discord support thread: Hey! Any ideas on some solutions to these errors?.
3. Case Sensitivity or Path TyposFile systems (especially on Linux) are case-sensitive. Double-check that the file name and import path match exactly, including case. If you have confirmed the file exists in the generated directory and the import path (including extension) is correct, but the error persists after a full clean and reinstall, it may be a deeper issue with Wasp's code generation or a bug. In that case, sharing a minimal reproduction with the Wasp community may help identify the root cause. If you want to share your import statement and the exact file name, I can help check for subtle issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Bruno Njeru, 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?
is it necessary to change all the imports to include .js
is it necessary to change all the imports to include .js @kapa.ai
Let me check the knowledge base for you again. One moment! :books:
----------------------
Yes, for server-side code in Wasp projects, it is necessary to include the
.js extension in your import statements. This is due to how Node.js handles ES Modules: it requires explicit file extensions for relative imports. The Wasp team and community have discussed that missing extensions in imports are a common source of "module not found" errors, and that this behavior is expected with the current setup. The TypeScript team also does not automatically rewrite extensions, so you must specify them yourself in your code. This requirement has been confirmed in several discussions and issues:
"Node JS ESNext modules require us to set the 'type: module' field in package.json, which in turn expects all relative imports to include a valid extension (this applies to the target dist JS code)"Look at extension requirements when importing Jobs
"If in main.wasp we provide a path to server file, without .js extension, then that doesn’t work, and error is something like: Error [ERR_MODULE_NOT_FOUND]..."Improve error messages reported by the framework code So, to avoid module resolution errors, you should update your server-side imports to always include the
.js extension. For client-side code, the requirements may differ, but for server code, including the extension is necessary.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Bruno Njeru, 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?opensaas imports work without extensions @kapa.ai
Let me check the knowledge base for you again. One moment! :books:
----------------------
The knowledge sources indicate that, in general, server-side imports in Wasp require explicit file extensions (like
.js) for Node.js ES Modules to resolve them correctly. However, there is no explicit information in the provided sources about OpenSaaS specifically allowing imports without extensions or handling them differently.
In fact, the sources highlight that inconsistent or missing extensions in imports have been a recurring source of confusion and errors, and the Wasp team has worked to make this behavior more uniform and robust. The expectation is that, especially for server code, you should include the .js extension in your imports to avoid module resolution errors. This is a Node.js and TypeScript ecosystem requirement, not something unique to OpenSaaS or Wasp templates, and the Wasp team has not documented an exception for OpenSaaS in the knowledge sources provided Look at extension requirements when importing Jobs, Fix inconsistent import extensions in both .wasp file and in JS files.
If you are seeing OpenSaaS imports work without extensions, it may be due to specific project structure, build tooling, or accidental compatibility, but this is not documented as a supported or reliable feature in the official Wasp knowledge sources. If you rely on this behavior, be aware it may not be consistent or future-proof.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Bruno Njeru, 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?maybe the issue is using tsx files on the server side. im using puppeteer to render a component that it should make a pdf
const invoiceHtml = ReactDOMServer.renderToStaticMarkup(
React.createElement(InvoiceOne, {
orderId,
items: orderItems,
fullName,
email: user.email,
addressLine,
company,
apartmentSuite,
cityAndCounty,
countryAndZip,
phoneNumber,
paymentMethod,
paypalOrderReceipt,
mpesaTransactionReceipt,
trackingNumber,
createdAt,
subtotal,
shippingCost,
totalAmount,
})
);
const pdfBuffer = await generateInvoicePdf(invoiceHtml);
could this be causing the import module errors? how do you use tsx files server side? @kapa.ai
Let me check the knowledge base for you again. One moment! :books:
----------------------
Yes, using
Yes, using
.tsx files on the server side can cause import/module errors in Wasp, especially if the build process does not properly handle or transpile .tsx files for server-side usage. The knowledge sources mention that distinguishing between client and server files is important, and that using JSX/TSX files on the server can be problematic:
"Things we can detect: using jsx or tsx files in server imports 😄"Can we help users distinguish their client and server JS files (and also detect wrong imports in main.wasp)? Currently, Wasp does not have explicit documentation or support for using
"Some ideas by me: ... maybe using.server.jsextension for server files, or.client.jsfor client files. ... That would enable me to know, as a Wasp user, when in a file, am I in Nodejs world or in browser world."
.tsx files directly on the server side. The build pipeline may not transpile .tsx files for server use, leading to module resolution errors if you try to import them directly in server code.
How to use TSX files server-side in Wasp:
- You need to ensure that your .tsx files are transpiled to .js before being imported by server code. Wasp's current build process may not handle this automatically for server-side code.
- As a workaround, you can manually transpile your .tsx components to .js and import the resulting .js files in your server code.
- Alternatively, keep your server-side rendering logic in .js or .ts files and avoid importing .tsx files directly on the server until Wasp provides better support for this use case.
Summary:Yes, using
.tsx files on the server can cause module errors in Wasp, and there is no official support or recommended workflow for this in the knowledge sources. If you need to render React components server-side (e.g., with Puppeteer), ensure they are available as transpiled .js files for the server to import.
If you need more specific guidance, please share your file structure and import statements.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Bruno Njeru, 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?theres
const invoiceHtml = ReactDOMServer.renderToStaticMarkup(
React.createElement(InvoiceOne, {
orderId,
items: orderItems,
fullName,
email: user.email,
addressLine,
company,
apartmentSuite,
cityAndCounty,
countryAndZip,
phoneNumber,
paymentMethod,
paypalOrderReceipt,
mpesaTransactionReceipt,
trackingNumber,
createdAt,
subtotal,
shippingCost,
totalAmount,
})
);
const pdfBuffer = await generateInvoicePdf(invoiceHtml);
and the react component
export const InvoiceOne = (props: InvoiceOneProps) => {
const {
items,
orderId,
fullName,
email,
addressLine,
company,
apartmentSuite,
cityAndCounty,
countryAndZip,
phoneNumber,
paymentMethod,
paypalOrderReceipt,
mpesaTransactionReceipt,
trackingNumber,
createdAt,
subtotal,
shippingCost,
totalAmount,
} = props;
return (
<div>
<div
style={{
display: "flex",
flexDirection: "column-reverse",
gap: "1.25rem",
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
gap: "1rem", // gap-4
}}
>
<div>
<p
style={{
marginBottom: "0.375rem",
fontWeight: 500, @kapa.ai
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the knowledge sources, Wasp does not provide explicit documentation or official support for importing and using
- Wasp does not currently support importing
.tsx (React component) files directly in server-side code. There are known issues and open discussions about distinguishing between client and server files, and about the problems that can arise when using JSX/TSX files on the server side. The Wasp team has acknowledged that using .tsx files in server imports can cause problems, and there is no built-in mechanism to ensure these files are properly transpiled for server-side use in the current Wasp build process Can we help users distinguish their client and server JS files (and also detect wrong imports in main.wasp)?.
If you are trying to use a React component (like InvoiceOne) written in .tsx directly in your server code (for example, to render HTML for a PDF), this can lead to module resolution errors because the server expects a transpiled .js file, not a .tsx file.
Summary:- Wasp does not currently support importing
.tsx files directly in server code.
- This is likely the cause of your module import errors.
- The recommended approach (until Wasp adds support) is to ensure any React components you want to use server-side are available as transpiled .js files, or to keep server-side rendering logic in .js/.ts files.
If you need to use a React component server-side, you may need to manually transpile your .tsx to .js and import the .js file in your server code. There is no official workflow for this in the current Wasp documentation or knowledge sources.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Bruno Njeru, 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?hi @kapa.ai ive removed the .tsx on the server side and also dependencies used like puppeteer. but im still getting a module error. also the app was working fine before even with tsx on the server but it just started crashing and getting module errors all of a sudden so i dont know whats causing this or how to avoid it. Is there a way around this? @Wasp Team
Let me check the knowledge base for you again. One moment! :books:
----------------------
Given your description—removing
Even after removing problematic files or dependencies, Wasp’s generated code in
This process has resolved similar issues for others, especially when the error persists after code changes Discord support thread: Hey! Any ideas on some solutions to these errors?. 2. File Extension and Import Path Issues
Even if you’ve removed
Double-check for any case mismatches or typos in your import paths, as these can cause errors, especially on case-sensitive file systems. 4. No Known Automatic Recovery
There is no mention in the knowledge sources of Wasp automatically recovering from these states. Manual intervention (as above) is required. If the error persists after these steps:
- There may be a deeper issue with Wasp’s build process or a bug. - If possible, try to isolate the minimal code that triggers the error and share it with the Wasp community for further help. Summary:
The most reliable workaround, based on community experience, is a full clean of
.tsx files and dependencies like Puppeteer, but still encountering module errors, especially after the app previously worked—here’s what the knowledge sources suggest:
1. Corrupted or Out-of-Sync Build ArtifactsEven after removing problematic files or dependencies, Wasp’s generated code in
.wasp/out or cached dependencies can remain out of sync or corrupted. This is a common cause of persistent module errors. The recommended fix is to:
- Delete both the .wasp directory and node_modules
- Reinstall dependencies (npm install or yarn)
- Run wasp clean
- Then run wasp startThis process has resolved similar issues for others, especially when the error persists after code changes Discord support thread: Hey! Any ideas on some solutions to these errors?. 2. File Extension and Import Path Issues
Even if you’ve removed
.tsx files, ensure all your server-side imports use the correct file extensions (e.g., .js). Node.js ESM requires explicit extensions, and missing them can cause module resolution errors Improve error messages reported by the framework code.
3. Case Sensitivity and TyposDouble-check for any case mismatches or typos in your import paths, as these can cause errors, especially on case-sensitive file systems. 4. No Known Automatic Recovery
There is no mention in the knowledge sources of Wasp automatically recovering from these states. Manual intervention (as above) is required. If the error persists after these steps:
- There may be a deeper issue with Wasp’s build process or a bug. - If possible, try to isolate the minimal code that triggers the error and share it with the Wasp community for further help. Summary:
The most reliable workaround, based on community experience, is a full clean of
.wasp and node_modules, followed by a fresh install and build. If that does not resolve the issue, it may require further investigation or sharing a reproducible example with the Wasp team.
If you have more details about the specific error message or your file structure, feel free to share them for more targeted help.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Bruno Njeru, 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?its the imports on server side with files like utils.ts or plans.ts. so if the import was import { plan } from './plans' i have to add .js extensions to all imports which is not necessary. and im sure if i add extensions to all imports ill get more errors so im trying to find a way to solve it @kapa.ai
Let me check the knowledge base for you again. One moment! :books:
----------------------
Yes, for server-side code in Wasp, you do need to include the
- You must add
.js extension in your import statements when using ES Modules (which Wasp uses for server code). This is a Node.js requirement and is not specific to Wasp. The Wasp team and community have discussed this at length:
"Node JS ESNext modules require us to set the 'type: module' field in package.json, which in turn expects all relative imports to include a valid extension (this applies to the target dist JS code)"Look at extension requirements when importing Jobs
"If in main.wasp we provide a path to server file, without .js extension, then that doesn’t work, and error is something like: Error [ERR_MODULE_NOT_FOUND]..."Improve error messages reported by the framework code The confusion often arises because TypeScript and some editors (like VSCode) allow you to omit the extension, but the compiled JavaScript that Node.js runs must have the extension in the import path. TypeScript does not rewrite these extensions for you, and this is a known pain point in the ecosystem. There is currently no workaround in Wasp to avoid adding the
.js extension to server-side imports. The only way to ensure your imports work reliably is to include the .js extension in all server-side import statements. If you do not, you will encounter module resolution errors.
If you add the .js extension and encounter new errors, those errors are likely due to other issues (such as incorrect paths, missing files, or build artifacts out of sync), not because of the extension itself.
Summary:- You must add
.js extensions to all server-side imports in Wasp.
- This is required by Node.js ES Modules and is not configurable in Wasp at this time.
- If you encounter further errors after adding extensions, they are likely unrelated and should be debugged separately.
If you need help with a specific error after adding extensions, please share the error message and relevant code.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Bruno Njeru, 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'll take a closer look probably tomorrow after we are done with the release today 👍
ok