[SEI-5972] [BUG] Next.js frontend Integration with @sei-js requires global CSS module.

[skyve2012]

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:

1. Run npx create-next-app my-next-app to create a Next.js project. Using the following options:

1. Install @sei-js packages: npm install && npm install @sei-js/core @sei-js/react
2. 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>
  )
}

1. 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}