0

I have a ready-made site where I need to import a button from react:

<html>
<head>
</head>
<body>

  <div id="root"></div>
  <script>
    ReactDOM.createRoot(<App />, document.getElementById("root"));
  </script>

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<!-- Load our React component. -->
<script src="src/App.js"></script>
</body>
</html>

From here:

import './App.css';
import { ConnectButton } from '@rainbow-me/rainbowkit';
     
function App() {
    return (
        <div className="App">
            <header className="App-header">
            <ConnectButton/>
            </header>
        </div>
    );
}
    
export default App;

index.js +I have already changed the render values ​​to createRoot as well as other related values ​​from Nikki9696 comment.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import '@rainbow-me/rainbowkit/styles.css';
import {
  getDefaultWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { configureChains, createClient, WagmiConfig } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
const { chains, provider } = configureChains(
  [mainnet, polygon, optimism, arbitrum],
  [
    alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
    publicProvider()
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'Evefund',
  chains
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider
})


const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
  <StrictMode>
        <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
      <App />
      </RainbowKitProvider>
    </WagmiConfig>
  </StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: 
reportWebVitals();

But its not rendering, what Im doing wrong? (html just a sample)

Thanks.

p.s. ChatGPT says everything should work C:

John Smith
  • 31
  • 1
  • 8
  • 2
    Do you have anything in the button to show? Try it with – Gordon Maloney Feb 07 '23 at 14:36
  • From where are you importing this button? MaterialUI of some other library? – Jamie_D Feb 07 '23 at 14:45
  • @GordonMaloney actually yes, I edited post. This is Rainbowkit and connect wallet button, I already have button on my website, but this functionality is amazing, so I decided to replace it with Rainbowkit button. – John Smith Feb 07 '23 at 14:45
  • @Jamie_D sorry, my bad, I edited post. – John Smith Feb 07 '23 at 14:47
  • As an aside, you're using react 18 - use createRoot not render. https://stackoverflow.com/questions/71668256/deprecation-notice-reactdom-render-is-no-longer-supported-in-react-18 – Nikki9696 Feb 07 '23 at 15:08
  • @Nikki9696 I did everything as stated in this post, but nothing has changed, while the button on localhost is displayed without problems, the code also seems to be clean, what before, what is now with version 18, idk what to do :'c – John Smith Feb 07 '23 at 15:28
  • Say, how would an existing app know where to get this import? `import { ConnectButton } from '@rainbow-me/rainbowkit';` – Nikki9696 Feb 07 '23 at 15:30

1 Answers1

0

you need to transpile your jsx into javascript using some tool like babel:

<html>
<head>
</head>
<body>

  <div id="root"></div>
  <script type="text/babel">
    ReactDOM.render(<App />, document.getElementById("root"));
  </script>

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
<!-- Load our React component. -->
<script src="src/App.js" type="text/babel"></script>
</body>
</html>

because javascript doesnt understand jsx it only understands functions from react like React.createElement()

Wraithy
  • 1,722
  • 1
  • 5
  • 13