Level 5
I uploaded my project at https://github.com/PetroGromovo/midone_adminarea could, you please upload it and try to install ?
In the root there is archive midone-vuejs-admin-dashboard.zip - template itself
Jan 7, 2022
4
Level 5
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.<anonymous> (/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 (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:98996:16)
at render_closure1.call (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:84511:12)
at _RootZone.runBinary (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:29540:18)
at _FutureListener.handleError (/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 ?
Thanks in advance!
Level 2
Have you figure out? i have buy vue3 midone theme too but i could not figure out yet how can i integrate in laravel
Level 5
No
Level 9
I am also facing issue with same but i am using VITE
I found that https://www.npmjs.com/package/@left4code/tw-starter with only with webpack not with vite
is there any solution?
Please or to participate in this conversation.