'Why I can not add custom templates Laravel 8/ Inertia.js 3 app?
I try to add custom templates in a Laravel 8/Inertia.js 3 application. For example, in webpack.config.js, I have an alias pointing to the “resources/js” directory.
const path = require('path');
module.exports = {
resolve: {
alias: {
'@': path.resolve('resources/js'),
// If to comment line above and uncomment line below -
// it does not work anyway
// '@': __dirname + '/resources/js'
},
},
};
resources/css/app.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import '@/fonts/roboto';
It raises an error.
✖ Mix Compiled with some errors in 27.54s Unknown error from PostCSS plugin. Your current PostCSS version is 8.4.6, but postcss-import uses 7.0.39. Perhaps this is the source of the error below.
● Mix █████████████████████████ done (99%) plugins ERROR in ./resources/css/app.css Module build failed (from ./node_modules/laravel-mix/node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: Failed to find '@/fonts/roboto' in [ /project_path/resources/css ] at /project_path/node_modules/postcss-import/lib/resolve-id.js:35:13 at async LazyResult.runAsync (/project_path/node_modules/postcss/lib/lazy-result.js:396:11) at async Object.loader (/project_path/node_modules/postcss-loader/dist/index.js:97:14) at processResult (/project_path/node_modules/webpack/lib/NormalModule.js:753:19) at /project_path/node_modules/webpack/lib/NormalModule.js:855:5 at /project_path/node_modules/loader-runner/lib/LoaderRunner.js:399:11 at /project_path/node_modules/loader-runner/lib/LoaderRunner.js:251:18 at context.callback (/project_path/node_modules/loader-runner/lib/LoaderRunner.js:124:13) at Object.loader (/project_path/node_modules/postcss-loader/dist/index.js:142:7)1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) webpack compiled with 2 errors
I found file with full path :
/project_path/resources/js/fonts/_roboto.scss
I see a message in the head of the error message and check-in 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"
},
"dependencies": {
"@ckeditor/ckeditor5-build-balloon": "^29.1.0",
"@ckeditor/ckeditor5-build-balloon-block": "^29.1.0",
"@ckeditor/ckeditor5-build-classic": "^29.1.0",
"@ckeditor/ckeditor5-build-decoupled-document": "^29.1.0",
"@ckeditor/ckeditor5-build-inline": "^29.1.0",
"@fullcalendar/core": "^5.5.1",
"@fullcalendar/daygrid": "^5.5.0",
"@fullcalendar/interaction": "^5.5.0",
"@fullcalendar/list": "^5.5.0",
"@fullcalendar/timegrid": "^5.5.1",
"@googlemaps/js-api-loader": "^1.11.4",
"@googlemaps/markerclustererplus": "^1.1.0",
"@left4code/tw-starter": "^1.1.0",
"@popperjs/core": "^2.7.0",
"@vuelidate/core": "^2.0.0-alpha.12",
"@vuelidate/validators": "^2.0.0-alpha.11",
"@zhuowenli/vue-feather-icons": "^5.0.2",
"cash-dom": "^8.1.0",
"chart.js": "^2.9.4",
"core-js": "^3.8.3",
"dayjs": "^1.10.4",
"dropzone": "^5.7.6",
"feather-icons": "^4.28.0",
"highlight.js": "^10.6.0",
"js-beautify": "^1.13.5",
"litepicker": "^2.0.11",
"tabulator-tables": "^4.9.3",
"tiny-slider": "^2.9.3",
"tippy.js": "^6.2.7",
"toastify-js": "^1.9.3",
"tom-select": "^1.7.5",
"velocity-animate": "^1.5.2",
"vue": "^3.0.4",
"vue-router": "^4.0.3",
"vuex": "^4.0.0",
"xlsx": "^0.18.0",
"zoom-vanilla.js": "^2.0.6"
},
"devDependencies": {
"@inertiajs/inertia": "^0.10.0",
"@inertiajs/inertia-vue3": "^0.5.1",
"@inertiajs/progress": "^0.2.6",
"@tailwindcss/forms": "^0.4.0",
"@tailwindcss/typography": "^0.5.0",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss-import": "^12.0.1",
"vue": "^3.0.5",
"vue-loader": "^16.1.2",
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0-beta.3",
"@vue/cli-plugin-eslint": "~5.0.0-beta.3",
"@vue/cli-plugin-router": "~5.0.0-beta.3",
"@vue/cli-plugin-vuex": "~5.0.0-beta.3",
"@vue/cli-service": "~5.0.0-beta.3",
"@vue/compiler-sfc": "^3.0.4",
"@vue/eslint-config-standard": "^6.1.0",
"autoprefixer": "^10.3.1",
"babel-eslint": "^10.1.0",
"eslint": "^7.20.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^7.2.0",
"postcss": "^8.3.6", // I have NOT 8.4.6, but ^8.3.6 version of postcss
"prettier": "1.19.1",
"sass": "^1.37.5",
"sass-loader": "^12.1.0",
"tailwindcss": "^2.2.7"
}
}
I tried to change the version of to 7.0.39 but got the error :
● Mix █████████████████████████ done (99%) plugins
ERROR in ./node_modules/@fullcalendar/common/main.css (./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/@fullcalendar/common/main.css) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: PostCSS plugin autoprefixer requires PostCSS 8. Migration guide for end-users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users at Processor.normalize (/project_path/node_modules/postcss/lib/processor.js:167:15) at new Processor (/project_path/node_modules/postcss/lib/processor.js:56:25) at postcss (/project_path/node_modules/postcss/lib/postcss.js:55:10) at Object.loader (/project_path/node_modules/postcss-loader/dist/index.js:96:17)
How can that be fixed?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|