Wasp•4w ago

error

Uncaught TypeError: Cannot set properties of undefined (setting 'displayName') at chunk-R5CONI5L.js?v=a1cd3980:10214:25

9 Replies

Hi @᲼. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It looks like you're encountering a JavaScript error in your Wasp application. This error occurs when the code is trying to set a displayName property on an undefined object. Based on the knowledge sources, this could be related to a few different issues: 1. Auth configuration issue: If you're using social authentication (like Google or Keycloak), the error might be related to the userSignupFields configuration. When implementing social auth, you need to properly define how user fields are populated from the provider data. 2. Node.js version compatibility: There have been issues with Node.js version compatibility in Wasp. Some versions of Wasp require Node.js 18, while newer versions support Node.js 20. If you're using an incompatible Node.js version, it could cause unexpected errors. 3. Code changes after migration: If you recently migrated from Wasp 0.11 to 0.12, there were significant changes to the auth system that require updates to your code. To fix this issue, you could try: 1. Check your auth configuration, especially if you're using social auth providers. Make sure your userSignupFields are properly defined. 2. Run wasp clean and then wasp start to clear any cached modules that might be causing issues, as suggested in the Discord support threads here. 3. Verify you're using a compatible Node.js version (Node.js 18 is recommended for older Wasp versions). 4. If you recently migrated from Wasp 0.11 to 0.12, ensure you've properly updated your auth configuration according to the migration guide here. If the error persists, you might need to provide more context about your specific implementation for more targeted help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @᲼, 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?

᲼OP•4w ago

@kapa.ai none of those

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand that none of the suggestions I provided earlier seem to address your issue. Without more specific information about your application and the context in which this error occurs, it's difficult to pinpoint the exact cause. The error "Cannot set properties of undefined (setting 'displayName')" indicates that your code is trying to set a 'displayName' property on an object that is undefined. This is a common JavaScript error that could occur in various parts of a Wasp application. To help you better, I would need additional information such as: 1. The specific code that's causing the error 2. Which Wasp version you're using 3. Any recent changes you made to your application 4. The full stack trace if available If you can provide more details about your specific implementation and where this error is occurring, I can try to offer more targeted assistance based on the knowledge sources available. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @᲼, 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?

᲼OP•4w ago

wasp clean fixed it @kapa.ai module can not be resolved

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books:

MEE6•4w ago

Wohooo @᲼, you just became a Waspeteer level 1!

kapa.ai•4w ago

---------------------- Based on the knowledge sources, "module cannot be resolved" errors are common in Wasp applications and can occur for several reasons. Here are some potential solutions: Common Causes and Solutions 1. Missing or Incorrect Imports
The error might be related to incorrect import paths. For example, in one case, a user was trying to import Link from the wrong location:

   import { useQuery, Link, rewardUser, deleteComment } from 'wasp/client/operations';

   import { useQuery, Link, rewardUser, deleteComment } from 'wasp/client/operations';

When it should have been:

   import { Link } from 'wasp/client/router';

   import { Link } from 'wasp/client/router';

Discord support thread 2. Run wasp clean and wasp start
This is often the simplest solution. The .wasp folder might have broken or outdated files:

   wasp clean
   wasp start

   wasp clean
   wasp start

Discord support thread 3. Missing File Extensions
If you're providing paths to server files without the .js extension, this can cause module resolution errors. Make sure to include the proper file extensions in your imports. Github Issue 4. Wasp Compiler Not Run
If you haven't run the Wasp compiler at all, you might see errors like:

   Cannot find module 'wasp/entities' or its corresponding type declarations.
   Cannot find module 'wasp/server' or its corresponding type declarations.

   Cannot find module 'wasp/entities' or its corresponding type declarations.
   Cannot find module 'wasp/server' or its corresponding type declarations.

Running wasp start should compile the SDK and make these modules available. Discord support thread 5. JSON Module Imports
If you're trying to import JSON files, you might need to configure TypeScript properly. Users have reported issues with importing JSON modules even after enabling esModuleInterop and resolveJsonModule in tsconfig.json. Discord support thread Without more specific information about which module cannot be resolved in your case, it's difficult to provide a more targeted solution. If you can share more details about the specific error message and context, I can try to provide more specific guidance. Kapa.ai: I've provided some common solutions for module resolution errors in Wasp applications. Could you share the specific error message you're seeing? That would help me give you more targeted advice. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @᲼, 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?

᲼OP•4w ago

import from @ as src @kapa.ai

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your query about importing from "@" as src in Wasp, I can provide some information about import paths and aliases in Wasp projects. Import Paths in Wasp In Wasp 0.12.0 and newer, the project structure changed significantly. Previously, code was separated into src/client and src/server directories, but now everything is in the src directory and you can organize it however you want. With this change, the import paths in your Wasp file also changed: - Old imports used @server or @client prefixes - New imports should use @src prefix For example, if you previously had:

import { getTasks } from "@server/queries.js"

import { getTasks } from "@server/queries.js"

You should now use:

import { getTasks } from "@src/server/queries.js"

import { getTasks } from "@src/server/queries.js"

Migration from 0.11.X to 0.12.X Using Custom Import Aliases If you want to use a custom alias like @ instead of @src, you would need to configure it in your project. Some users have attempted to add a vite.config.ts file with custom aliases:

import path from "path";
import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

import path from "path";
import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Discord support thread However, there's an open issue in the Wasp GitHub repository about using import aliases in Wasp generator templates, which suggests this functionality might not be fully supported yet:

// Relative import
import userFn from '../../ext-src/file.js';
...
userFn();

// Absolute import using `@ext-src` alias
import userFn from '@ext-src/file.js';
...
userFn();

// Relative import
import userFn from '../../ext-src/file.js';
...
userFn();

// Absolute import using `@ext-src` alias
import userFn from '@ext-src/file.js';
...
userFn();

GitHub Issue If you're getting errors related to imports, make sure you're using the correct import paths according to your Wasp version. If you're using an older version that requires @server or @client prefixes but trying to use @src, you'll get a parse error like:

Parse error:
Path in external import must start with "@server/" or "@client/"!

Parse error:
Path in external import must start with "@server/" or "@client/"!

Discord support thread For font imports specifically, there have been issues with Vite and serving fonts from node_modules. This might require additional configuration in your vite.config.ts file. Discord support thread If you provide more specific details about your issue, I can offer more targeted assistance. Kapa.ai: Could you clarify if you're trying to set up a custom import alias or if you're having trouble with the standard Wasp import paths? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @᲼, 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?

Gaming

Programming

error

Did you find this page helpful?