Does not work in React project

[nijatmursali]

I'm trying to import the library, but it gives following error:

data.js:6 Uncaught TypeError: path.resolve is not a function
    at ./node_modules/numjs/src/images/data.js (data.js:6:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/numjs/src/images/index.js (index.js:12:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/numjs/src/index.js (index.js:860:1)
    at options.factory (react refresh:6:1)

Is there any way to solve it?

[dominikandreas]

I managed to solve it by adding a fallback for the path library (path-browserify) via the webpack config. When using create-react-app, the webpack config comes bundled as node_modules/react-scripts/config/webpack.config.js and shouldn't be modified directly. Instead, you can use customize-cra to override the config.

First, install path-browserify, customize-cra and react-app-rewired (dependency of customize-cra):

npm install -d customize-cra react-app-rewired path-browserify

then create a config-overrides.js next to your package.json with the following contents:

const { override } = require("customize-cra");

module.exports = override((config, env) => {
  // Add a fallback for the 'path' module, required for numjs dependency to work in the browser
  config.resolve.fallback = {
    path: require.resolve("path-browserify"),
  };
  return config;
});

Finally, modify the scripts section of the package.json as documented in react-app-rewired

  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}

[JRfan123]

it is not a good idea

I managed to solve it by adding a fallback for the path library (path-browserify) via the webpack config. When using create-react-app, the webpack config comes bundled as node_modules/react-scripts/config/webpack.config.js and shouldn't be modified directly. Instead, you can use customize-cra to override the config.

First, install path-browserify, customize-cra and react-app-rewired (dependency of customize-cra):

npm install -d customize-cra react-app-rewired path-browserify

then create a config-overrides.js next to your package.json with the following contents:

const { override } = require("customize-cra");

module.exports = override((config, env) => {
  // Add a fallback for the 'path' module, required for numjs dependency to work in the browser
  config.resolve.fallback = {
    path: require.resolve("path-browserify"),
  };
  return config;
});

Finally, modify the scripts section of the package.json as documented in react-app-rewired

  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}