thirdweb-example/cra-javascript-starter

thirdweb starter project with Create React App & JavaScript

CRA JavaScript Starter

Starter kit to build with Create React App and thirdweb without additional initial configuration.

Installation

Install the template with thirdweb create

 npx thirdweb create --template cra-javascript-starter

Run Locally

Install dependencies

yarn

Start the server

yarn start

Environment Variables

To run this project, you will need to add the CLIENT_ID variables to your .env file.

You can generate your clientId and secretKey via thirdweb's dashboard.

Deployment

Deploy a copy of your application to IPFS using the following command:

yarn deploy

Additional Resources

• Documentation
• Templates
• Video Tutorials
• Blog

Contributing

Contributions and feedback are always welcome!

Please visit our open source page for more information.

Need help?

For help, join the discord or visit our support page.

cra-javascript-starter's Issues

Create-React-App v5+ Broken

Running npm start or yarn start both create this error:

ERROR in ./node_modules/@zag-js/react/dist/index.mjs 6:0-71
Module not found: Error: Can't resolve 'use-sync-external-store/shim' in '~\thirdweb-app-js\node_modules\@zag-js\react\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'use-sync-external-store/shim' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Projects were created using these commands:

• npx thirdweb create --app --cra --js
• npx thirdweb create --template cra-javascript-starter

Package.json contains:

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^14.2.0",
    "@thirdweb-dev/react": "^2",
    "@thirdweb-dev/sdk": "^2",
    "ethers": "^5.6.8",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "assert": "^2.0.0",
    "stream": "^0.0.2"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

CLI versions:
thirdweb-cli v0.7.3
Node v16.14.2
NPM v8.5.0

cmd npm run WARNING

C:\Users\Administrator>node -v
v14.19.1

C:\Users\Administrator>npm -v
8.6.0

C:\Users\Administrator>create-react-app --version
5.0.1

---

npm run

WARNING in ./node_modules/@metamask/safe-event-emitter/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\web\cra-javascript-starter\node_modules@metamask\safe-event-emitter\index.ts' file: Error: ENOENT: no such file or directory, open 'F:\web\cra-javascript-starter\node_modules@metamask\safe-event-emitter\index.ts'
@ ./node_modules/@coinbase/wallet-sdk/dist/provider/CoinbaseWalletProvider.js 15:45-84
@ ./node_modules/@coinbase/wallet-sdk/dist/index.js 11:33-77 22:31-75
@ ./node_modules/wagmi-core/connectors/coinbaseWallet/dist/wagmi-core-connectors-coinbaseWallet.esm.js 3:0-57 117:47-64
@ ./node_modules/wagmi/connectors/coinbaseWallet/dist/wagmi-connectors-coinbaseWallet.esm.js 1:0-79 1:0-79
@ ./node_modules/@thirdweb-dev/react/dist/index.js 42614:9-51
@ ./src/index.js 8:0-64 11:22-37 13:33-49

WARNING in ./node_modules/@thirdweb-dev/react/dist/index.js 39772:47-54
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
@ ./src/index.js 8:0-64 11:22-37 13:33-49

WARNING in ./node_modules/@thirdweb-dev/react/dist/index.js 39775:37-44
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
@ ./src/index.js 8:0-64 11:22-37 13:33-49

WARNING in ./node_modules/@walletconnect/browser-utils/dist/esm/browser.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\web\cra-javascript-starter\node_modules@walletconnect\browser-utils\src\browser.ts' file: Error: ENOENT: no such file or directory, open 'F:\web\cra-javascript-starter\node_modules@walletconnect\browser-utils\src\browser.ts'
@ ./node_modules/@walletconnect/browser-utils/dist/esm/index.js 1:0-26 1:0-26
@ ./node_modules/@walletconnect/utils/dist/esm/index.js 1:0-45 1:0-45
@ ./node_modules/@walletconnect/ethereum-provider/dist/esm/index.js 4:0-65 58:8-31 126:19-28
@ ./node_modules/wagmi-core/connectors/walletConnect/dist/wagmi-core-connectors-walletConnect.esm.js 3:0-69 119:102-123
@ ./node_modules/wagmi/connectors/walletConnect/dist/wagmi-connectors-walletConnect.esm.js 1:0-77 1:0-77
@ ./node_modules/@thirdweb-dev/react/dist/index.js 42616:9-50
@ ./src/index.js 8:0-64 11:22-37 13:33-49

WARNING in ./node_modules/@walletconnect/browser-utils/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\web\cra-javascript-starter\node_modules@walletconnect\browser-utils\src\index.ts' file: Error: ENOENT: no such file or directory, open 'F:\web\cra-javascript-starter\node_modules@walletconnect\browser-utils\src\index.ts'
@ ./node_modules/@walletconnect/utils/dist/esm/index.js 1:0-45 1:0-45
@ ./node_modules/@walletconnect/ethereum-provider/dist/esm/index.js 4:0-65 58:8-31 126:19-28
@ ./node_modules/wagmi-core/connectors/walletConnect/dist/wagmi-core-connectors-walletConnect.esm.js 3:0-69 119:102-123
@ ./node_modules/wagmi/connectors/walletConnect/dist/wagmi-connectors-walletConnect.esm.js 1:0-77 1:0-77
@ ./node_modules/@thirdweb-dev/react/dist/index.js 42616:9-50
@ ./src/index.js 8:0-64 11:22-37 13:33-49

WARNING in ./node_modules/@walletconnect/browser-utils/dist/esm/json.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\web\cra-javascript-starter\node_modules@walletconnect\browser-utils\src\json.ts' file: Error: ENOENT: no such file or directory, open 'F:\web\cra-javascript-starter\node_modules@walletconnect\browser-utils\src\json.ts'
@ ./node_modules/@walletconnect/browser-utils/dist/esm/index.js 2:0-23 2:0-23
@ ./node_modules/@walletconnect/utils/dist/esm/index.js 1:0-45 1:0-45
@ ./node_modules/@walletconnect/ethereum-provider/dist/esm/index.js 4:0-65 58:8-31 126:19-28
@ ./node_modules/wagmi-core/connectors/walletConnect/dist/wagmi-core-connectors-walletConnect.esm.js 3:0-69 119:102-123
@ ./node_modules/wagmi/connectors/walletConnect/dist/wagmi-connectors-walletConnect.esm.js 1:0-77 1:0-77
@ ./node_modules/@thirdweb-dev/react/dist/index.js 42616:9-50
@ ./src/index.js 8:0-64 11:22-37 13:33-49

WARNING in ./node_modules/@walletconnect/browser-utils/dist/esm/local.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\web\cra-javascript-starter\node_modules@walletconnect\browser-utils\src\local.ts' file: Error: ENOENT: no such file or directory, open 'F:\web\cra-javascript-starter\node_modules@walletconnect\browser-utils\src\local.ts'
@ ./node_modules/@walletconnect/browser-utils/dist/esm/index.js 3:0-24 3:0-24
@ ./node_modules/@walletconnect/utils/dist/esm/index.js 1:0-45 1:0-45
@ ./node_modules/@walletconnect/ethereum-provider/dist/esm/index.js 4:0-65 58:8-31 126:19-28
@ ./node_modules/wagmi-core/connectors/walletConnect/dist/wagmi-core-connectors-walletConnect.esm.js 3:0-69 119:102-123
@ ./node_modules/wagmi/connectors/walletConnect/dist/wagmi-connectors-walletConnect.esm.js 1:0-77 1:0-77
@ ./node_modules/@thirdweb-dev/react/dist/index.js 42616:9-50
@ ./src/index.js 8:0-64 11:22-37 13:33-49

WARNING in ./node_modules/@walletconnect/browser-utils/dist/esm/mobile.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\web\cra-javascript-starter\node_modules@walletconnect\browser-utils\src\mobile.ts' file: Error: ENOENT: no such file or directory, open 'F:\web\cra-javascript-starter\node_modules@walletconnect\browser-utils\src\mobile.ts'
@ ./node_modules/@walletconnect/browser-utils/dist/esm/index.js 4:0-25 4:0-25
@ ./node_modules/@walletconnect/utils/dist/esm/index.js 1:0-45 1:0-45
@ ./node_modules/@walletconnect/ethereum-provider/dist/esm/index.js 4:0-65 58:8-31 126:19-28
@ ./node_modules/wagmi-core/connectors/walletConnect/dist/wagmi-core-connectors-walletConnect.esm.js 3:0-69 119:102-123
@ ./node_modules/wagmi/connectors/walletConnect/dist/wagmi-connectors-walletConnect.esm.js 1:0-77 1:0-77
@ ./node_modules/@thirdweb-dev/react/dist/index.js 42616:9-50
@ ./src/index.js 8:0-64 11:22-37 13:33-49

WARNING in ./node_modules/@walletconnect/browser-utils/dist/esm/registry.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\web\cra-javascript-starter\node_modules@walletconnect\browser-utils\src\registry.ts' file: Error: ENOENT: no such file or directory, open 'F:\web\cra-javascript-starter\node_modules@walletconnect\browser-utils\src\registry.ts'
@ ./node_modules/@walletconnect/browser-utils/dist/esm/index.js 5:0-27 5:0-27
@ ./node_modules/@walletconnect/utils/dist/esm/index.js 1:0-45 1:0-45
@ ./node_modules/@walletconnect/ethereum-provider/dist/esm/index.js 4:0-65 58:8-31 126:19-28
@ ./node_modules/wagmi-core/connectors/walletConnect/dist/wagmi-core-connectors-walletConnect.esm.js 3:0-69 119:102-123
@ ./node_modules/wagmi/connectors/walletConnect/dist/wagmi-connectors-walletConnect.esm.js 1:0-77 1:0-77
@ ./node_modules/@thirdweb-dev/react/dist/index.js 42616:9-50
@ ./src/index.js 8:0-64 11:22-37 13:33-49
...

WARNING in ./node_modules/json-rpc-engine/dist/getUniqueId.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\web\cra-javascript-starter\node_modules\json-rpc-engine\src\getUniqueId.ts' file: Error: ENOENT: no such file or directory, open 'F:\web\cra-javascript-starter\node_modules\json-rpc-engine\src\getUniqueId.ts'
@ ./node_modules/json-rpc-engine/dist/index.js 30:13-37
@ ./node_modules/eth-json-rpc-filters/subscriptionManager.js 7:4-30 @ ./node_modules/@coinbase/wallet-sdk/dist/provider/SubscriptionManager.js 10:34-85
@ ./node_modules/@coinbase/wallet-sdk/dist/provider/CoinbaseWalletProvider.js 35:30-62
@ ./node_modules/@coinbase/wallet-sdk/dist/index.js 11:33-77 22:31-75
@ ./node_modules/wagmi-core/connectors/coinbaseWallet/dist/wagmi-core-connectors-coinbaseWallet.esm.js 3:0-57 117:47-64
@ ./node_modules/wagmi/connectors/coinbaseWallet/dist/wagmi-connectors-coinbaseWallet.esm.js 1:0-79 1:0-79
@ ./node_modules/@thirdweb-dev/react/dist/index.js 42614:9-51
@ ./src/index.js 8:0-64 11:22-37 13:33-49

WARNING in ./node_modules/json-rpc-engine/dist/idRemapMiddleware.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\web\cra-javascript-starter\node_modules\json-rpc-engine\src\idRemapMiddleware.ts' file: Error: ENOENT: no such file or directory, open 'F:\web\cra-javascript-starter\node_modules\json-rpc-engine\src\idRemapMiddleware.ts'
@ ./node_modules/json-rpc-engine/dist/index.js 24:13-43
@ ./node_modules/eth-json-rpc-filters/subscriptionManager.js 7:4-30 @ ./node_modules/@coinbase/wallet-sdk/dist/provider/SubscriptionManager.js 10:34-85
@ ./node_modules/@coinbase/wallet-sdk/dist/provider/CoinbaseWalletProvider.js 35:30-62
@ ./node_modules/@coinbase/wallet-sdk/dist/index.js 11:33-77 22:31-75
@ ./node_modules/wagmi-core/connectors/coinbaseWallet/dist/wagmi-core-connectors-coinbaseWallet.esm.js 3:0-57 117:47-64
@ ./node_modules/wagmi/connectors/coinbaseWallet/dist/wagmi-connectors-coinbaseWallet.esm.js 1:0-79 1:0-79
@ ./node_modules/@thirdweb-dev/react/dist/index.js 42614:9-51
@ ./src/index.js 8:0-64 11:22-37 13:33-49

WARNING in ./node_modules/json-rpc-engine/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\web\cra-javascript-starter\node_modules\json-rpc-engine\src\index.ts' file: Error: ENOENT: no such file or directory, open 'F:\web\cra-javascript-starter\node_modules\json-rpc-engine\src\index.ts'
@ ./node_modules/eth-json-rpc-filters/subscriptionManager.js 7:4-30 @ ./node_modules/@coinbase/wallet-sdk/dist/provider/SubscriptionManager.js 10:34-85
@ ./node_modules/@coinbase/wallet-sdk/dist/provider/CoinbaseWalletProvider.js 35:30-62
@ ./node_modules/@coinbase/wallet-sdk/dist/index.js 11:33-77 22:31-75
@ ./node_modules/wagmi-core/connectors/coinbaseWallet/dist/wagmi-core-connectors-coinbaseWallet.esm.js 3:0-57 117:47-64
@ ./node_modules/wagmi/connectors/coinbaseWallet/dist/wagmi-connectors-coinbaseWallet.esm.js 1:0-79 1:0-79
@ ./node_modules/@thirdweb-dev/react/dist/index.js 42614:9-51
@ ./src/index.js 8:0-64 11:22-37 13:33-49

WARNING in ./node_modules/json-rpc-engine/dist/mergeMiddleware.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\web\cra-javascript-starter\node_modules\json-rpc-engine\src\mergeMiddleware.ts' file: Error: ENOENT: no such file or directory, open 'F:\web\cra-javascript-starter\node_modules\json-rpc-engine\src\mergeMiddleware.ts'
@ ./node_modules/json-rpc-engine/dist/index.js 34:13-41
@ ./node_modules/eth-json-rpc-filters/subscriptionManager.js 7:4-30 @ ./node_modules/@coinbase/wallet-sdk/dist/provider/SubscriptionManager.js 10:34-85
@ ./node_modules/@coinbase/wallet-sdk/dist/provider/CoinbaseWalletProvider.js 35:30-62
@ ./node_modules/@coinbase/wallet-sdk/dist/index.js 11:33-77 22:31-75
@ ./node_modules/wagmi-core/connectors/coinbaseWallet/dist/wagmi-core-connectors-coinbaseWallet.esm.js 3:0-57 117:47-64
@ ./node_modules/wagmi/connectors/coinbaseWallet/dist/wagmi-connectors-coinbaseWallet.esm.js 1:0-79 1:0-79
@ ./node_modules/@thirdweb-dev/react/dist/index.js 42614:9-51
@ ./src/index.js 8:0-64 11:22-37 13:33-49

83 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.72.1 compiled with 83 warnings in 24030 ms

npm start err

localhost:3000

Compiled with problems:X

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in '/www/web/node_modules/cipher-base'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js 39:31-48

Module not found: Error: Can't resolve 'assert' in '/www/web/node_modules/ethereumjs-util/dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "assert": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/address.js 14:31-48

Module not found: Error: Can't resolve 'assert' in '/www/web/node_modules/ethereumjs-util/dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "assert": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/object.js 14:31-48

Module not found: Error: Can't resolve 'assert' in '/www/web/node_modules/ethereumjs-util/dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "assert": false }