Wasp•2mo ago

strange behavior with not finding exports

hey, learning wasp and ran into this problem with finding imports in "wasp/client/operations". Sometimes it fixes itself with multiple wasp clean, wasp start, rm -rf .wasp, etc.. but wonder if anyone can explain why this happens and how to resolve it faster? I'm also using queries.js and actions.js as suggested in the 0.15.0 docs. This does make learning a bit slower so any help would be appreciated! using linux Debian 5.10.209-2, wasp 0.15.0, node v20.18.1, npm 10.8.2, react [email protected], react query @tanstack/[email protected] I get the following error:

Project.jsx:9 Uncaught SyntaxError: The requested module '/@fs/data/ra-wasp/.wasp/out/sdk/wasp/dist/client/operations/index.js' does not provide an export named 'getUsers' (at Project.jsx:9:3)

Here project.jsx imports, and operations/index.js, main.wasp. I have done a full clean/rebuilt/etc, browswer refresh, and still get same issue. What could be the issue. Reflect, and advise. Project.jsx

import {

useQuery,

useAction,

createProject,

getUsers

} from 'wasp/client/operations';

import {

useQuery,

useAction,

createProject,

getUsers

} from 'wasp/client/operations';

main.wasp:

query getUsers {

fn: import { getUsers } from "@src/queries.js",

entities: [User]

}

query getUsers {

fn: import { getUsers } from "@src/queries.js",

entities: [User]

}

index.js: cat .wasp/out/sdk/wasp/dist/client/operations/queries/index.js

import { createQuery } from './core';

// PUBLIC API

export const getUsers = createQuery('operations/get-users', ['User']);

export { buildAndRegisterQuery } from './core';

import { createQuery } from './core';

// PUBLIC API

export const getUsers = createQuery('operations/get-users', ['User']);

export { buildAndRegisterQuery } from './core';

I'm using vscode if I do this multiple times, sometimes I can refresh and it works

rm -rf .wasp
rm -rf node_modules
rm package-lock.json
wasp clean
npm install
wasp db migrate-dev
wasp db seed
wasp start

rm -rf .wasp
rm -rf node_modules
rm package-lock.json
wasp clean
npm install
wasp db migrate-dev
wasp db seed
wasp start

Thanks! Jeff

9 Replies

kapa.ai•2mo ago

Hi @jeffdpho. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Thank you for your detailed question about the import issues you're experiencing with Wasp. This is a common problem that Wasp users sometimes encounter, and I'll try to explain why it happens and how to resolve it more efficiently. The issue you're facing is related to how Wasp generates and manages its SDK, which includes the operations (queries and actions) you're trying to import. Here are a few points to consider: 1. SDK Generation: Wasp generates its SDK (including the wasp/client/operations module) during the compilation process. Sometimes, this process might not complete correctly, leading to missing exports. 2. Caching Issues: Browsers and development servers can sometimes cache old versions of files, which might cause outdated imports to persist even after rebuilding. 3. Timing Issues: In some cases, the imports might not be available immediately after starting the development server, especially if there are many operations to generate. To resolve this issue more efficiently, you can try the following steps: 1. Use the correct import path: Make sure you're using the correct import path. For client-side code, use:

   import { getUsers } from 'wasp/client/operations';

   import { getUsers } from 'wasp/client/operations';

For server-side code, use:

   import { getUsers } from 'wasp/server/operations';

   import { getUsers } from 'wasp/server/operations';

Wasp Docs: Declaring Queries (https://wasp-lang.dev/docs/data-model/operations/queries#declaring-queries-1) provides more information on this. 2. Clean and rebuild: Instead of manually deleting folders and files, use the following commands:

   wasp clean
   wasp start

   wasp clean
   wasp start

This should be sufficient in most cases to regenerate the SDK correctly. 3. Check for typos: Ensure that the operation name in your main.wasp file matches exactly with what you're trying to import in your React components. 4. Restart the development server: Sometimes, simply stopping the Wasp development server (with Ctrl+C) and starting it again with wasp start can resolve the issue. 5. Clear browser cache: Try hard-refreshing your browser (Ctrl+Shift+R on most browsers) to ensure you're not seeing cached versions of your files. 6. Check for circular dependencies: Make sure you don't have any circular dependencies in your imports, as these can cause issues with the SDK generation. If you continue to face issues after trying these steps, it might be worth checking if there's a bug in the specific version of Wasp you're using. You can report the issue on the Wasp GitHub repository (https://github.com/wasp-lang/wasp/issues) if the problem persists. Remember, the Wasp team is actively working on improving the developer experience, including better error messages and more robust SDK generation. Future versions of Wasp may address these issues more comprehensively. Discord Support Thread (https://discord.com/channels/686873244791210014/1213958217537814640) suggests that sometimes these issues can be related to how Wasp injects context, so make sure you're always importing operations through the Wasp SDK (wasp/client/operations or wasp/server/operations) rather than directly from your source files. I hope this helps explain the issue and provides some strategies for resolving it more quickly! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @jeffdpho, 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?

Filip•5w ago

Hey @jeffdpho, this is very weird, thanks for reporting! Before I dig in, can you elaborate what you mean by:

I'm also using queries.js and actions.js as suggested in the 0.15.0 docs. This does make learning a bit slower so any help would be appreciated!

What are you doing exactly and where do we suggest it?

jeffdphoOP•5w ago

@Filip , Thanks for your response. To clarify I'm using the instructions ( https://wasp-lang.dev/docs/data-model/operations/overview, https://wasp-lang.dev/docs/data-model/operations/queries, https://wasp-lang.dev/docs/data-model/operations/actions ) suggested in the following page which are great. However, when I ended up getting a missing "exports" from (1) queries/actions or the (2) missing "useContext" I almost always have switch browsers (chrome, Firefox, Chrome or Firefox Incognito) , full clean and rebuild or sometimes both and it seems to solve the issues. I don't think the two issues are related. I hope this helps and maybe it's a minor overlook somewhere. Update: I did a full rebuild/reinstall and install on node, npm , wasp, package.json, et. all and I don't get the "missing exports" issue anymore -- 🤞 @Filip The second issue I get, which seems to be a race, cache, timing, or sequencing issue in the auth provider setup for google. I am using the google auth instructions here ( https://wasp-lang.dev/docs/auth/social-auth/google ). The full rebuild/reinstall mentioned above did not resolve this issue. The username/password auth is ok. 1. I setup google auth 2. I login successfully (it works) 3. I make a change or rebuild the site (wasp clean/wasp db migrate-dev/wasp start, etc..) 4. /login (successfully) but on the redirect I get the following error (below) 5. Usually, if I switch between chrome/firefox or chrome/firefox icognito the issue resolves. Clearning the cache sometimes will work but not all the time.
6. Using username/password doesn't seem to have the issue Here is my wasp.main entry:

auth: {
    userEntity: User,
    methods: {
    usernameAndPassword: {},
    google: {
        configFn: import { getGoogleAuthConfig } from "@src/server/auth/google.js",
        userSignupFields: import { userSignupFields } from "@src/server/auth/google.js"
        },
    },
    onAuthFailedRedirectTo: "/login",
    onAuthSucceededRedirectTo: "/"
  },

auth: {
    userEntity: User,
    methods: {
    usernameAndPassword: {},
    google: {
        configFn: import { getGoogleAuthConfig } from "@src/server/auth/google.js",
        userSignupFields: import { userSignupFields } from "@src/server/auth/google.js"
        },
    },
    onAuthFailedRedirectTo: "/login",
    onAuthSucceededRedirectTo: "/"
  },

google.js

export const getGoogleAuthConfig = () => ({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "https://testsite.io/auth/google/callback",
    scopes: ['email', 'profile', 'openid']
})

export const userSignupFields = {
    isSignupComplete: () => true,
    email: (data) => data?.profile?.email,
    hd: (data) => data?.profile?.hd,
    picture: (data) => data?.profile?.picture
}

export const getGoogleAuthConfig = () => ({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "https://testsite.io/auth/google/callback",
    scopes: ['email', 'profile', 'openid']
})

export const userSignupFields = {
    isSignupComplete: () => true,
    email: (data) => data?.profile?.email,
    hd: (data) => data?.profile?.hd,
    picture: (data) => data?.profile?.picture
}

react-router-dom.js?v=c3e21e73:4056 React Router caught the following error during render TypeError: Cannot read properties of null (reading 'useContext')
    at useQuery (hooks.ts:28:10)
    at useAuth (useAuth.ts:15:10)
    at useOAuthCallbackHandler (OAuthCallback.tsx:36:52)
    at OAuthCallbackPage (OAuthCallback.tsx:13:27)

react-router-dom.js?v=c3e21e73:4056 React Router caught the following error during render TypeError: Cannot read properties of null (reading 'useContext')
    at useQuery (hooks.ts:28:10)
    at useAuth (useAuth.ts:15:10)
    at useOAuthCallbackHandler (OAuthCallback.tsx:36:52)
    at OAuthCallbackPage (OAuthCallback.tsx:13:27)

Filip•4w ago

@miho Do you mind if I leave this one to you? Hey @jeffdpho, let's see whether Miho has time to look into it. He's the auth expert. In any case, one of us will help you soon 🙂 Happy new year btw!

miho•4w ago

@jeffdpho these entries

clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "https://testsite.io/auth/google/callback",

clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "https://testsite.io/auth/google/callback",

are extraneous - they don't do anything for the config, you can remove them 🙂 Hm, the error suggests that the React Query is not working properly. Googling the errors seems to indicate a problem with peer deps in package.json: https://stackoverflow.com/questions/72413194/uncaught-typeerror-cannot-read-properties-of-null-reading-usecontext Could you share your package.json with us?

Stack Overflow

Uncaught TypeError: Cannot read properties of null (reading 'useCon...

so no where in my react code do I use the useContext property. I have a npm package which has a compiled webpack file that has a component in there. when i try to use the component in my react app it

jeffdphoOP•4w ago

Hi @miho , thanks for the response, here is my package.json

{
  "name": "test1",
  "type": "module",
  "dependencies": {
    "@heroicons/react": "^2.2.0",
    "@material-tailwind/react": "^2.1.10",
    "@radix-ui/react-slot": "^1.1.1",
    "@tanstack/react-query": "^4.29.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "date-fns": "^4.1.0",
    "heroicons": "^2.2.0",
    "lucide-react": "^0.469.0",
    "react": "^18.2.0",
    "react-helmet": "^6.1.0",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "wasp": "file:.wasp/out/sdk/wasp"
  },
  "devDependencies": {
    "@tanstack/react-query-devtools": "^4.29.0",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.49",
    "prisma": "5.19.1",
    "tailwindcss": "^3.4.17",
    "typescript": "^5.1.0"
  }
}

{
  "name": "test1",
  "type": "module",
  "dependencies": {
    "@heroicons/react": "^2.2.0",
    "@material-tailwind/react": "^2.1.10",
    "@radix-ui/react-slot": "^1.1.1",
    "@tanstack/react-query": "^4.29.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "date-fns": "^4.1.0",
    "heroicons": "^2.2.0",
    "lucide-react": "^0.469.0",
    "react": "^18.2.0",
    "react-helmet": "^6.1.0",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "wasp": "file:.wasp/out/sdk/wasp"
  },
  "devDependencies": {
    "@tanstack/react-query-devtools": "^4.29.0",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.49",
    "prisma": "5.19.1",
    "tailwindcss": "^3.4.17",
    "typescript": "^5.1.0"
  }
}

miho•4w ago

Are you doing something special with React Query like setting up the Provider?

jeffdphoOP•4w ago

no, I dug into the code and found the Provider was included, unless I read that wrong, so I didn't try anything with that. What I did notice is if I get the useContext mission error I "wasp clean", "wasp db .." and "wasp start" and then use a different browser and I don't get the error. Thinking it might be something w/ the auth context

miho•4w ago

Hm, would you mind sharing your code repo with me in a DM?

Gaming

Programming

strange behavior with not finding exports

Did you find this page helpful?