2

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/**/*.*"],
    });

  1. I am not sure it correct way? The instructions above is a bit different I see in my new app.

  2. 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!

Improve this question
1
  • I uploaded my project at 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 Commented Jan 10, 2022 at 15:29

1 Answer 1

Reset to default
3
+100

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, not resources/app
  • The alias config is wrong
  • You need the package @left4code/tw-starter version 2.3.1
  • You have to downgrade TailwindCSS v3 to TailwindCSS v2
  • The tailwind.config.js needed 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

enter image description here

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Why don't you use the scss file in resources/app/sass ? Anyway, if you want to fix this, just copy the content from resources/app/sass into resources/app/assets/sass..
@PetroGromovo as I said earlier, you are now at the point where you need to contact the author/seller of the template to ask support as the package was updated. There is no scss extension file, they are renommed to .css. You can try to import them by replacing each @import css directive, but will still encounter issues. Ask the author of the template where you bought it.
@PetroGromovo check this link: themeforest.net/comments/27826902
Do you mean that a new update with TailwindCSS 3 support salve this issue?
Your comment made me realizing that using the right version of the package @left4code/tw-starter (speaking version 2.3.1) along the rest of the dependencies should fix things. I will update the answer and the repo after testing it.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.