Closed matthewhutchings closed 1 year ago
You should not compile postcss-load-config
with Vite. It is Node.js module.
Nothing in my project for postcss.
Package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.1.2",
"axios": "^0.27",
"laravel-vite-plugin": "^0.6.1",
"lodash": "^4.17.21",
"vite": "^3.1.8",
"vue-loader": "^17.0.0"
},
"dependencies": {
"browser-sync": "^2.27.10",
"dotenv": "^16.0.3",
"secure-ls": "^1.2.6",
"vue": "^3.2.36",
"vue-persistedstate": "^1.2.5",
"vue-router": "^4.1.6",
"vuex": "^4.0.2",
"vuex-persistedstate": "^4.1.0"
}
}
vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel(['resources/js/app.js']),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
app.vue:
<template>
<div>
<router-view></router-view>
</div>
</template>
app.js:
import vue from '@vitejs/plugin-vue'
import App from './App.vue'
import router from './routes'
import store from './store'
import '../css/app.css';
import './bootstrap';
new vue({
router,
store,
render: function (h) {
return h(App)
}
}).$mount('#app')
Check all imports in your project. Somewhere you import some tool, which has PostCSS dependency inside. It adds this dependency to client-side JS bundle and Vite compiles process.env.NODE_ENV
in postcss-load-config
sources.
The only thing including postcss is Vite. So it must be a problem with their package.
Also found here https://stackoverflow.com/questions/70993897/vite-and-postcss-issue-invalid-left-hand-side-in-assignment