@rainbow-me/rainbowkit/styles.css not found

[austin-mccollom]

RainbowKit version: 0.1.0
wagmi version: 0.3.5

I am installing RainbowKit in my React app following https://www.rainbowkit.com/docs/installation. I am able to use the ConnectButton to connect my wallet to my app. Everything functions as expected, but without styles. Then, as soon as I include import '@rainbow-me/rainbowkit/styles.css';, I get the following error:

./src/index.js
Module not found: Can't resolve '@rainbow-me/rainbowkit/styles.css' in '/Users/a/Documents/daylight/react-app/src'

I am setting up the provider, connectors, and client in the index.js:

import '@rainbow-me/rainbowkit/styles.css';
import {
  apiProvider,
  configureChains,
  getDefaultWallets,
  RainbowKitProvider,
} from "@rainbow-me/rainbowkit";
import { chain, createClient, WagmiProvider } from "wagmi";

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
  [apiProvider.infura(process.env.REACT_APP_INFURA_ID), apiProvider.fallback()]
);
const { connectors } = getDefaultWallets({
  appName: "My RainbowKit App",
  chains,
});
const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
});

ReactDOM.render(
  <WagmiProvider client={wagmiClient}>
    <RainbowKitProvider chains={chains}>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </RainbowKitProvider>
  </WagmiProvider>,
  document.getElementById("root")
);

Does anyone see what I'm doing wrong?

[nickbytes]

@git-austinmccollom we've added a few codesandbox examples here if it's helpful for debugging or checking the differences between yours and these: https://github.com/rainbow-me/rainbowkit#try-it-out

Any chance you could put together a minimal reproducible example for us to look at?

[Kixo]

I am using craco to compile, and I get the same issue. Is it possible that we can get a style.css file that we can just import into our project?

[nickbytes]

@git-austinmccollom were you able to get this figured out? By the way, you can also use our RainbowKit examples to scaffold out a new project w/ a few different types of frameworks/tooling, for example:

npx degit rainbow-me/rainbowkit-examples/with-next my-rainbowkit-app

or

npx degit rainbow-me/rainbowkit-examples/with-create-react-app my-rainbowkit-app

[austin-mccollom]

Thank you for helping. I was able to get styles to work by importing the actual file path instead of the alias. Seems the alias wasn't working.

Imported this to my index.js:
import '@rainbow-me/rainbowkit/dist/index.css';
Instead of this:
import 'rainbow-me/rainbowkit/styles.css';

Thought to try this after reading this in the package.json for the @rainbow-me node module:

"exports": {
".": "./dist/index.js",
"./styles.css": "./dist/index.css"
},

[milonite]

I'm having the same issue (the above solution works for me as well)

I Couldn't reproduce it on code sandbox, even with the same dependencies.

Here a basic cra app where this happens
https://github.com/milonite/rainbowkit-resolveCss-example