I have problems with URL Processing in Laravel mix.
here is my app.css
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
/*---------- import LightGallery from node_modules ----------*/
#import 'lightgallery.js';
/*---------- my styles for thumbnails ----------*/
#import 'includes/thumbnails';
here is my webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.scripts([
'public/js/app.js',
'resources/js/includes/script.js'
], 'public/js/app.js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('postcss-extend'),
require('postcss-nested'),
require('autoprefixer'),
]);
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#tailwindcss/forms": "^0.2.1",
"alpinejs": "^2.7.3",
"autoprefixer": "^9.8.6",
"axios": "^0.19",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"postcss": "^8.2.6",
"postcss-extend": "^1.0.5",
"postcss-import": "^12.0.1",
"postcss-simple-extend": "^1.0.0",
"postcss-simple-vars": "^6.0.3",
"resolve-url-loader": "^3.1.0",
"sass": "^1.32.7",
"sass-loader": "^8.0.2",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.1",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"#tkh/tailwind-plugin-flex-basis": "^1.4.0",
"lightgallery.js": "^1.4.0",
"npm": "^7.3.0"
}
}
And if I do npm run dev I see following error. It seems that fonts and images from node_modules/lightgallery.js/dist don't copied by laravel mix
> dev
> npm run development
> development
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js
98% after emitting SizeLimitsPlugin
ERROR Failed to compile with 7 errors 9:06:04 PM
These relative modules were not found:
* ../fonts/lg.svg?22t19m in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../fonts/lg.ttf?22t19m in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../fonts/lg.woff?22t19m in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/loading.gif in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/video-play.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/vimeo-play.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/youtube-play.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
Asset Size Chunks Chunk Names
/js/app.js 730 KiB /js/app [emitted] /js/app
ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/lg.svg?22t19m' in '/home/http/app/resources/css'
at /home/http/app/node_modules/webpack/lib/Compilation.js:925:10
at /home/http/app/node_modules/webpack/lib/NormalModuleFactory.js:401:22
at /home/http/app/node_modules/webpack/lib/NormalModuleFactory.js:130:21
at /home/http/app/node_modules/webpack/lib/NormalModuleFactory.js:224:22
at /home/http/app/node_modules/neo-async/async.js:2830:7
at /home/http/app/node_modules/neo-async/async.js:6877:13
at /home/http/app/node_modules/webpack/lib/NormalModuleFactory.js:214:25
at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:213:14
at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /home/http/app/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at /home/http/app/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at /home/http/app/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /home/http/app/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15
at /home/http/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
at processTicksAndRejections (node:internal/process/task_queues:75:11)
# ./resources/css/app.css
ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../fonts/lg.svg?22t19m' in '/home/http/app/resources/css'
# ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1351805-1351838
# ./resources/css/app.css
ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../fonts/lg.ttf?22t19m' in '/home/http/app/resources/css'
# ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1351654-1351687
# ./resources/css/app.css
ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../fonts/lg.woff?22t19m' in '/home/http/app/resources/css'
# ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1351731-1351765
# ./resources/css/app.css
ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../img/loading.gif' in '/home/http/app/resources/css'
# ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1368504-1368533
# ./resources/css/app.css
ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../img/video-play.png' in '/home/http/app/resources/css'
# ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1359119-1359151
# ./resources/css/app.css
ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../img/vimeo-play.png' in '/home/http/app/resources/css'
# ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1358797-1358829 7:1358953-1358985
# ./resources/css/app.css
ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../img/youtube-play.png' in '/home/http/app/resources/css'
# ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1359422-1359456 7:1359582-1359616
# ./resources/css/app.css
But if I do the same job with sass instead postCss everything working.
Here is my working code, but I want to get rid of sass and replace all with postCSS plugins
/resources/css/app.css
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
#import 'includes/thumbnails';
/resources/sass/app.scss
#import '~lightgallery.js/src/sass/lightgallery';
/* postcss-mixin plugin also doesn't work in my mix file */
#import 'mixins/svg';
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.scripts([
'public/js/app.js',
'resources/js/includes/script.js'
], 'public/js/app.js')
.sass('resources/sass/app.scss', 'public/css')
.styles([
'resources/css/app.css',
'public/css/app.css'
],'public/css/app.css')
.postCss('public/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('postcss-extend'),
require('postcss-nested'),
require('autoprefixer'),
]);
Try it in
webpack.mix.js.
install webpack-livereload-plugin with npm
var LiveReloadPlugin = require('webpack-livereload-plugin');
mix.webpackConfig({
plugins: [new LiveReloadPlugin()],
stats: {
children: true
}
});
First, in webpack.mix.js, do you need the SASS line? Because it's causing issues.
.sass('resources/sass/app.scss', 'public/css')
Ensure the tilde is present to reference the node_modules/ directory in your app.css for lightgallery.js and use the full CSS path.
#import '~lightgallery.js/dist/css/lightgallery.min.css';
Update Node dependencies for Laravel Mix 6, Webpack, Autoprefixer, and PostCSS and update the "scripts" section of package.json to the following.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#tailwindcss/forms": "^0.2.1",
"#tkh/tailwind-plugin-flex-basis": "^1.4.0",
"alpinejs": "^2.8.0",
"autoprefixer": "^10.2.4",
"axios": "^0.21",
"cross-env": "^7.0",
"laravel-mix": "^6.0.11",
"lightgallery.js": "^1.4.0",
"lodash": "^4.17.20",
"postcss": "^8.2.6",
"postcss-extend": "^1.0.5",
"postcss-import": "^8.2.0",
"postcss-simple-extend": "^1.0.0",
"postcss-simple-vars": "^6.0.3",
"resolve-url-loader": "^3.1.0",
"sass": "^1.32.8",
"sass-loader": "^9.0.3",
"tailwindcss": "2.0.3",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.23.0"
}
}
Then run npm update && npm install.
Now you can run npm run dev.
Related
I have a Laravel, VueJs, VueRouter, Vuex application using Webpack to compile my assets.
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.14.0",
"axios": "^0.18",
"bootstrap": "^4.0.0",
"laravel-mix": "^3.0.0",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"vue": "^2.5.7"
},
"dependencies": {
"#fullcalendar/core": "^5.11.3",
"#fullcalendar/daygrid": "^5.11.3",
"#fullcalendar/interaction": "^5.11.3",
"#fullcalendar/list": "^5.11.3",
"#fullcalendar/timegrid": "^5.11.3",
"#fullcalendar/vue": "^5.11.3",
"ajv": "^6.12.3",
"animate.css": "^3.7.2",
"aos": "^2.3.4",
"apexcharts": "^3.33.0",
"chart.js": "^2.7.3",
"element-ui": "^2.4.8",
"imagemin": "^6.0.0",
"jquery": "^3.4.1",
"moment": "^2.27.0",
"node-sass": "^4.14.1",
"numeral": "^2.0.6",
"simple-keyboard": "^2.29.72",
"toastr": "^2.1.4",
"vue-apexcharts": "^1.6.2",
"vue-chartjs": "^3.4.0",
"vue-data-tables": "^3.4.5",
"vue-router": "^3.5.2",
"vue-touch-keyboard": "^0.3.2",
"vuedraggable": "^2.24.3",
"vuex": "^3.5.1",
"xml-js": "^1.6.11"
}
}
when i build in production mode npm run prod i get the error s is not a function
but if i build in dev like npm run watch or npm run dev i don't get the error.
How can I debug where the error is in the code so I can fix it? It only shows me in the vue.common.prod line.
vue.common.prod.js:11 TypeError: s is not a function
at e (vue.common.prod.js:11:68600)
my file webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/front/app.js', 'public/js')
.extract(['vue','vuex', 'jquery', 'bootstrap', 'axios', 'element-ui', 'lodash', 'moment', 'popper.js'])
.version();
mix.webpackConfig({
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'#': path.join(__dirname, './resources/js'),
'~': path.join(__dirname, './resources/js/front'),
'##': path.join(__dirname, './modules'),
'#components': path.join(__dirname, './resources/js/components')
}
},
output: {
filename:'[name].js',
chunkFilename: 'js/[name].js',
},
}).sourceMaps()
option 01) :
check the function you wrote
This is a standard JavaScript error when trying to call a function before it is defined. This error occurs if you try to execute s function that is not initialized or is not initialized correctly. This means that the expression did not return s function object. So you need to understand that what you are trying to achieve is not s feature.
option 02) :
remove node_module and clear cache npm cache clear --force.
after that reinstall node_module by using npm install.
option 03) :
check your imported thing forgot the curly braces in an import statement.
I am facing this critical error while installing Laravel Inertia with Jetstream.
larevel new projectName --jet
Then I get this:
WARNING in ./resources/js/app.js 16:65-76 Critical dependency:
Accessing import.meta directly is unsupported (only property access is
supported)
webpack compiled with 1 warning
When I run the project, i can see only #vite('resources/js/app.js') in the browser[1]: https://i.stack.imgur.com/WjQct.png
resources/js/app.js
import "./bootstrap";
import "../css/app.css";
import { createApp, h } from "vue";
import { createInertiaApp } from "#inertiajs/inertia-vue3";
import { InertiaProgress } from "#inertiajs/progress";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";
const appName =
window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob("./Pages/**/*.vue")
),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
});
InertiaProgress.init({ color: "#4B5563" });
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-vue3": "^0.6.0",
"#inertiajs/progress": "^0.2.7",
"#tailwindcss/forms": "^0.5.2",
"#tailwindcss/typography": "^0.5.2",
"#vitejs/plugin-vue": "^2.3.3",
"autoprefixer": "^10.4.7",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.0",
"vue": "^3.2.31"
}
}
webpack.config.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
I can't see the default Laravel layout view or the login/register views.
Sir, if you have PHP version < 8 and Laravel version < 9 then update the PHP version to 8 and Laravel version to 9. It will fix your problem.
To check Laravel verion run:
php artisan --version
To check PHP version run: php --version
Please check Support Policy of laravel on official site.
Try to install laravel-vite-plugin:
First of install the laravel-vite plugin just using this command.
npm install --save-dev vite laravel-vite-plugin
npm install --save-dev #vitejs/plugin-vue
Then you need to execute the following command.
npm install
npm run dev
php artisan migrate
and Now, your error must be solved
Info
Using laravel and vue project
After installing composer install and npm install blank page is showing
Laravel 8, Vue vue#3.2.31, PHP 8 and ubuntu 20
Project location /www/html/project
Start the project using php artisan serve
Network tab http://127.0.0.1:8000/ showing status 200 but in preview tab
Error
No warning and console error. Network tab http://127.0.0.1:8000/ showing status 200 but in the preview tab below error gives
There was a problem loading your site type details
Code
Webpack.mix.js
const plugins = [
require('postcss-import'),
require('tailwindcss'),
require('postcss-nested'),
require('autoprefixer')
];
mix
.webpackConfig({
resolve: {
alias: {
'#': __dirname + '/resources/js'
}
}
})
.js('resources/js/project/app.js', 'public/js').vue().version()
.js('resources/js/_default/admin.js', 'public/js').vue().version()
.postCss('resources/css/app.css', 'public/css', plugins)
.postCss('resources/css/admin.css', 'public/css', plugins)
.sass('resources/css/admin/bootstrap.custom.scss', 'public/css')
//.browserSync('127.0.0.1:8000')
//mix.dumpWebpackConfig();
if (mix.inProduction()) {
mix.version();
}
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#vue/compiler-sfc": "^3.2.20",
"autoprefixer": "^10.4.0",
"axios": "^0.21",
"browser-sync": "^2.27.7",
"browser-sync-webpack-plugin": "^2.3.0",
"laravel-mix": "^6.0.0-beta.17",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.3.11",
"postcss-import": "^12.0",
"postcss-nested": "^4.2",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.1.1",
"tailwindcss": "^2.2.19",
"vue": "^3.2.20",
"vue-loader": "^16.8.2",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"#headlessui/vue": "^1.4.1",
"#heroicons/vue": "^1.0.5",
"#tailwindcss/forms": "^0.3.4",
"bootstrap": "^4.6.1",
"formiojs": "^4.13.11",
"install": "^0.13.0",
"npm": "^8.1.1",
"or": "^0.2.0",
"vue-i18n": "^8.26.5",
"vue-router": "^4.0.12",
"webpack-shell-plugin-next": "^2.2.2"
}
}
I don't know what's wrong with this project, I tried deleting the node_modules and npm install but still got the same error, npm run hot also did not gives any error
const path = require('path');
mix.js(['resources/js/app.js','resources/js/_default/admin.js'], "public/js")
.vue()
.postCss(['resources/css/app.css', 'resources/css/admin.css'], "public/css", plugins)
.sass('resources/css/admin/bootstrap.custom.scss', 'public/css')
.webpackConfig({
resolve: {
alias: {
'#': path.resolve('resources/js'),
},
},
};);
if (mix.inProduction()) {
mix.version();
}
i'm trying to install this package https://github.com/shwilliam/vue-scrollin to my laravel + vue project. after compiling with laravel mix, the following error appeared:
Module not found: Error: Can't resolve 'timers' in
'\node_modules\vue-scrollin\dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules
by default. This is no longer the case. Verify if you need this module
and configure a polyfill for it. If you want to include a polyfill,
you need to:
- add a fallback 'resolve.fallback: { "timers": require.resolve("timers-browserify") }'
- install 'timers-browserify' If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "timers": false }
I followed the given instructions but it gives me the same errors.
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/css/app.scss', 'public/css/app.css')
.postCss('resources/css/app.css', 'public/css', [
//
])
.webpackConfig(require('./webpack.config'));
webpack.config.js
module.exports = {
resolve: {
fallback: { "timers": require.resolve("timers") }
},
};
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-regular-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/vue-fontawesome": "^3.0.0-3",
"#vue/compiler-sfc": "^3.0.7",
"axios": "^0.21",
"bulma": "^0.9.2",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"particles.vue3": "^1.3.1",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.8",
"sass-loader": "^10.1.1",
"vue": "^3.0.5",
"vue-loader": "^16.1.2",
"vue-router": "^4.0.5",
"vue-scrollin": "^0.1.2",
"timers-browserify": "^2.0.12"
}
}
You almost got it. webpack.config.js should be:
module.exports = {
resolve: {
fallback: { "timers": require.resolve('timers-browserify') }
},
};
Just change the package in the require.resolve() to what the warning suggests.
For anyone who comes here with a polyfills-problem or about to migrate from webpack 4 to 5, here's the PR with a list of removed polyfills
NPM/Webpack can't find dependencies with Laravel Mix
These dependencies were not found:
* font-awesome
* ionicons
ERROR in multi lodash jquery bootstrap-sass fastclick jquery-slimscroll admin-lte icheck ionicons font-awesome datatables.net datatables.net-bs
Module not found: Error: Can't resolve 'font-awesome' in 'D:\Laragon'
# multi lodash jquery bootstrap-sass fastclick jquery-slimscroll admin-lte icheck ionicons font-awesome datatables.net datatables.net-bs
More clearly. These are installed (can find them in node_modules) and require location is correct. I'm also using more packages, and these problems are related to, coincidentally, the only fonts in my webpack.
They are available in the package.json and package.json.lock.
Installed trying different methods: firstly npm install and --save-dev, also tried yarn install and yarn add.
My webpack.mix.js:
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.webpackConfig({
module: {
loaders: [
{
test: /\.js?/,
exclude: [/node_modules/, /styles/],
loaders: ['babel'],
include: path.join(__dirname, 'src')
},
{
test: /\.scss$/,
loader: 'style!css!resolve-url!sass?sourceMap'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
}
]
}
});
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
mix.js('resources/assets/js/auth.js', 'public/js')
.sass('resources/assets/sass/auth.scss', 'public/css');
mix.js('resources/assets/js/admin-lte.js', 'public/js')
.sass('resources/assets/sass/admin-lte.scss', 'public/css');
mix.autoload({
jquery: [ '$', 'jQuery', 'jquery'],
DataTable: 'datatables.net-bs'
});
mix.extract([
'lodash', 'jquery', 'bootstrap-sass',
'fastclick', 'jquery-slimscroll', 'admin-lte',
'icheck', 'ionicons', 'font-awesome',
'datatables.net', 'datatables.net-bs'
], 'public/js/vendor.js');
mix.version();
I also tried it without the mix.webpackConfig, adding the config this was a desperate attempt to fix the fonts.
Here is my package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"admin-lte": "^2.4.2",
"axios": "^0.17",
"bootstrap": "^4.0.0",
"cross-env": "^5.1.3",
"datatables.net": "^1.10.16",
"fastclick": "^1.0.6",
"font-awesome": "^4.7.0",
"icheck": "^1.0.2",
"ionicons": "^3.0.0",
"jquery": "^3.3.1",
"jquery-slimscroll": "^1.3.8",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"popper.js": "^1.12",
"script-loader": "^0.7.2"
},
"dependencies": {
"bootstrap-sass": "^3.3.7",
"datatables.net-bs": "^1.10.16"
}
}
And in my .scss:
#import '~font-awesome/scss/font-awesome';
Both on Mac and Windows 10
Include Font Awesome into your NPM config
"devDependencies": {
......
......
"font-awesome": "^4.7.0"
}
Run npm update
And then your app.scss include this
// Font Awesome
#import "~font-awesome/scss/font-awesome.scss";
Run npm dev or `npm watch
Getting rid of font-awesome and ionicons from the extract function solves the problem.