Using create-react-app: Modules not found 'dgram', 'stream', 'crypto'.

[Alexander Sandström]

I want to create MAVLink messages in a React-application created with create-react-app but after installation there seems to be some dependencies missing which I couldn't resolve.

Here is the minimal example I'm using:

npx create-react-app react-mavlink-example
cd react-mavlink-example
npm install --save node-mavlink serialport
npm start

With the following code in ./App.tsx

import './App.css';
import {
  common
} from 'node-mavlink'

const message = new common.ParamRequestList();

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

Resulting in the following errors:

ERROR in ./node_modules/node-mavlink/dist/lib/mavesp.js 8:16-32
Module not found: Error: Can't resolve 'dgram' in '/home/remote/Documents/react-mavlink-example/node_modules/node-mavlink/dist/lib'

ERROR in ./node_modules/node-mavlink/dist/lib/mavesp.js 9:17-34
Module not found: Error: Can't resolve 'stream' in '/home/remote/Documents/react-mavlink-example/node_modules/node-mavlink/dist/lib'

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: { "stream": require.resolve("stream-browserify") }'
	- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "stream": false }

Full error log can be seen here: https://pastebin.com/zEbaebL3

OS: Ubuntu 22.04.4 LTS
npm: 10.5.0
node: v21.7.0

Thankful for any help or guidance!

[Matthias Hryniszak]

node-mavlink is a node.js library. It will not work in the browser. There are no plans to make it compatible with the browser. It relies on streams which are available only in node.js.