Here is the step-by-step for error we got:

1- Browsing to this folder \Midone Vue v2.0.1\Laravel + Vue Version\midone-vue-laravel 2-composer install 3-php artisan serve, will start local server and we can browse the template smoothly. 4-npm install – to install node_modules needed for the Vue 5-Once i try to run “npm run dev” to re-compile the files after making any updates on the vue files we get to build_error1.txt:

ERROR in ./resources/app/assets/sass/app.scss Module build failed (from ./node_modules/css-loader/dist/cjs.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. – options has an unknown property ‘plugins’. These properties are valid: object { postcssOptions?, execute?, sourceMap? } at validate (D:\midone-vue-laravel\node_modules\schema-utils\dist\validate.js:104:11) at Object.loader (D:\midone-vue-laravel\node_modules\postcss-loader\dist\index.js:43:29) at D:\midone-vue-laravel\node_modules\webpack\lib\NormalModule.js:316:20 at D:\midone-vue-laravel\node_modules\loader-runner\lib\LoaderRunner.js:367:11 at D:\midone-vue-laravel\node_modules\loader-runner\lib\LoaderRunner.js:233:18 @ ./resources/app/assets/sass/app.scss

ERROR in ./node_modules/tippy.js/themes/light.css (./node_modules/css-loader/dist/cjs.js??ref—6-1./node_modules/tippy.js/themes/light.css) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. – options has an unknown property ‘plugins’. These properties are valid: object { postcssOptions?, execute?, sourceMap? } at validate (D:\midone-vue-laravel\node_modules\schema-utils\dist\validate.js:104:11) at Object.loader (D:\midone-vue-laravel\node_modules\postcss-loader\dist\index.js:43:29) @ ./node_modules/tippy.js/themes/light.css 2:26-132 @ ./resources/app/libs/tippy.js @ ./resources/app/libs/index.js @ ./resources/app/main.js @ multi ./resources/app/main.js ./resources/app/assets/sass/app.scss…

6-Updated webpack.mix.js { loader: ‘postcss-loader’, options: { postcssOptions: CKEStyles.getPostCssConfig( { themeImporter: { themePath: require.resolve( ’@ckeditor/ckeditor5-theme-lark’ ) }, minify: true } ) } }

instead of

{ loader: “postcss-loader”, options: CKEStyles.getPostCssConfig({ themeImporter: { themePath: require.resolve( ”@ckeditor/ckeditor5-theme-lark” ) }, minify: true }) } 7- npm uninstall node-sass 8- npm install—save-dev sass 9-npm install—save-dev webpack@4 (was missing from devDependencies) 10- npm run dev will result of build_error2.txt

Same error I believe again:

ERROR Failed to compile with 39 errors3:59:36 a.m.

error  in ./resources/app/assets/sass/app.scss

Module build failed (from ./node_modules/css-loader/dist/cjs.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. – options has an unknown property ‘plugins’. These properties are valid: object { postcssOptions?, execute?, sourceMap? } at validate (D:\midone-vue-laravel_fresh\node_modules\schema-utils\dist\validate.js:104:11) at Object.loader (D:\midone-vue-laravel_fresh\node_modules\postcss-loader\dist\index.js:43:29) at D:\midone-vue-laravel_fresh\node_modules\webpack\lib\NormalModule.js:316:20 at D:\midone-vue-laravel_fresh\node_modules\loader-runner\lib\LoaderRunner.js:367:11 at D:\midone-vue-laravel_fresh\node_modules\loader-runner\lib\LoaderRunner.js:233:18

error  in ./resources/app/assets/sass/app.scss

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. – options has an unknown property ‘plugins’. These properties are valid: object { postcssOptions?, execute?, sourceMap? } at validate (D:\midone-vue-laravel_fresh\node_modules\schema-utils\dist\validate.js:104:11) at Object.loader (D:\midone-vue-laravel_fresh\node_modules\postcss-loader\dist\index.js:43:29)

@ ./resources/app/assets/sass/app.scss 2:26-228

error  in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/balloonrotator.css

Module parse failed: Unexpected token (1:0) File was processed with these loaders: * ./node_modules/postcss-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders. > .ck .ck-balloon-rotator__navigation{display:flex;align-items:center;justify-content:center}.ck .ck-balloon-rotator__content .ck-toolbar{justify-content:center}.ck .ck-balloon-rotator__navigation{background:var(-ck-color-toolbar-background);border-bottom:1px solid var(-ck-color-toolbar-border);padding:0 var(-ck-spacing-small)}.ck .ck-balloon-rotator__navigation>*{margin-right:var(-ck-spacing-small);margin-top:var(-ck-spacing-small);margin-bottom:var(-ck-spacing-small)}.ck .ck-balloon-rotator__navigation .ck-balloon-rotator__counter{margin-right:var(-ck-spacing-standard);margin-left:var(-ck-spacing-small)}.ck .ck-balloon-rotator__content .ck.ck-annotation-wrapper{box-shadow:none} . . .

sorry for the long copy paste !

Hi gearbox-work,

Thank you for taking the time to contact us, I’ll be more than happy to help you..

Can you post your package.json file?

Best regards, Left4code Team

Thank you for the quick turnaround!

package.json:

{ “name”: “midone-vue-laravel”, “version”: “1.0.0”, “private”: true, “dependencies”: { ”@ckeditor/ckeditor5-basic-styles”: “^{21.0.0”, ”@ckeditor/ckeditor5-dev-utils”: “}23.1.1”, ”@ckeditor/ckeditor5-dev-webpack-plugin”: “^{23.1.1”, ”@ckeditor/ckeditor5-easy-image”: “}21.0.0”, ”@ckeditor/ckeditor5-editor-balloon”: “^{21.0.0”, ”@ckeditor/ckeditor5-editor-classic”: “}21.0.0”, ”@ckeditor/ckeditor5-editor-decoupled”: “^{21.0.0”, ”@ckeditor/ckeditor5-editor-inline”: “}21.0.0”, ”@ckeditor/ckeditor5-essentials”: “^{21.0.0”, ”@ckeditor/ckeditor5-font”: “}21.0.0”, ”@ckeditor/ckeditor5-heading”: “^{21.0.0”, ”@ckeditor/ckeditor5-highlight”: “}21.0.0”, ”@ckeditor/ckeditor5-link”: “^{21.0.0”, ”@ckeditor/ckeditor5-paragraph”: “}21.0.0”, ”@ckeditor/ckeditor5-theme-lark”: “^{21.0.0”, ”@ckeditor/ckeditor5-vue”: “}1.0.1”, ”@google/markerclusterer”: “^{2.0.8”, ”@popperjs/core”: “}2.4.4”, “cash-dom”: “^{8.0.0”, “chart.js”: “}2.9.3”, “core-js”: “^{3.6.5”, “dayjs”: “}1.8.29”, “feather-icons”: “^{4.28.0”, “google-maps-api-loader”: “}1.1.1”, “highlight.js”: “^{10.1.1”, “js-beautify”: “}1.11.0”, “laravel-mix-alias”: “^{1.0.2”, “litepicker”: “}1.5.7”, “lodash”: “^{4.17.19”, “postcss-loader”: “}4.1.0”, “raw-loader”: “^{4.0.1”, “sass-loader”: “}9.0.2”, “style-loader”: “^{1.3.0”, “tabulator-tables”: “}4.7.2”, “tail.select”: “^{0.5.15”, “toastify-js”: “}1.9.0”, “velocity-animate”: “^{1.5.2”, “vue”: “}2.6.11”, “vue-chartjs”: “^{3.5.0”, “vue-feather-icons”: “}5.1.0”, “vue-router”: “^{3.2.0”, “vue-slick-carousel”: “}1.0.6”, “vue-tippy”: “^{4.5.1”, “vue2-dropzone”: “}3.6.0”, “vuelidate”: “^{0.7.5”, “vuex”: “}3.4.0”, “xlsx”: “^{0.16.6”, “zoom-vanilla.js”: “}2.0.6” }, “devDependencies”: { ”@vue/cli-plugin-babel”: “_{4.4.0”, ”@vue/cli-plugin-eslint”: “}4.4.0”, ”@vue/cli-plugin-router”: “_{4.4.0”, ”@vue/cli-plugin-vuex”: “}4.4.0”, ”@vue/cli-service”: “~4.4.0”, ”@vue/eslint-config-prettier”: “^{6.0.0”, “babel-eslint”: “}10.1.0”, “browser-sync”: “^{2.26.12”, “browser-sync-webpack-plugin”: “2.0.1”, “cross-env”: “}7.0”, “eslint”: “^{6.7.2”, “eslint-plugin-prettier”: “}3.1.3”, “eslint-plugin-vue”: “^{6.2.2”, “laravel-mix”: “}5.0.1”, “lodash”: “^{4.17.19”, “node-sass”: “}4.12.0”, “prettier”: “^{1.19.1”, “resolve-url-loader”: “}3.1.0”, “sass”: “^{1.30.0”, “tailwindcss”: “}1.5.1”, “vue-template-compiler”: “^{2.6.11”, “webpack”: “}4.44.2” }, “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—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—hide-modules—config=node_modules/laravel-mix/setup/webpack.config.js” }, “eslintConfig”: { “root”: true, “env”: { “node”: true }, “extends”: [ “plugin:vue/essential”, “eslint:recommended”, ”@vue/prettier” ], “parserOptions”: { “parser”: “babel-eslint” }, “rules”: {} }, “browserslist”: [ ”> 1%”, “last 2 versions”, “not dead” ] }

Hi djefre,

Thank your for contacting us, I’ll be more than happy to help you..

Yes, the build command will produce static HTML site so you don’t need a dedicated server to host the site. A simple one with web server installed is enough.

Hope this helps.

Best regards, Left4code Team

Thanks for your swift and clear reply, i will purchase!

You’re welcome, have a great day..

Best regards, Left4code Team

Hi,

When following the installation instructions (“yarn install”) i got these errors, pls advise.

“error @ckeditor/ckeditor5-basic-styles@21.0.0: The engine “node” is incompatible with this module. Expected version ”>=12.0.0”. Got “10.16.1”“

“error Found incompatible module.”

Should i go with yarn or could i also use npm?

Hi djefre,

Looking at your issue, there’s an incompatible node version installed with the node version required by the template. So you need to upgrade your npm version.

Best regards, Left4code Team

Hi,

Thanks again for your swift reply. Now i get this error: “Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.”

And i tried to upgrade my postcss package to 8 but no joy.

Could you please help me further?

Kind regards

Hi xyrintech,

Thank you for taking the time to contact us, I’ll be more than happy to help you.

Looking at your issue seems like the project dependency is not completely installed. Can you send the result of your dependency installation? A screenshot will be nice.

Best regards, Left4code Team

Hi abdulazizdarsi,

Thank you for taking the time to contact us, I’ll be more than happy to help you.

Unfortunately we don’t have non-typescript version for vuejs 3. But I can send you the legacy version with Vue 2.

May I know your email?

Best regards, Left4code Team

thanks for the quick response , vue 2 is fine . here is my email immdabdulaziz@gmail.com

Hi garfrasa1977,

Thank you for reaching out to us, looking at the official upgrade guide there’s nothing special to do to upgrade the package to the latest version. You can follow the upgrade guide here:

Hope this helps.

Best regards, Left4code Team

i can do it, can please help me, i try but not work,

I cant do it

Hi garfrasa1977,

Yes, sure. Can you post the error message?

i receive too many erros, and not sure if need to install postcss. you can plase tell me step by step process to upgrade, and if i need to change tailwind.config, i bought tailwind UI, and can use this because need V2.0 please help me with steps