I got errors running npm watch in Laravel 8 app with Midone - Vuejs 3 Admin Dashboard Template
Trying to install Midone - Vuejs 3 Admin Dashboard Template + HTML Version + XD Design File ( HTML Version ) from https://themeforest.net/item/midone-vuejs-admin-dashboard-template/28123408 in new Laravel 8 / inertiajs/vuejs3 app / inertia-vue3 app
I read instructions how to install Midone under Laravel 8 / app at https://themeforest.net/item/midone-vuejs-admin-dashboard-template/28123408/comments?page=14
In the webpack.mix.js file mentioned line :
.js("resources/app/main.js", "public/dist/js")
I do not have any resources/app/main.js file, but I have resources/js/app.js with code:
require('./bootstrap');
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.mixin({ methods: { route } })
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
So I try in webpack.mix.js use this file :
const mix = require("laravel-mix");
const tailwindcss = require("tailwindcss");
const path = require('path'); //add this
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.alias({
"@": path.join(__dirname, "resources/app"),
"~": path.join(__dirname, "node_modules"),
});
mix
.js('resources/js/app.js', 'public/js').vue()
// .js("resources/app/main.js", "public/dist/js")
// .vue()
.sass("resources/app/assets/sass/app.scss", "public/dist/css")
.options({
processCssUrls: false,
postCss: [tailwindcss("./tailwind.config.js")],
})
.autoload({
"cash-dom": ["cash"],
"@popperjs/core": ["Popper"],
})
.browserSync({
proxy: "midone-vue-laravel.test",
files: ["resources/**/*.*"],
});
I am not sure it correct way? The instructions above is a bit different I see in my new app.
I try to run npm watch, but I got a lot of errors :
master@master-laptop:/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited$ npm run watch-poll
@ watch-poll /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited mix watch -- --watch-options-poll=1000
✖ Mix Compiled with some errors in 2.77s
ERROR in ./resources/js/Pages/API/Index.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/API/Index.vue?vue&type=script&lang=js) 2:0-71 Module not found: Error: Can't resolve '@/Pages/API/Partials/ApiTokenManager.vue' in '/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/resources/js/Pages/API'
ERROR in ./resources/js/Pages/API/Index.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/API/Index.vue?vue&type=script&lang=js) 3:0-48 Module not found: Error: Can't resolve '@/Layouts/AppLayout.vue' in '/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/resources/js/Pages/API'
ERROR in ./resources/js/Pages/API/Partials/ApiTokenManager.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/API/Partials/ApiTokenManager.vue?vue&type=script&lang=js) 2:0-61 Module not found: Error: Can't resolve '@/Jetstream/ActionMessage.vue' in '/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/resources/js/Pages/API/Partials'
... ERROR in ./resources/js/Pages/Auth/ConfirmPassword.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Auth/ConfirmPassword.vue?vue&type=script&lang=js) 3:0-71 Module not found: Error: Can't resolve '@/Jetstream/AuthenticationCard.vue' in '/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/resources/js/Pages/Auth'
ERROR in ./resources/js/Pages/Auth/ConfirmPassword.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Auth/ConfirmPassword.vue?vue&type=script&lang=js) 4:0-79 Module not found: Error: Can't resolve '@/Jetstream/AuthenticationCardLogo.vue' in '/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/resources/js/Pages/Auth'
ERROR in ./resources/js/Pages/Auth/ConfirmPassword.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Auth/ConfirmPassword.vue?vue&type=script&lang=js) 5:0-47 Module not found: Error: Can't resolve '@/Jetstream/Button.vue' in '/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/resources/js/Pages/Auth'
... ERROR in ./resources/js/Pages/Welcome.vue?vue&type=style&index=0&id=317d1a6e&scoped=true&lang=css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Welcome.vue?vue&type=style&index=0&id=317d1a6e&scoped=true&lang=css) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: Cannot find module '@left4code/tw-starter/dist/js/colors' Require stack:
/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/tailwind.config.js
/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/tailwindcss/lib/lib/setupTrackingContext.js
/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/tailwindcss/lib/index.js
/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/webpack.mix.js
/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/laravel-mix/setup/webpack.config.js
/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack-cli/lib/webpack-cli.js
/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack-cli/lib/bootstrap.js
/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack-cli/bin/cli.js
/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack/bin/webpack.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) at Function.Module._load (internal/modules/cjs/loader.js:746:27) at Module.require (internal/modules/cjs/loader.js:974:19) at require (internal/modules/cjs/helpers.js:93:18) at Object. (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/tailwind.config.js:1:23) at Module._compile (internal/modules/cjs/loader.js:1085:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:12) at Module.require (internal/modules/cjs/loader.js:974:19)
ERROR in ./resources/app/assets/sass/app.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Can't find stylesheet to import. ╷ 13 │ @import "tailwind"; │ ^^^^^^^^^^ ╵ resources/app/assets/sass/app.scss 13:9 root stylesheet at processResult (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack/lib/NormalModule.js:751:19) at /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack/lib/NormalModule.js:853:5 at /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/loader-runner/lib/LoaderRunner.js:399:11 at /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/loader-runner/lib/LoaderRunner.js:251:18 at context.callback (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/loader-runner/lib/LoaderRunner.js:124:13) at /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass-loader/dist/index.js:54:7 at Function.call$2 (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:98996:16) at render_closure1.call$2 (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:84511:12) at _RootZone.runBinary$3$3 (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:29540:18) at _FutureListener.handleError$1 (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:28062:21)
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) webpack compiled with 101 errors
● Mix █████████████████████████ cache (99%) store build dependencies
[Browsersync] Proxying: http://midone-vue-laravel.test [Browsersync] Access URLs:
Local: http://localhost:3000 External: http://213.109.234.130:3000
UI: http://localhost:3001 UI External: http://localhost:3001
[Browsersync] Watching files...
I suppose that something is not configured properly?
What have I to fix ?
MODIFIED BLOCK # 1:
I modified path for alias in webpack.mix.js and added @left4code/tw-starter package, but next running npm run command I got error:
> @ watch-poll /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited
> mix watch -- --watch-options-poll=1000
✖ Mix
Compiled with some errors in 3.55s
warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.
warn - Update your configuration file to eliminate this warning.
● Mix █████████████████████████ done (99%)
plugins
ERROR in ./resources/app/assets/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
13 │ @import "tailwind";
│ ^^^^^^^^^^
╵
resources/app/assets/sass/app.scss 13:9 root stylesheet
at processResult (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack/lib/NormalModule.js:751:19)
at /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack/lib/NormalModule.js:853:5
at /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass-loader/dist/index.js:54:7
at Function.call$2 (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:98996:16)
at render_closure1.call$2 (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:84511:12)
at _RootZone.runBinary$3$3 (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:29540:18)
at _FutureListener.handleError$1 (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:28062:21)
Yes I have in resources/app/assets/sass/app.scss at line 13:
@import "tailwind";
Also I have
"@tailwindcss/forms": "^0.4.0",
"@tailwindcss/typography": "^0.5.0",
"tailwindcss": "^3.0.0",
packeges are installed
I see warnings as for Tailwind in npm run command. How can I fix it? Did I miss some step ?
MODIFIED BLOCK # 2: After in webpack.mix.js I modified line :
.sass("resources/app/sass/app.scss", "public/dist/css")
I got error :
ERROR in ./resources/app/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
69 │ @import "/left4code/tw-starter/dist/js/breakpoint";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Checking file resources/app/sass/app.scss I see line
@import "~@left4code/tw-starter/dist/scss/breakpoint";
and under /node_modules/@left4code/tw-starter I did not find any breakpoint files.
I commented line with breakpoint and got next error :
ERROR in ./resources/app/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
63 │ @import "~@left4code/tw-starter/dist/js/accordion";
I found file /node_modules/@left4code/tw-starter/dist/js/accordion.js
As I have alias defined :
alias: {
"@" : path.resolve(__dirname, 'resources/js'), // adjusted resources/app to resources/js
"~": path.join(__dirname, "node_modules")
}
I tried to modify line in resources/app/sass/app.scss as :
@import "~left4code/tw-starter/dist/js/accordion";
but I got error that it was not found anyway...
I uploade a project from https://github.com/flydev-fr/midone_adminarea but got thesame errors trying to run npm run watch-poll command...
Thanks in advance!
Edited answer :
Some packages was missing and some other version mismatched. Please check the list for the principal issues (you can check the commits on github):
- The views are in
resources/js, notresources/app - The
aliasconfig is wrong - You need the package
@left4code/tw-starterversion 2.3.1 - You have to downgrade TailwindCSS v3 to TailwindCSS v2
- The
tailwind.config.jsneeded to be configured for custom variables - PostCSS need to be configured as well
- Images path needed to be fixed in css (using absolute path and placing the images in the public folder)
I have updated the repo.
Result
yarn prod
Original answer
The alias in your webpack.mix.js config is not working, that's why your are getting a lot of imports errors.
You just have to add to webpack.mix.js the following:
.webpackConfig({
resolve: {
alias: {
"@" : path.resolve(__dirname, 'resources/js'), // adjusted resources/app to resources/js
"~": path.join(__dirname, "node_modules")
}
}
})
Full config:
mix
.webpackConfig({
resolve: {
alias: {
"@" : path.resolve(__dirname, 'resources/js'), // adjusted resources/app to resources/js
"~": path.join(__dirname, "node_modules")
}
}
})
.js('resources/js/app.js', 'public/js').vue()
// .js("resources/app/main.js", "public/dist/js")
// .vue()
.sass("resources/app/sass/app.scss", "public/dist/css") // adjusted resources/assets/app/sass/app.scss to resources/app/sass/app.scss
.options({
processCssUrls: false,
postCss: [tailwindcss("./tailwind.config.js")],
})
.autoload({
"cash-dom": ["cash"],
"@popperjs/core": ["Popper"],
})
.browserSync({
proxy: "midone-vue-laravel.test",
files: ["resources/**/*.*"],
});
You will eventually get an error when importing tailwind from your css, but to fix it, you need to install a missing package @left4code/tw-starter with yarn add @left4code/tw-starter and/or ask to the seller directly support to use the latest version of his package which was updated 6 hours ago from this answer.
- Laravel HTTP client - How to send file
- Laravel check if collection is empty
- Post a form via jquery from a same page where url is slightly changed but working on one url and refreshes the page on other url
- Extending A Laravel View In A Parent Folder
- Eloquent model relationship with where clause good idea
- Laravel 11 configuring locale does not work
- How do you add headers to a response with a middleware?
- Laravel multiple counts with conditions from one table
- Laravel 11 delete item with Bootstrap 5 modal - response is string, not object
- Laravel collections: Flatten with full key name
- How to fix "Wrong response from the webhook: 301 Moved Permanently" in Telegram Webhook response?
- Axios/XMLHttpRequest is sending GET instead of POST in production environment
- How to display Mollie order status in the redirecturl?
- Laravel Validation - How can I make Rule::in() allow missing/null values?
- Laravel Add a new column to existing table in a migration
- how to use a SHA256 hash in Hex format in laravel
- Tailwind is not working on a new laravel project
- Livewire file upload validation always fails the first time but works the second time
- Using a custom MariaDb Grammar for Carbon timestamp precision with Laravel, the application crashes when calling `$builder->toRawSql()`
- How to Seed Data from JSON Files in Laravel?
- Can't refresh a Livewire component after wire:click button
- laravel try/catch doesn't work for a failed query
- Laravel not able to display relationship name instead of id, even though defined as relation
- Passing parameters to Laravel job is not working
- Laravel file upload s3 Multipart
- Laravel array_merge(): Argument #2 is not an array In ServiceProvider.php
- Laravel seeder dont fill table with foreing keys
- How to see memory usage in Laravel?
- Laravel Eloquent display query log
- Get the Query Executed in Laravel 3/4