Attempting to use ses with create-cosmos-app.
I created a cosmos app using create-cosmos-app in the initial commit. Then, I tried to install and run ses using a top-level import with the pattern described in https://nextjs.org/docs/architecture/supported-browsers#custom-polyfills.
I ran into the following error (screenshot):
Full call-stack from the browser:
Object
node_modules/next/dist/pages/_document.js (2:0)
eval
file:///Users/samuelsiegart/hardened-create-cosmos-app/node_modules/ses/src/make-evaluate.js (92:27)
./node_modules/next/dist/pages/_document.js
file:///Users/samuelsiegart/hardened-create-cosmos-app/.next/server/vendor-chunks/next.js (30:1)
__webpack_require__
file:///Users/samuelsiegart/hardened-create-cosmos-app/.next/server/webpack-runtime.js (33:42)
__webpack_exec__
file:///Users/samuelsiegart/hardened-create-cosmos-app/.next/server/pages/_document.js (52:39)
<unknown>
file:///Users/samuelsiegart/hardened-create-cosmos-app/.next/server/pages/_document.js (53:83)
__webpack_require__.X
file:///Users/samuelsiegart/hardened-create-cosmos-app/.next/server/webpack-runtime.js (185:21)
<unknown>
file:///Users/samuelsiegart/hardened-create-cosmos-app/.next/server/pages/_document.js (53:47)
Object.<anonymous>
file:///Users/samuelsiegart/hardened-create-cosmos-app/.next/server/pages/_document.js (56:3)
Logs from the server:
%
yarn dev
yarn run v1.22.21
$ next dev
▲ Next.js 13.5.6
- Local: http://localhost:3000
✓ Ready in 2.4s
✓ Compiled / in 1433ms (2269 modules)
⨯ [ReferenceError: __webpack_require__ is not defined
at Object.eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F&preferredRegion=&absolutePagePath=.%2Fpages%2Findex.tsx&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D!:1:1)
at eval (eval at makeEvaluate (file:///Users/samuelsiegart/hardened-create-cosmos-app/node_modules/ses/src/make-evaluate.js:92:27), <anonymous>:12:22)
at ./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F&preferredRegion=&absolutePagePath=.%2Fpages%2Findex.tsx&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D! (/Users/samuelsiegart/hardened-create-cosmos-app/.next/server/pages/index.js:22:1)
at __webpack_require__ (/Users/samuelsiegart/hardened-create-cosmos-app/.next/server/webpack-runtime.js:33:42)
at __webpack_exec__ (/Users/samuelsiegart/hardened-create-cosmos-app/.next/server/pages/index.js:361:39)
at /Users/samuelsiegart/hardened-create-cosmos-app/.next/server/pages/index.js:362:114
at __webpack_require__.X (/Users/samuelsiegart/hardened-create-cosmos-app/.next/server/webpack-runtime.js:185:21)
at /Users/samuelsiegart/hardened-create-cosmos-app/.next/server/pages/index.js:362:47
at Object.<anonymous> (/Users/samuelsiegart/hardened-create-cosmos-app/.next/server/pages/index.js:365:3)] {
page: '/'
}
✓ Compiled /_error in 1752ms (2271 modules)
[ReferenceError: exports is not defined
at Object.eval (webpack-internal:///./node_modules/next/dist/pages/_document.js:2:23)
at eval (eval at makeEvaluate (file:///Users/samuelsiegart/hardened-create-cosmos-app/node_modules/ses/src/make-evaluate.js:92:27), <anonymous>:12:22)
at ./node_modules/next/dist/pages/_document.js (/Users/samuelsiegart/hardened-create-cosmos-app/.next/server/vendor-chunks/next.js:30:1)
at __webpack_require__ (/Users/samuelsiegart/hardened-create-cosmos-app/.next/server/webpack-runtime.js:33:42)
at __webpack_exec__ (/Users/samuelsiegart/hardened-create-cosmos-app/.next/server/pages/_document.js:52:39)
at /Users/samuelsiegart/hardened-create-cosmos-app/.next/server/pages/_document.js:53:83
at __webpack_require__.X (/Users/samuelsiegart/hardened-create-cosmos-app/.next/server/webpack-runtime.js:185:21)
at /Users/samuelsiegart/hardened-create-cosmos-app/.next/server/pages/_document.js:53:47
at Object.<anonymous> (/Users/samuelsiegart/hardened-create-cosmos-app/.next/server/pages/_document.js:56:3)]
I was able to simply import 'ses' in the top-level without issue. The above error only occurs when I attempt to invoke lockdown as the current changes in the repo reflect.
First, install the packages and run the development server:
yarn && yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
The npm package for the Official Cosmos chain registry. Get chain and token data for you application.
Checkout more videos for how to use various frontend tooling in the Cosmos!
A wallet connector for the Cosmos ⚛️
A "babel for the Cosmos", Telescope is a TypeScript Transpiler for Cosmos Protobufs. Telescope is used to generate libraries for Cosmos blockchains. Simply point to your protobuffer files and create developer-friendly Typescript libraries for teams to build on your blockchain.
🎥 Checkout the Telescope video playlist to learn how to use telescope!
The quickest and easiest way to interact with CosmWasm Contracts. @cosmwasm/ts-codegen converts your CosmWasm smart contracts into dev-friendly TypeScript classes so you can focus on shipping code.
🎥 Checkout the CosmWasm/ts-codegen video playlist to learn how to use ts-codegen!
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Checkout these related projects:
- @cosmology/telescope Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules.
- @cosmwasm/ts-codegen Convert your CosmWasm smart contracts into dev-friendly TypeScript classes.
- chain-registry Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application.
- cosmos-kit Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface.
- create-cosmos-app Set up a modern Cosmos app by running one command.
- interchain-ui The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit.
- starship Unified Testing and Development for the Interchain.
🛠 Built by Cosmology — if you like our tools, please consider delegating to our validator ⚛️
AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND.
No developer or entity involved in creating this software will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the code, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value.