CODEWITHSUNDEEP
vuejs3vuetify.jsvitepostcss
simpledev
simpledev

Reputation: 394

Failed to load PostCSS config

I migrated from Vue2 to vue3 and cli to vite (with Vuetify) and then get this error.

[plugin:vite:css] Failed to load PostCSS config (searchPath: ...): [Error] Loading PostCSS Plugin failed: require() of ES Module C:\Users...\src\vue\node_modules\vuetify\lib\framework.mjs not supported. Instead change the require of C:\Users...\src\vue\node_modules\vuetify\lib\framework.mjs to a dynamic import() which is available in all CommonJS modules.

router.js:1
Failed to load resource: the server responded with a status of 500 (Internal Server Error) App.vue:1
Failed to load resource: the server responded with a status of 500 (Internal Server Error) main.css:1
Failed to load resource: the server responded with a status of 500 (Internal Server Error)

I tried to delete modules and reinstall it, also tried to add postcss.config.js file but nothing worked for me

package.json

  "versionMessage": "",
  "private": true,
  "scripts": {
    "serve-dev": "vue-cli-service serve --mode development",
    "build-dev": "vue-cli-service build --mode development",
    "build-prod": "vue-cli-service build --mode production",
    "prep-deploy": "node prep_deployment.js",
    "lite": "lite-server",
    "dev": "vite",
    "build": "vite build",
    "test": "vite test",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
  },
  "main": "background.js",
  "dependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/compat": "^3.1.0-0",
    "color-hash": "^1.0.3",
    "gantt-elastic": "^1.0.10",
    "humanize-duration": "^3.21.0",
    "lodash": "^4.17.21",
    "mathjs": "^7.5.1",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.31",
    "throttled-queue": "^1.0.7",
    "vue": "^3.1.0-0",
    "vue-cookies": "^1.5.13",
    "vue-google-charts": "^0.3.2",
    "vue-router": "^3.1.3",
    "vue-session": "^1.0.0",
    "vue-timeago": "^5.1.2",
    "vuedraggable": "^2.23.2",
    "vuetify": "^3.1.5",
    "vuetify-upload-button": "^2.0.2",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2",
    "@vue/compiler-sfc": "^3.1.0-0",
    "eslint": "^8.34.0",
    "eslint-plugin-vue": "^8.7.1",
    "lite-server": "^2.5.4",
    "mkdirp": "^1.0.3",
    "ncp": "^2.0.0",
    "rimraf": "^3.0.2",
    "sass": "^1.23.7",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.1",
    "vite": "^4.1.3",
    "vue-cli-plugin-vuetify": "~2.5.8",
    "postcss": "^8.4.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-console": "off",
      "no-unused-vars": "off"
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

vite.config.js

import { defineConfig } from 'vite'

const path = require("path");
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
          '@': require('path').resolve(__dirname, 'src')
        }
      },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
})```

Upvotes: 4

Views: 17520

Answers (3)

Iwalewa Fawaz
Iwalewa Fawaz

Reputation: 335

Including "type": "module", in my package.json works for me, you can try it also.

Upvotes: 2

Abolfazl Chaman
Abolfazl Chaman

Reputation: 191

For any one running in to this problem :

this a new problem with how latest versions of vite treat ESM (Es modules).

CommonJS files need to be explicitly named as .cjs

rename the files to postcss.config.cjs and tailwind.config.cjs (if your are using tailwind) as a workaround.

good luck, source

Upvotes: 18

simpledev
simpledev

Reputation: 394

Manage to fix by myself when i added this in vite.config.js

    css: {
    postcss: {
        plugins: [
            postcssNesting
        ],
    },
},

Upvotes: 2

Related Questions