Trouble using NPM package in Laravel application

Viewed 384

I've been using Laravel for years, but I've never used NPM packages in my Laravel apps until now. I'm using Laravel Valet as my development environment.

I am trying to utilize a simple package that interfaces with the remove.bg js package but I can't get it working after hours of trying different things.

Here's what I've done:

  1. Installed the package via npm install remove.bg.
  2. The package was complaining that it couldn't find the modules that it depended on (unirest, http, etc), so I installed them via npm install and even added these fallbacks since it was complaining about Webpack 5 and polyfill:

My webpack.mix.js file:

mix.webpackConfig({
    resolve: {
        fallback: {
            fs: require.resolve('browserify-fs'),
            crypto: require.resolve('crypto-browserify'),
            stream: require.resolve('stream'),
            http: require.resolve('stream-http'),
            https: require.resolve('https-browserify'),
            path: require.resolve('path-browserify'),
            zlib: require.resolve('browserify-zlib'),
        },
    },
});
  1. In my resources/js/bootstrap.js I added:
import { RemoveBgResult, RemoveBgError, removeBackgroundFromImageBase64 } from 'remove.bg';
window.Removebg = require('remove.bg');
  1. Run npm run dev with no errors.
  2. Included <script src="{{ mix('/js/app.js') }}"></script> in my blade template.

However, when I view my page, I get these errors in the console:

app.js:137237 Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
    at Object.inherits (app.js:137237)
    at Object../node_modules/browserify-zlib/lib/index.js (app.js:28688)
    at __webpack_require__ (app.js:139212)
    at Object../node_modules/unirest/index.js (app.js:131192)
    at __webpack_require__ (app.js:139212)
    at Object../node_modules/remove.bg/dist/index.js (app.js:108502)
    at __webpack_require__ (app.js:139212)
    at Module../resources/js/bootstrap.js (app.js:16242)
    at __webpack_require__ (app.js:139212)
    at Object../resources/js/app.js (app.js:16230)

I'm stumped. What am I doing wrong here?

1 Answers

You can missed on webpack.mix.js file

Add this line

mix.js('resources/js/app.js', 'public/js');
Related