Uncaught: ReferenceError: process is not defined, when using library

Viewed 5256

Here is full error

Uncaught ReferenceError: process is not defined
    at index.js:34
    at Object../node_modules/utp/index.js (index.js:41)
    at Object.options.factory (react refresh:6)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Object../node_modules/peer-wire-swarm/index.js (index.js:1)
    at Object.options.factory (react refresh:6)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Object../node_modules/torrent-stream/index.js (index.js:2)

Project was created using npx create-react-app, and is started by react-scripts start This is App.js

import torrentStream from "torrent-stream";

function App() {
  return (
    <h1>Hello World</h1>
  );
}

export default App;

When I remove the first line import torrentStream from "torrent-stream";, everything works.

I have tried installing react-error-overlay and it does nothing. Adding new plugin in webpack like this:

new webpack.DefinePlugin({
    process: {env: {}}
}),

Changes error to:

Uncaught TypeError: {(intermediate value)}.hrtime is not a function
    at index.js:34
    at Object.../../node_modules/utp/index.js (index.js:41)
    at Object.options.factory (react refresh:6)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Object../node_modules/peer-wire-swarm/index.js (index.js:1)
    at Object.options.factory (react refresh:6)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Object../node_modules/torrent-stream/index.js (index.js:2)

I have tried this: Solution 1, Solution 2, Solution 3, Solution 4, and non of them helped in any way. I have made change to webpack config I have added this fallback in config.resolve

fallback: {
        "stream": require.resolve("stream-browserify"),
        "path": require.resolve("path-browserify"),
        "crypto": require.resolve("crypto-browserify"),
        "os": require.resolve("os-browserify/browser"),
        "tty": require.resolve("tty-browserify"),
        "https": require.resolve("https-browserify"),
        "http": require.resolve("stream-http"),
        "zlib": require.resolve("browserify-zlib"),
        "constants": require.resolve("constants-browserify"),
        "fs": false,
        "dgram": false,
        "dns": require.resolve("dns"),
        "process": false
      },
1 Answers

I've been struggling for a long time with this problem and I will share what was my problem/solution.

Since the project was developed by more than 1 developer, some developers were using NPM and others YARN. Moreover, the packages installed by one developer were NPM packages and the other developer (ME) didn't know about it so I was running npm run start but the packages were installed using YARN.

Tip: Make sure you are using either NPM or YARN and your packages inside the node_modules folder were generated by the package manager you use.

Related