[SEI-5972] [BUG] Next.js frontend Integration with @sei-js requires global CSS module.
Closed this issue · 0 comments
Seid version
Show us output of seid version --long | head
SeiJS package & version
Check your package.json
for version number and package (core/react/proto)
My package.json file:
"name": "my-next-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@sei-js/core": "^3.1.1",
"@sei-js/react": "^3.1.1",
"next": "14.0.1",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.0.1",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
}
This is the same one after initializing a Next.js project with npx create-next-app my-next-app
Chain ID
Which chain are you running into issues with?
chainId: 'atlantic-2'
Describe the bug
A clear and concise description of what the bug is.
The bug seems to be related to the compatibility between the Next.js and the @sei-js package. When I tried to update the following code to _app.tsx, and run:
npm run build
I got the error:
(node:12637) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
Failed to compile.
./node_modules/@sei-js/react/dist/esm/lib/components/WalletConnectButton/styles.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@sei-js/react/dist/esm/lib/components/WalletConnectButton/WalletConnectButton.js
Import trace for requested module:
./node_modules/@sei-js/react/dist/esm/lib/components/WalletConnectButton/styles.css
./node_modules/@sei-js/react/dist/esm/lib/components/WalletConnectButton/WalletConnectButton.js
./node_modules/@sei-js/react/dist/esm/lib/components/WalletConnectButton/index.js
./node_modules/@sei-js/react/dist/esm/lib/components/index.js
./node_modules/@sei-js/react/dist/esm/lib/index.js
./node_modules/@sei-js/react/dist/esm/index.js
and
./node_modules/@sei-js/react/dist/esm/lib/components/WalletSelectModal/styles.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@sei-js/react/dist/esm/lib/components/WalletSelectModal/WalletSelectModal.js
Import trace for requested module:
./node_modules/@sei-js/react/dist/esm/lib/components/WalletSelectModal/styles.css
./node_modules/@sei-js/react/dist/esm/lib/components/WalletSelectModal/WalletSelectModal.js
./node_modules/@sei-js/react/dist/esm/lib/components/WalletSelectModal/index.js
./node_modules/@sei-js/react/dist/esm/lib/components/index.js
./node_modules/@sei-js/react/dist/esm/lib/index.js
./node_modules/@sei-js/react/dist/esm/index.js
I did some search only and found that possibly it is because Next.js does not allow CSS import within node_modules but it seems like @sei-js has some internal node_modules imports in e.g. ./node_modules/@sei-js/react/dist/esm/lib/components/WalletSelectModal/WalletSelectModal.js
.
I tried to copy and paste the .css files to the ./styles
folder and failed. I also tried using next-transpile-modules
to change the Next.js's behaviour of CSS import but doesn't seem to work, neither.
Wondering could you provide some insights or solution on how to fix it? Thanks!
To Reproduce
Steps to reproduce the behavior:
- Run
npx create-next-app my-next-app
to create a Next.js project. Using the following options:
- Install @sei-js packages:
npm install && npm install @sei-js/core @sei-js/react
- Change
./pages/_app.tsx
to this:
import '@/styles/globals.css'
// import '@/styles/base.css';
import type { AppProps } from 'next/app'
import { SeiWalletProvider } from '@sei-js/react';
import { Inter } from 'next/font/google';
const inter = Inter({
variable: '--font-inter',
subsets: ['latin'],
});
export default function App({ Component, pageProps }: AppProps) {
return (
<SeiWalletProvider
chainConfiguration={{
chainId: 'atlantic-2',
restUrl: 'https://rest.atlantic-2.seinetwork.io',
rpcUrl: 'https://rpc.atlantic-2.seinetwork.io'
}}
wallets={['compass', 'fin']}>
<main className={inter.variable}>
<Component {...pageProps} />
</main>
</SeiWalletProvider>
)
}
- Run
npm run build
and the error should occur
Expected behavior
I tested the same script with React.js template and works smoothly so I suspect this is a Next.js-related issue.
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
From SyncLinear.com | SEI-5972