What is ERR_UNSUPPORTED_DIR_IMPORT (in .wasp generated code) and how to resolve?
Server is crashing at launch, and repeating the same errors on loop (forever).
🔍 Validating environment variables...
node:internal/errors:496
ErrorCaptureStackTrace(err);
^
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/app/.wasp/out/sdk/wasp/dist/client/operations/actions' is not supported resolving ES modules imported from /app/.wasp/out/sdk/wasp/dist/client/operations/index.js
at __node_internal_captureLargerStackTrace (node:internal/errors:496:5)
at new NodeError (node:internal/errors:405:5)
at finalizeResolution (node:internal/modules/esm/resolve:320:17)
at moduleResolve (node:internal/modules/esm/resolve:946:10)
at defaultResolve (node:internal/modules/esm/resolve:1132:11)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
at link (node:internal/modules/esm/module_job:76:36) {
code: 'ERR_UNSUPPORTED_DIR_IMPORT',
url: 'file:///app/.wasp/out/sdk/wasp/dist/client/operations/actions'
}
4 Replies
Hi @Conspyre. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
This error is related to how Node.js handles ES module imports in Wasp-generated code. The ERR_UNSUPPORTED_DIR_IMPORT error occurs when trying to import a directory as an ES module, which is not supported by Node.js.
To resolve this issue, you can try the following steps:
1. Clean and rebuild your Wasp project:
Run
wasp clean
to remove all generated files and dependencies, then run wasp start
to rebuild the project. This can help resolve issues caused by outdated or corrupted generated code Discord support thread (https://discord.com/channels/686873244791210014/1215750573278629958).
2. Check your import statements:
Make sure you're using the correct import syntax for Wasp operations. Instead of importing from specific directories, use the recommended import format:
This format is designed to work with Wasp's generated code structure Discord support thread (https://discord.com/channels/686873244791210014/1216119302244270181).
3. Verify file extensions:
If you're importing local files, make sure you're using the correct file extensions. For TypeScript files on the server-side, you may need to use the .js
extension even if the actual file is .ts
Github Issue (https://github.com/wasp-lang/wasp/issues/1363).
4. Update Wasp:
Ensure you're using the latest version of Wasp. Some import-related issues have been addressed in recent updates. You can check your version with wasp version
and update if necessary Discord support thread (https://discord.com/channels/686873244791210014/1215750573278629958).
5. Check for circular dependencies:
Make sure there are no circular dependencies in your imports, as these can cause issues with ES module resolution.
If the problem persists after trying these steps, it might be a bug in Wasp's code generation. In that case, you should report the issue on the Wasp GitHub repository, providing details about your project structure and the steps to reproduce the error Github Issue (https://github.com/wasp-lang/wasp/issues/1664).
Remember that Wasp is actively developing and improving its error reporting, so future versions may provide more detailed and helpful error messages for situations like this Github Issue (https://github.com/wasp-lang/wasp/issues/1664).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Conspyre, 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?Note to dev team: Sure would be nice if the tools surfaced the actual error here
@kapa.ai I'm having a hard time guessing what's wrong, maybe someone on the dev team can get clever and include a bread crumb back to the source of the error.
The file at /app/.wasp/out/sdk/wasp/dist/client/operations/actions contains:
// PUBLIC API
export * from './actions';
// MOSTLY PUBLIC API (see the file for details)
export * from './queries';
export {
// PUBLIC API
useAction,
// PUBLIC API
useQuery, } from './hooks';
export {
// PUBLIC API
configureQueryClient,
// PRIVATE API (framework code)
initializeQueryClient,
// PRIVATE API (framework code)
queryClientInitialized } from './queryClient';
//# sourceMappingURL=index.js.map
What do you think I should globally search through the code base to see if I can uncover this needle?
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the information you've provided, it seems that the error is occurring due to an issue with the ES module import system in the Wasp-generated code. The file you've shared is part of the Wasp SDK, which is automatically generated and shouldn't be modified directly.
To help troubleshoot this issue, I suggest the following steps:
1. Check your main.wasp file:
Look for any action or query declarations that might be incorrectly importing from server-side files. Make sure all your operations are properly defined Docs > Data-model > Operations > Actions > API Reference (https://wasp-lang.dev/docs/data-model/operations/actions#example-1).
2. Review your client-side code:
Search for any imports that use
@wasp/ext-src
or direct paths to server files. These should be replaced with the correct Wasp import syntax:
Discord support thread (https://discord.com/channels/686873244791210014/1216119302244270181)
3. Examine your server-side code:
Look for any exports that might not be properly defined. Ensure that all actions and queries are exported correctly from their respective files Docs > Data-model > Operations > Queries > API Reference (https://wasp-lang.dev/docs/data-model/operations/queries#example-1).
4. Check for circular dependencies:
Search for any potential circular imports between your files, as these can cause issues with ES module resolution.
5. Verify file extensions:
Make sure all your import statements use the correct file extensions. For TypeScript files, you might need to use .js
extensions in imports even if the actual files are .ts
.
6. Review your project structure:
Ensure that your project follows the expected Wasp structure, with clear separation between client and server code.
If you're still unable to locate the issue, it might be helpful to share more details about your project structure and the content of your main.wasp file with the Wasp development team. They might be able to provide more specific guidance or identify if this is a bug in the Wasp framework itself Github Issue (https://github.com/wasp-lang/wasp/issues/1664).
Remember, modifying the generated Wasp SDK files directly is not recommended, as these files are automatically generated and managed by Wasp. The solution will likely involve changes to your own source code or Wasp configuration.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Conspyre, 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?Did you maybe try importing from
wasp/server/*
on the client?