Can't resolve o1js

[atreyasuraj]

Can't resolve o1js

[shimkiv]

@atreyasuraj thank you, you should not rename or change anything apart of installing deps. The version zk project creates currently is different from what it is in that example of specific branch. I'll check it if we missed anything in docs examples.

[shimkiv]

Hey @atreyasuraj Next.js docs are being updated at the moment.
The complete working example can be found here: https://github.com/o1-labs/docs2/tree/fix/next-project/examples/zkapps/04-zkapp-browser-ui
(don't forget to visit the ./contracts project and do npm i + npm run build before going back to ./ui project and start dev server (npm run dev) or do production builds).

[atreyasuraj]

Hi @shimkiv I am still facing the same issues. I followed the same steps as above you mentioned. Below is the error:

> [email protected] dev
> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
- event compiled client and server successfully in 91 ms (18 modules)
- wait compiling...
- event compiled client and server successfully in 75 ms (18 modules)
- wait compiling / (client and server)...
- error ./src/pages/index.page.tsx:1:0
Module not found: Can't resolve 'o1js'
> 1 | import { Field, PublicKey } from 'o1js';
  2 | import { useEffect, useState } from 'react';
  3 | import GradientBG from '../components/GradientBG.js';
  4 | import styles from '../styles/Home.module.css';

https://nextjs.org/docs/messages/module-not-found
- wait compiling /_error (client and server)...
- error ./src/pages/index.page.tsx:1:0
Module not found: Can't resolve 'o1js'
> 1 | import { Field, PublicKey } from 'o1js';
  2 | import { useEffect, useState } from 'react';
  3 | import GradientBG from '../components/GradientBG.js';
  4 | import styles from '../styles/Home.module.css';

https://nextjs.org/docs/messages/module-not-found

[shimkiv]

@atreyasuraj you probably did but just in case I'll ask it: have you installed (npm i) the dependencies for the ./ui project as well?

[shimkiv]

@atreyasuraj and please make sure you're using same versions as in https://github.com/o1-labs/docs2/blob/fix/next-project/examples/zkapps/04-zkapp-browser-ui/ui/package.json

[atreyasuraj]

@shimkiv thanks for the tip! The way I solved it is to create a zk project <project-name> and copy the ui directory from the examples from the https://github.com/o1-labs/docs2/blob/fix/next-project/examples/zkapps/04-zkapp-browser-ui/ui/ into the created project. I think there are a few version mismatch with the ones in the examples dir compared to what zk project creates. Another change I had to manually do was to change the index.page.tsx to index.tsx Cheers!

[shimkiv]

So I've checked this projects: https://github.com/o1-labs/docs2/blob/fix/next-project/examples/zkapps/04-zkapp-browser-ui

1. cd 04-zkapp-browser-ui/contracts
2. npm i
3. npm run build
4. cd ../ui
5. npm i
6. npm run dev
7. Opened browser and watched how application loaded successfully.

It work fine. @atreyasuraj can you maybe share your project with initial issue you faced while you created this issue?

[atreyasuraj]

@shimkiv Yep, exact same steps and I run into the error. I am running this on Mac M1 Pro. Does that matter?

$ ui % npm --version
10.5.0

$ ui % uname -a
Darwin macbook.local 23.4.0 Darwin Kernel Version 23.4.0: Fri Mar 15 00:10:42 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6000 arm64