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:
Installed the package via npm install remove.bg.
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'),
},
},
});
In my resources/js/bootstrap.js I added:
import { RemoveBgResult, RemoveBgError, removeBackgroundFromImageBase64 } from 'remove.bg';
window.Removebg = require('remove.bg');
Run npm run dev with no errors.
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?
You can missed on webpack.mix.js file
Add this line
mix.js('resources/js/app.js', 'public/js');
Related
My Laravel web application domain is like www.mywebsite.com/my-project/public and I don't want to change.
I installed Vue.js by npm install && npm run dev and try to reference app.js by
<script src="{{mix('js/app.js')}}"></script>
but I got error www.mywebsite.com/js/app.js net::ERR_ABORTED 404 (Not Found)
I try to config path in webpack.min.js
mix.js('my-project/resources/assets/js/app.js', 'public/js')
.sass('my-project/resources/assets/sass/app.scss', 'public/css');
but I think it's not way to fix...
Please help me thank you.
You may do so by adding a mix_url configuration option to your application's config/app.php configuration file:
'mix_url' => env('MIX_ASSET_URL', null)
Reference
I have this error
Module not found: Error: Can't resolve '#babel/runtime/regenerator' in 'C:\wamp64\www\project-dev\modules\Gallery\Resources\Assets\Backend\Views\Album'
when I execute this command npm run dev.
So to explain my laravel project directory:
app
modules
auth
backend
gallery
themes
admin
node_modules
resources
js
components
router
index.js
store
app.js
sass
views
package.json
webpack.mix.js
So in my router/index.js of vuejs app, I will includes routes from a module.
I make this:
import GalleryRoutes from "../../../../../modules/Gallery/Resources/Assets/Backend/routes";
// Vue Router
const router = new VueRouter({
base: '/admin',
mode: 'history',
routes: [
...constantRoutes,
...GalleryRoutes,
],
linkActiveClass: "active",
linkExactActiveClass: "active",
});
routes.js file from Gallery module:
// Views
import AlbumIndex from './Views/Album/Index.vue'
// Routes
export default [
// AlbumIndex
{
path: 'gallery/albums',
component: AlbumIndex,
name: 'backend.gallery.album.index',
meta: {
heading: 'Gallery',
title: 'Albums',
icon: 'fas fa-images',
showed: true
}
}
];
But I get the error above.
I think this is a bug related to the node_modules folder, I'm not sure.
It's possible to achieve what I want to do? (include .Vue or .js files from outside my root app directory).
PS: I try to make this to try to answer this question: Backend (VueJS) of laravel application with modules approach
Thank you to helping me :)
It's looking for a dependency that is not installed. In your case you can do npm i babel-runtime --save to install that dependency you're missing.
Installing whatwg-fetch fixed the issue for me
I recently started learning nextjs/react and got stuck following the tutorials on the official nextjs website when trying to export my app into a static site:
I'm using sass for styling the app, and when trying to run the npm run build script, it throws me an error saying
Module parse failed: Unexpected token (1:0) You may need an
appropriate loader to handle this file type.
I've checked through my code structure & setup and couldn't figure out what went wrong. It looks like the error has something to do with the sass loader? Any pointers would be greatly appreciated.
below are a few screenshots of my setup.
You need to add sass-loader dependency.
npm i -D sass-loader
and then add it like this:
config.module.rules.push(
{
test: /\.s(a|c)ss$/,
use: ['babel-loader', 'raw-loader',
{ loader: 'sass-loader' },
],
},
);
You have two module.exports in your next.config.js which is invalid.
Perhaps try passing the config to withSass and exporting that...
module.exports = withSass({ exportPathMap: /* ... etc ... */ })
I made my own NPM package with a Vue component inside. At first I didn't use any building system, it was just a basic package with package.json and an src folder with a single *.vue component file and a main file index.js. I was exporting the component like this in my index.js:
module.exports = require('./TagsInput.vue');
The component worked fine when I installed it into a Laravel project.
Then I decided to use the webpack-simple vue-cli template to be able to build my package into the dist folder and I can't get things to work. The package builds fine when I build it from the package folder. But in Laravel I started getting this error:
TypeError: "exports" is read-only
Then I changed the index.js to this:
import TagsInput from './TagsInput.vue'
Vue.config.keyCodes.backspace = 8;
Vue.component('tags-input', TagsInput);
export { TagsInput }
export default TagsInput
And now I'm getting this error:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <TagsInput>
...
I installed the vue-spinner with npm install vue-spinner --save-dev,
and I am trying to use the spinner on my file, but when I use the import
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
I get this error:
node_modules/vue-spinner/src/PulseLoader.vue:1
<template>
^
My gulpfile is requiring vueify, here is it:
var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
elixir(function(mix) {
mix.sass('app.scss','public/assets/css/')
.browserify('Main.js');
});
You actually don't need to require laravel-elixir-vueify in your guilpfile, it's easier just to install the original vueify (version 9 for Vue 2.0):
npm install vueify --save-dev
Then add the following to your package.json:
"browserify": {
"transform": [
"vueify"
]
}
Now elixir will use the vueify transform automatically when browserify is called.
EDIT
I just took a look at the vue-spinner page and it says that when using browserify you need to do the following:
import { PulseLoader } from 'vue-spinner/dist/vue-spinner.min.js'
So that may fix your problem without the vueify step, however, I still recommend avoiding the elixir add ons for the time being because their versioning is all over the place at the moment with Elixir 6 about to be released and Vue 2 being newly implemented in laravel.