Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add fixes to the nextjs project for snarkyjs + typescript #287

Merged
merged 5 commits into from
Oct 27, 2022
Merged

add fixes to the nextjs project for snarkyjs + typescript #287

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
02c2480
add fixes to the nextjs project for snarkyjs + typescript
Oct 27, 2022
f2bbff8
disable react strict mode in nextjs to prevent double loading useEffects
Oct 27, 2022
3fea089
fix some thigns per comments
Oct 27, 2022
84f06ac
add ts-watch command to package.json
Oct 27, 2022
399a5db
update script per comments
Oct 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 48 additions & 1 deletion src/lib/project.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,9 +308,16 @@ async function scaffoldNext() {
sh.rm('-rf', path.join('ui', '.git')); // Remove NextJS' .git; we will init .git in our monorepo's root.
// Read in the NextJS config file and add the middleware.
const nextConfig = fs.readFileSync(path.join('ui', 'next.config.js'), 'utf8');
const newNextConfig = nextConfig.replace(
let newNextConfig = nextConfig.replace(
/^}(.*?)$/gm, // Search for the last '}' in the file.
`
webpack(config) {
config.resolve.alias = {
...config.resolve.alias,
snarkyjs: require('path').resolve('./node_modules/snarkyjs'),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm curious why this is required

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This ensures that the smart contract's snarkyjs and the ui's snarkyjs are the same - otherwise they get imported multiple times. See here for more, in the context of fixing this for duplicate instances of react

Copy link
Collaborator

@ymekuria ymekuria Oct 27, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Peer dependancies appeared to fix this issue for contracts imported via npm but not via npm link.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks @es92 this link is a nice resource! another potential trick with npm link is mentioned here (at the bottom): https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

}
return config;
},
// To enable SnarkyJS for the web, we must set the COOP and COEP headers.
// See here for more information: https://docs.minaprotocol.com/zkapps/how-to-write-a-zkapp-ui#enabling-coop-and-coep-headers
async headers() {
Expand All @@ -332,7 +339,47 @@ async function scaffoldNext() {
}
};`
);
newNextConfig = newNextConfig.replace(
ymekuria marked this conversation as resolved.
Show resolved Hide resolved
'reactStrictMode: true',
'reactStrictMode: false'
);
fs.writeFileSync(path.join('ui', 'next.config.js'), newNextConfig);

ymekuria marked this conversation as resolved.
Show resolved Hide resolved
const tsconfig = `
{
"compilerOptions": {
"target": "ES2019",
"module": "es2022",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"strictPropertyInitialization": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
`;

es92 marked this conversation as resolved.
Show resolved Hide resolved
if (useTypescript == 'yes') {
fs.writeFileSync(path.join('ui', 'tsconfig.json'), tsconfig);

// Add a script to the package.json
let x = fs.readJSONSync(`ui/package.json`);
x.scripts['ts-watch'] = 'tsc --noEmit --incremental --watch';
fs.writeJSONSync(`ui/package.json`, x, { spaces: 2 });
}
}

function scaffoldNuxt() {
Expand Down