create-react-app `convex/` folder location

Using a regular setup via npx create-react-app. Getting this error:

Module not found: Error: You attempted to import ../../convex/_generated/react which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

Module not found: Error: You attempted to import ../../convex/_generated/react which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

Since the convex library created the convex folder in that location, is a symlink the recommended solution? Here is my project and the relevant part of New.tsx

14 Replies

supergregOP•3y ago

Hi, thank you in advance for the help! I'm at ETHDenver, haven't used Convex before 🙂

ballingt•3y ago

You can move the convex/ directory to src/convex/, just update the line in convex.json too When you start a new Convex project with npx convex init, it's supposed to detect create-react-app and create the convex/ functions directory at src/convex/

supergregOP•3y ago

Here's my convex.json:

{
  "project": "simplestupidui",
  "team": "gregschwartz",
  "prodUrl": "https://grateful-capybara-946.convex.cloud",
  "functions": "convex/",
  "authInfo": []
}

{
  "project": "simplestupidui",
  "team": "gregschwartz",
  "prodUrl": "https://grateful-capybara-946.convex.cloud",
  "functions": "convex/",
  "authInfo": []
}

which line?

ballingt•3y ago

maybe this isn't working, or you created the convex directory manually Change "functions": "convex/" to "functions": "src/convex/"

supergregOP•3y ago

If I messed something up I can try removing and adding the config again

ballingt•3y ago

Changing it manually isn't bad, it's just moving the folder, changing this line. I'm just curious if the Convex code detecting create-react-app isn't working so I can fix it.

supergregOP•3y ago

That seems to have fixed the error!

ballingt•3y ago

Let us know if you hit any other issues!

supergregOP•3y ago

Thank you! I will 🙂 Hmm, I think I'm missing something. When I do an insert, I'm not getting any result (success/fail, here's the new ID, etc). How do I get that?

supergregOP•3y ago

/src/convex/contracts.ts:

import { mutation, query } from './_generated/server';

export const add = mutation(async ({ db }, name, chainName, ownerAddress, contractAbi, contractAddress, contractCode, timesLoaded) => {
  await db.insert('contracts', {
    name,
    chainName,
    ownerAddress,
    contractAbi,
    contractAddress,
    contractCode,
    timesLoaded
  });
});

export const get = query(async ({ db }) => {
  return await db.query('contracts').collect();
});

import { mutation, query } from './_generated/server';

export const add = mutation(async ({ db }, name, chainName, ownerAddress, contractAbi, contractAddress, contractCode, timesLoaded) => {
  await db.insert('contracts', {
    name,
    chainName,
    ownerAddress,
    contractAbi,
    contractAddress,
    contractCode,
    timesLoaded
  });
});

export const get = query(async ({ db }) => {
  return await db.query('contracts').collect();
});

Oh, I should be doing return await db.insert() ? Hm, no that doesn't seem to help.

supergregOP•3y ago

Hm. Now I'm getting this error, that's odd:

supergregOP•3y ago

And I am running npm run start which then does concurrently 'convex dev' 'react-scripts start'

ballingt•3y ago

Hm! Maybe try running npx convex dev alone to make sure this is running

create-react-app `convex/` folder location

Did you find this page helpful?