fix: ensure 'basic' anchor template works with Anchor 0.30.x

packages/preset-anchor/src/generators/anchor-application/__snapshots__/anchor-application-generator.spec.ts.snap

@@ -345,9 +345,9 @@ exports[`anchor-application generator should generate app with "basic" template
         "content": [
           "// Here we export some useful types and functions for interacting with the Anchor program.",
           "import { AnchorProvider, Program } from '@coral-xyz/anchor';",
-          "import { PublicKey } from '@solana/web3.js';",
+          "import { Cluster, PublicKey } from '@solana/web3.js';",
+          "import MyProgramIDL from '../target/idl/my_program.json';",
           "import type { MyProgram } from '../target/types/my_program';",
-          "import { IDL as MyProgramIDL } from '../target/types/my_program';",
           "// Re-export the generated IDL and type",
           "export { MyProgram, MyProgramIDL };",
           "// The programId is imported from the program IDL.",
@@ -356,6 +356,16 @@ exports[`anchor-application generator should generate app with "basic" template
           "export function getMyProgramProgram(provider: AnchorProvider) {",
           "return new Program(MyProgramIDL as MyProgram, provider);",
           "}",
+          "// This is a helper function to get the program ID for the MyProgram program depending on the cluster.",
+          "export function getMyProgramProgramId(cluster: Cluster) {",
+          "switch (cluster) {",
+          "case 'devnet':",
+          "case 'testnet':",
+          "case 'mainnet-beta':",
+          "default:",
+          "return MY_PROGRAM_PROGRAM_ID;",
+          "}",
+          "}",
         ],
         "isBinary": false,
         "path": "anchor-app/src/my-program-exports.ts",

packages/preset-anchor/src/generators/anchor-template/__snapshots__/anchor-template-generator.spec.ts.snap

@@ -1239,9 +1239,9 @@ exports[`anchor-template generator should generate files for basic template 1`]
         "content": [
           "// Here we export some useful types and functions for interacting with the Anchor program.",
           "import { AnchorProvider, Program } from '@coral-xyz/anchor';",
-          "import { PublicKey } from '@solana/web3.js';",
+          "import { Cluster, PublicKey } from '@solana/web3.js';",
+          "import BasicIDL from '../target/idl/basic.json';",
           "import type { Basic } from '../target/types/basic';",
-          "import { IDL as BasicIDL } from '../target/types/basic';",
           "// Re-export the generated IDL and type",
           "export { Basic, BasicIDL };",
           "// The programId is imported from the program IDL.",
@@ -1250,6 +1250,16 @@ exports[`anchor-template generator should generate files for basic template 1`]
           "export function getBasicProgram(provider: AnchorProvider) {",
           "return new Program(BasicIDL as Basic, provider);",
           "}",
+          "// This is a helper function to get the program ID for the Basic program depending on the cluster.",
+          "export function getBasicProgramId(cluster: Cluster) {",
+          "switch (cluster) {",
+          "case 'devnet':",
+          "case 'testnet':",
+          "case 'mainnet-beta':",
+          "default:",
+          "return BASIC_PROGRAM_ID",
+          "}",
+          "}",
         ],
         "isBinary": false,
         "path": "target/src/basic-exports.ts",

packages/preset-anchor/src/generators/anchor-template/files/basic/src/__fileName__-exports.ts.template

@@ -1,8 +1,8 @@
 // Here we export some useful types and functions for interacting with the Anchor program.
 import { AnchorProvider, Program } from '@coral-xyz/anchor';
-import { PublicKey } from '@solana/web3.js';
+import { Cluster, PublicKey } from '@solana/web3.js';
+import <%= className %>IDL from '../target/idl/<%= fileNameUnderscore %>.json';
 import type { <%= className %> } from '../target/types/<%= fileNameUnderscore %>';
-import { IDL as <%= className %>IDL } from '../target/types/<%= fileNameUnderscore %>';
 
 // Re-export the generated IDL and type
 export { <%= className %>, <%= className %>IDL };
@@ -14,3 +14,14 @@ export const <%= upperCaseName %>_PROGRAM_ID = new PublicKey(<%= className %>IDL
 export function get<%= className %>Program(provider: AnchorProvider) {
   return new Program(<%= className %>IDL as <%= className %>, provider);
 }
+
+// This is a helper function to get the program ID for the <%= className %> program depending on the cluster.
+export function get<%= className %>ProgramId(cluster: Cluster) {
+  switch (cluster) {
+    case 'devnet':
+    case 'testnet':
+    case 'mainnet-beta':
+    default:
+      return <%= upperCaseName %>_PROGRAM_ID
+  }
+}

packages/preset-react/src/generators/react-application/__snapshots__/react-application-generator.spec.ts.snap

@@ -638,7 +638,9 @@ exports[`react-application generator custom apps should generate app without anc
           ""node",",
           ""@nx/react/typings/cssmodule.d.ts",",
           ""@nx/react/typings/image.d.ts"",
-          "]",
+          "],",
+          ""resolveJsonModule": true,",
+          ""allowSyntheticDefaultImports": true",
           "},",
           ""exclude": [",
           ""jest.config.ts",",
@@ -692,6 +694,7 @@ exports[`react-application generator custom apps should generate app without anc
           "config.resolve.fallback = {",
           "crypto: require.resolve('crypto-browserify'),",
           "stream: require.resolve('stream-browserify'),",
+          "vm: false,",
           "};",
           "return config;",
           "});",
@@ -2292,7 +2295,9 @@ exports[`react-application generator default apps should generate default app wi
           ""node",",
           ""@nx/react/typings/cssmodule.d.ts",",
           ""@nx/react/typings/image.d.ts"",
-          "]",
+          "],",
+          ""resolveJsonModule": true,",
+          ""allowSyntheticDefaultImports": true",
           "},",
           ""exclude": [",
           ""jest.config.ts",",
@@ -2346,6 +2351,7 @@ exports[`react-application generator default apps should generate default app wi
           "config.resolve.fallback = {",
           "crypto: require.resolve('crypto-browserify'),",
           "stream: require.resolve('stream-browserify'),",
+          "vm: false,",
           "};",
           "return config;",
           "});",
@@ -5515,7 +5521,9 @@ exports[`react-application generator default apps should generate default app wi
           ""node",",
           ""@nx/react/typings/cssmodule.d.ts",",
           ""@nx/react/typings/image.d.ts"",
-          "]",
+          "],",
+          ""resolveJsonModule": true,",
+          ""allowSyntheticDefaultImports": true",
           "},",
           ""exclude": [",
           ""jest.config.ts",",
@@ -5569,6 +5577,7 @@ exports[`react-application generator default apps should generate default app wi
           "config.resolve.fallback = {",
           "crypto: require.resolve('crypto-browserify'),",
           "stream: require.resolve('stream-browserify'),",
+          "vm: false,",
           "};",
           "return config;",
           "});",

packages/preset-react/src/generators/react-feature/__snapshots__/react-feature-generator.spec.ts.snap

@@ -696,9 +696,9 @@ exports[`react-feature generator should generate files for anchor-basic feature
             "content": [
               "// Here we export some useful types and functions for interacting with the Anchor program.",
               "import { AnchorProvider, Program } from '@coral-xyz/anchor';",
-              "import { PublicKey } from '@solana/web3.js';",
+              "import { Cluster, PublicKey } from '@solana/web3.js';",
+              "import MyAnchorBasicProgramIDL from '../target/idl/my_anchor_basic_program.json';",
               "import type { MyAnchorBasicProgram } from '../target/types/my_anchor_basic_program';",
-              "import { IDL as MyAnchorBasicProgramIDL } from '../target/types/my_anchor_basic_program';",
               "// Re-export the generated IDL and type",
               "export { MyAnchorBasicProgram, MyAnchorBasicProgramIDL };",
               "// The programId is imported from the program IDL.",
@@ -707,6 +707,16 @@ exports[`react-feature generator should generate files for anchor-basic feature
               "export function getMyAnchorBasicProgramProgram(provider: AnchorProvider) {",
               "return new Program(MyAnchorBasicProgramIDL as MyAnchorBasicProgram, provider);",
               "}",
+              "// This is a helper function to get the program ID for the MyAnchorBasicProgram program depending on the cluster.",
+              "export function getMyAnchorBasicProgramProgramId(cluster: Cluster) {",
+              "switch (cluster) {",
+              "case 'devnet':",
+              "case 'testnet':",
+              "case 'mainnet-beta':",
+              "default:",
+              "return MY_ANCHOR_BASIC_PROGRAM_PROGRAM_ID",
+              "}",
+              "}",
             ],
             "isBinary": false,
             "path": "./anchor-app/src/my-anchor-basic-program-exports.ts",
@@ -2855,11 +2865,12 @@ exports[`react-feature generator should generate files for anchor-basic feature
                 "children": {
                   "my-anchor-basic-program-data-access.tsx": {
                     "content": [
-                      "import { programId, getMyAnchorBasicProgramProgram } from '@proj/anchor';",
+                      "import { getMyAnchorBasicProgramProgram, getMyAnchorBasicProgramProgramId } from '@proj/anchor'",
                       "import { Program } from '@coral-xyz/anchor';",
                       "import { useConnection } from '@solana/wallet-adapter-react';",
-                      "import { Keypair } from '@solana/web3.js';",
+                      "import { Cluster, Keypair } from '@solana/web3.js';",
                       "import { useMutation, useQuery } from '@tanstack/react-query';",
+                      "import { useMemo } from 'react';",
                       "import toast from 'react-hot-toast';",
                       "import { useCluster } from '../cluster/cluster-data-access';",
                       "import { useAnchorProvider } from '../solana/solana-provider';",
@@ -2869,7 +2880,11 @@ exports[`react-feature generator should generate files for anchor-basic feature
                       "const { cluster } = useCluster();",
                       "const transactionToast = useTransactionToast();",
                       "const provider = useAnchorProvider();",
-                      "const program = getMyAnchorBasicProgramProgram(provider);",
+                      "const programId = useMemo(",
+                      "() => getMyAnchorBasicProgramProgramId(cluster.network as Cluster),",
+                      "[cluster]",
+                      ");",
+                      "const program = getMyAnchorBasicProgramProgram(provider)",
                       "const getProgramAccount = useQuery({",
                       "queryKey: ['get-program-account', { cluster }],",
                       "queryFn: () => connection.getParsedAccountInfo(programId),",
@@ -3310,10 +3325,27 @@ exports[`react-feature generator should generate files for anchor-basic feature
           ""node",",
           ""@nx/react/typings/cssmodule.d.ts",",
           ""@nx/react/typings/image.d.ts"",
-          "]",
+          "],",
+          ""resolveJsonModule": true,",
+          ""allowSyntheticDefaultImports": true",
           "},",
-          ""exclude": ["jest.config.ts","src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],",
-          ""include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]",
+          ""exclude": [",
+          ""jest.config.ts",",
+          ""src/**/*.spec.ts",",
+          ""src/**/*.test.ts",",
+          ""src/**/*.spec.tsx",",
+          ""src/**/*.test.tsx",",
+          ""src/**/*.spec.js",",
+          ""src/**/*.test.js",",
+          ""src/**/*.spec.jsx",",
+          ""src/**/*.test.jsx"",
+          "],",
+          ""include": [",
+          ""src/**/*.js",",
+          ""src/**/*.jsx",",
+          ""src/**/*.ts",",
+          ""src/**/*.tsx"",
+          "]",
           "}",
         ],
         "isBinary": false,
@@ -3354,6 +3386,7 @@ exports[`react-feature generator should generate files for anchor-basic feature
           "config.resolve.fallback = {",
           "crypto: require.resolve('crypto-browserify'),",
           "stream: require.resolve('stream-browserify'),",
+          "vm: false,",
           "};",
           "return config;",
           "});",
@@ -7143,10 +7176,27 @@ exports[`react-feature generator should generate files for anchor-counter featur
           ""node",",
           ""@nx/react/typings/cssmodule.d.ts",",
           ""@nx/react/typings/image.d.ts"",
-          "]",
+          "],",
+          ""resolveJsonModule": true,",
+          ""allowSyntheticDefaultImports": true",
           "},",
-          ""exclude": ["jest.config.ts","src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],",
-          ""include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]",
+          ""exclude": [",
+          ""jest.config.ts",",
+          ""src/**/*.spec.ts",",
+          ""src/**/*.test.ts",",
+          ""src/**/*.spec.tsx",",
+          ""src/**/*.test.tsx",",
+          ""src/**/*.spec.js",",
+          ""src/**/*.test.js",",
+          ""src/**/*.spec.jsx",",
+          ""src/**/*.test.jsx"",
+          "],",
+          ""include": [",
+          ""src/**/*.js",",
+          ""src/**/*.jsx",",
+          ""src/**/*.ts",",
+          ""src/**/*.tsx"",
+          "]",
           "}",
         ],
         "isBinary": false,
@@ -7187,6 +7237,7 @@ exports[`react-feature generator should generate files for anchor-counter featur
           "config.resolve.fallback = {",
           "crypto: require.resolve('crypto-browserify'),",
           "stream: require.resolve('stream-browserify'),",
+          "vm: false,",
           "};",
           "return config;",
           "});",

packages/preset-react/src/generators/react-feature/files/anchor-basic/__fileName__-data-access.tsx.template

@@ -2,11 +2,12 @@
     'use client';
 
 <% } %>
-import { programId, get<%= className %>Program } from '@<%= npmScope %>/anchor';
+import { get<%= className %>Program, get<%= className %>ProgramId } from '@<%= npmScope %>/anchor'
 import { Program } from '@coral-xyz/anchor';
 import { useConnection } from '@solana/wallet-adapter-react';
-import { Keypair } from '@solana/web3.js';
+import { Cluster, Keypair } from '@solana/web3.js';
 import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
 import toast from 'react-hot-toast';
 import { useCluster } from '../cluster/cluster-data-access';
 import { useAnchorProvider } from '../solana/solana-provider';
@@ -17,7 +18,11 @@ export function use<%= className %>Program() {
   const { cluster } = useCluster();
   const transactionToast = useTransactionToast();
   const provider = useAnchorProvider();
-  const program = get<%= className %>Program(provider);
+  const programId = useMemo(
+    () => get<%= className %>ProgramId(cluster.network as Cluster),
+    [cluster]
+  );
+  const program = get<%= className %>Program(provider)
 
   const getProgramAccount = useQuery({
     queryKey: ['get-program-account', { cluster }],

packages/preset-react/src/generators/react-template/__snapshots__/react-template-generator.spec.ts.snap

@@ -61,6 +61,7 @@ exports[`react-template generator should generate files for base template 1`] =
       "config.resolve.fallback = {",
       "crypto: require.resolve('crypto-browserify'),",
       "stream: require.resolve('stream-browserify'),",
+      "vm: false,",
       "};",
       "return config;",
       "});",

packages/preset-react/src/generators/react-template/files/base/webpack.config.js.template

@@ -9,6 +9,7 @@ module.exports = composePlugins(withNx(), withReact(), (config) => {
   config.resolve.fallback = {
     crypto: require.resolve('crypto-browserify'),
     stream: require.resolve('stream-browserify'),
+    vm: false,
   };
 
   return config;

packages/preset-react/src/utils/generate-react-application.ts

@@ -29,5 +29,14 @@ export async function generateReactApplication(tree: Tree, options: NormalizedRe
     return json
   })
 
+  updateJson(tree, join(project.root, 'tsconfig.app.json'), (json) => {
+    json.compilerOptions = {
+      ...json.compilerOptions,
+      resolveJsonModule: true,
+      allowSyntheticDefaultImports: true,
+    }
+    return json
+  })
+
   return getProjects(tree).get(options.webName)
 }