4

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?

Mig82
  • 4,856
  • 4
  • 40
  • 63
Mark
  • 1,255
  • 1
  • 13
  • 25
  • Is the JS actually being prepared by that mix config? You seem to have lost the instruction to actually build it - `mix.js('resources/js/app.js', 'public/js')` – Rory Sep 20 '21 at 21:19
  • Yes, sorry. I just omitted it for brevity. This is what is there: ``mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [ require('tailwindcss')]);`` – Mark Sep 21 '21 at 03:42
  • @Mark I believe that should run on the server, not client browser. NodeJS and Laravel are both server side technologies, using the two in conjunction doesn't really make much sense without a little understanding of what you're trying to accomplish. – Kabelo2ka Sep 23 '21 at 07:06
  • do you look in app.js on 137237? What code is there? – Pavlo Mezhevikin Sep 23 '21 at 07:42
  • Does your `app.js` still include the `require('./bootstrap')` line? – Rory Sep 23 '21 at 20:27
  • @Rory, Yes, it does. – Mark Sep 23 '21 at 21:01

1 Answers1

1

You can missed on webpack.mix.js file

Add this line

mix.js('resources/js/app.js', 'public/js');
swaroop suthar
  • 632
  • 3
  • 19