Unable to use with Create-React-App

[geoffwhittington]

I've been trying to pnpm add @meshtastic/meshtasticjs into an existing create-react-app but I keep getting errors

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "os": false }

This is how I created the react app:

pnpm create react-app pnpm-cra
cd pnpm-cra/ 
pnpm add @meshtastic/meshtasticjs

Then I added the snippet from the docs to a file Mesh.js:

import { IHTTPConnection } from "@meshtastic/meshtasticjs";

export const Connection = () => {
  const connection = new IHTTPConnection();

  const connect = () => {
    void connection.connect({
      address: "10.0.0.10",
      fetchInterval: 3000,
    });
  };

  return <button onClick={connect}>Connect Bluetooth</button>;
};

And then I tried to use it in App.js:

import logo from "./logo.svg";
import "./App.css";
import { Connection } from "./Mesh";
function App() {
  return (
    <div className="App">
      <Connection />
    </div>
  );
}

export default App;

Using:

~/projects/pnpm-cra$ node -v
v18.12.1

[ajmcquilkin]

For anyone who is having this issue, the JS package works using Vite. This issue is only documented in Webpack-based projects.

[geoffwhittington]

I published a repo that uses Vite: https://github.com/geoffwhittington/meshtastic-reactapp