3

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
      },
poseg46790
  • 31
  • 1
  • 3
  • [`torrent-stream`](https://www.npmjs.com/package/torrent-stream) is a module for use in Node.js (where `process` is a predefined global), but you're trying to use it in a browser. That won't work. Unfortunately, it can be confusing these days because both modules designed for use in Node.js and also modules designed for the browser (or that can be used in both) are in `npm` (it used to be just Node.js stuff, but then bundlers started offering the ability to bundle things from `node_modules` and the water got very muddy). – T.J. Crowder Feb 19 '22 at 11:02
  • So is there any way to use that module, and in the future how can I know if the module is for use in Node.js or browser – poseg46790 Feb 19 '22 at 11:09
  • I don't know the module in question, but if it's using `process`, no, you can't use it in a browser. I don't know of a general way to know whether you can use an `npm` module in a browser, other than in my experience, if it doesn't *say* it's targeted at the browser and/or show examples that are clearly browser-based, it probably isn't. – T.J. Crowder Feb 19 '22 at 11:14

1 Answers1

1

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.

Rodrigo Botelho
  • 21
  • 1