I have a rails app where I’m trying to add packages a simple react-rails component to a view I have. I’m able to get the react component to load fine in my .erb view without the packages. The react component is in /app/javascript/components. However, when importing modules into my component HelloWorld.jsx, the app crashes and says it can’t find the module.
Uncaught Error: Cannot find module 'connectkit'
at webpackMissingModule (application.js:1:1)
at Module.<anonymous> (application.js:1:1)
at ./app/javascript/packs/application.js (application.js:62:1)
at __webpack_require__ (bootstrap:19:1)
at bootstrap:83:1
at bootstrap:83:1
I’ve installed the modules with yarn add <module_name>, and I see the package in my package.json and in my node_modules. Tried removing my node_modules folder and reinstalling, but that didn’t solve the problem. What is the correct way to add a package to a ruby on rails app with react-rails? The module works fine if the imports are commented out and shows in my app but as soon as I include the imports, I get the error above
import React from 'react';
import PropTypes from 'prop-types';
import { WagmiConfig, createClient } from 'wagmi'; // importing these breaks the component;
import { ConnectKitProvider, ConnectKitButton, getDefaultClient } from 'connectkit'; // importing these breaks the component, works fine without;
const alchemyId = process.env.ALCHEMY_ID;
const client = createClient(
getDefaultClient({
appName: 'Your App Name',
alchemyId,
})
);
class HelloWorld extends React.Component {
render() {
return (
<React.Fragment>
<WagmiConfig client={client}>
<ConnectKitProvider>
Greeting: {this.props.greeting}
<ConnectKitButton />
</ConnectKitProvider>
</WagmiConfig>
Greeting: {this.props.greeting}
</React.Fragment>
);
}
}
HelloWorld.propTypes = {
greeting: PropTypes.string,
};
export default HelloWorld;