Next 14 issues

[liujun93]

From Discord dgabri3le | Gelotto:

Getting these errors while using CK within next14 app router:

Moved everything over into the old pages router
No more hydration error, but when the modal opens up, I'm getting

The 50 error messages are all Failed to decode downloaded font: https://fonts.googleapis.com/css?family=Inter
I had removed next/font with this repo
I can add it back in, but perhaps its best not to have CK assume it's there -- if that's indeed what's happening. Not sure yet
Added next/font back but no difference

app      |  ○ Compiling / ...
app      |  ⚠ ./node_modules/pino/lib/tools.js
app      | Module not found: Can't resolve 'pino-pretty' in '/usr/src/node_modules/pino/lib'
app      | 
app      | Import trace for requested module:
app      | ./node_modules/pino/lib/tools.js
app      | ./node_modules/pino/pino.js
app      | ./node_modules/@walletconnect/logger/dist/cjs/index.js
app      | ./node_modules/@walletconnect/sign-client/dist/index.es.js
app      | ./node_modules/@cosmos-kit/walletconnect/esm/client.js
app      | ./node_modules/@cosmos-kit/walletconnect/esm/index.js
app      | ./node_modules/@cosmos-kit/keplr-mobile/esm/wallet-connect/chain-wallet.js
app      | ./node_modules/@cosmos-kit/keplr-mobile/esm/wallet-connect/index.js
app      | ./node_modules/@cosmos-kit/keplr-mobile/esm/index.js
app      | ./node_modules/@cosmos-kit/keplr/esm/index.js
app      | ./app/layout.tsx
app      | [DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`.
app      | [DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`.
app      | [DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937
app      |  ⚠ ./node_modules/pino/lib/tools.js
app      | Module not found: Can't resolve 'pino-pretty' in '/usr/src/node_modules/pino/lib'

[yyyyaaa]

@liujun93 can I take this? it's tied to interchain ui compatibility with app router

[liujun93]

@yyyyaaa sure

[baktun14]

I get the same error

[yyyyaaa]

Hey guys! Sorry for the delay, I was focusing on other issues, will get this fixed today

[agonist]

For the "pino-pretty" error you can update your next config this way:

const nextConfig = {
  webpack: (config) => {
    config.externals.push("pino-pretty");
    return config;
  },
}

on my side the issue I get is from importing import "@interchain-ui/react/styles"; in my layout.
but if I import both:

import "@interchain-ui/react/globalStyles";
import "@interchain-ui/react/styles";

Then its working and I dont get any compilation issue.

I'm using Next 14.1.0 with app router. I wrap my app within this component:

"use client";

import * as React from "react";

import { ChainProvider } from "@cosmos-kit/react";
import { chains, assets } from "chain-registry";
import { wallets } from "@cosmos-kit/keplr";
import "@interchain-ui/react/globalStyles";
import "@interchain-ui/react/styles";

export function CosmosProvider({ children }: { children: React.ReactNode }) {
  return (
    <ChainProvider
      chains={chains} // supported chains
      assetLists={assets} // supported asset lists
      wallets={wallets} // supported wallets
      //   walletConnectOptions={...} // required if `wallets` contains mobile wallets
    >
      {children}
    </ChainProvider>
  );
}

Hopefully it can help solving your issue.

[MbBrainz]

@agonist This solved the issue for me, Thanks!

For the "pino-pretty" error you can update your next config this way:

const nextConfig = {
  webpack: (config) => {
    config.externals.push("pino-pretty");
    return config;
  },
}