svelte-preprocess
svelte-preprocess copied to clipboard
sveltejs
PostCSS configuration was not passed or is invalid
Describe the bug I have an issue when I'd like to use the tailwind @apply syntax within a Svelte template:
<style>
.my-button {
@apply bg-gray-50
}
</style>
It works without any issue in a new project npm init svelte@next svelte-next but not in our existing project. Whats interesting, if I change something in a file it sometimes reloads and it just works as expected.
Logs
[svelte-preprocess] PostCSS configuration was not passed or is invalid. If you expect to load it from a file make sure to install "postcss-load-config" and try again. Error: Cannot find module '/Users/wiese/Dev/project/project-web/package.json' imported from '/Users/wiese/Dev/project/project-web/node_modules/.pnpm/[email protected]/node_modules/lilconfig/dist/index.js'
and/or:
/Users/wiese/Dev/project/project-web/src/components/auth/LoginOverlay.svelte:7:131 Semicolon or block is expected
5 |
6 | .input {
7 | @apply appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-gray-500 focus:border-gray-500 focus:z-10 sm:text-sm;
^
8 | }
9 |
Expected behavior I'd like to understand why it happens and how I could find the issue because it works in a new project.
Information about your project:
- Latest Chome
- OSX 12.2
- Node, v16.13.2, preprocess: 4.10.2, sveltekit 1.0.0-next.247
svelte.config.js
import adapter from "@sveltejs/adapter-vercel";
import preprocess from "svelte-preprocess";
import { resolve } from "path";
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: [preprocess({ postcss: true })],
kit: {
adapter: adapter(),
target: "#svelte",
vite: {
ssr: {
noExternal: ["svelte-hero-icons"],
},
resolve: {
alias: {
$components: resolve("src/components"),
$icons: resolve("src/components/icons"),
},
},
},
},
};
export default config;
postcss.config.cjs
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
const config = {
plugins: [
tailwindcss(),
autoprefixer(),
],
};
module.exports = config;
package.json
{
"dependencies": {
"@googlemaps/js-api-loader": "^1.13.2",
"@supabase/supabase-js": "^1.29.4",
"@uploadcare/upload-client": "^2.2.0",
"algoliasearch": "^4.12.0",
"autonumeric": "^4.6.0",
"clearbit": "^1.3.5",
"cohere-js": "^1.0.19",
"color": "^4.2.0",
"datebook": "^7.0.8",
"instantsearch.js": "^4.37.3",
"jsonwebtoken": "^8.5.1",
"libphonenumber-js": "^1.9.46",
"lodash-es": "^4.17.21",
"mapbox-gl": "^2.6.1",
"marked": "^4.0.12",
"node-fetch": "^3.2.0",
"pluralize": "^8.0.0",
"svelte-hero-icons": "^4.0.3",
"tldjs": "^2.3.1",
"ua-parser-js": "^1.0.2",
"uploadcare-widget": "^3.16.0",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
"@sveltejs/adapter-vercel": "^1.0.0-next.39",
"@sveltejs/kit": "^1.0.0-next.247",
"@tailwindcss/aspect-ratio": "^0.4.0",
"@tailwindcss/forms": "^0.4.0",
"@tailwindcss/line-clamp": "^0.3.1",
"@tailwindcss/typography": "^0.5.0",
"@tsconfig/svelte": "^3.0.0",
"@types/lodash-es": "^4.17.5",
"@types/pluralize": "^0.0.29",
"autoprefixer": "^10.4.2",
"cssnano": "^5.0.16",
"postcss": "^8.4.5",
"postcss-load-config": "^3.1.1",
"prettier": "^2.5.1",
"prettier-plugin-svelte": "^2.6.0",
"svelte": "^3.46.3",
"svelte-check": "^2.3.0",
"svelte-preprocess": "^4.10.2",
"tailwindcss": "^3.0.17",
"tslib": "^2.3.1",
"typescript": "^4.5.5",
"vite": "^2.7.13"
},
"type": "module"
}
I have the same issue very inconsistently. Very hard to track down the cause.
I have noticed that a file is being requested with ?svelte&type=style&lang.css <- lang css, but I have explicitly set it to postcss
<style lang="postcss">
.root {
@apply inline-flex text-center justify-center items-center leading-7 h-5;
}
...
</style>
Error:
hmr update /src/components/LoadingDots.svelte?svelte&type=style&lang.css
[svelte-preprocess] PostCSS configuration was not passed or is invalid. If you expect to load it from a file make sure to install "postcss-load-config" and try again.
I'm running into a similar issue, but I do not use @apply in my codebase. Then again I do include DaisyUIi and TailwindCSS, both of those have @apply in them. So far I have been unable to replicate or track down the exact cause. It happens at random. and resetting cache and/or renaming the postccs.config.cjs file while reloading the dev server might fix it for a while sometimes.
I have not been able to get builds to bug out it only seems to happen on the dev server.
Information about your project:
Latest Chome and Brave Manjaro Linux (fully updated) Node, v17.3.0 preprocess: 4.10.1, sveltekit 1.0.0-next.231
Note: versions are a bit older than OP Edit: Updated to 4.10.2 && 1.0.0-next.247; same issues
error message
13:42:50 [vite] Internal server error: Cannot find module '/home/.../postcss.config.cjs' imported from '/home/.../node_modules/vite/dist/node/chunks/dep-0351185a.js'
Plugin: vite:css
File: /home/.../src/app.css
at viteResolve (/home/.../node_modules/vite/dist/node/chunks/dep-0351185a.js:60123:25)
at Function._resolveFilename (/home/.../node_modules/vite/dist/node/chunks/dep-0351185a.js:60137:20)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.search (/home/...g/node_modules/vite/dist/node/chunks/dep-0351185a.js:12723:37)
at async resolvePostcssConfig (/home/,,,/node_modules/vite/dist/node/chunks/dep-0351185a.js:20506:22)
at async compileCSS (/home/.../node_modules/vite/dist/node/chunks/dep-0351185a.js:20329:27)
at async TransformContext.transform (/home/.../node_modules/vite/dist/node/chunks/dep-0351185a.js:20015:50)
at async Object.transform (/home/,,,/node_modules/vite/dist/node/chunks/dep-0351185a.js:36985:30)
package.json
{ "name": "a-hackaton", "version": "0.0.1", "scripts": { "dev": "env-cmd svelte-kit dev", "build": "svelte-kit build", "package": "svelte-kit package", "preview": "svelte-kit preview", "check": "svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .", "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ." }, "devDependencies": { "@noble/ed25519": "^1.5.1", "@noble/hashes": "^1.0.0", "@sveltejs/adapter-auto": "next", "@sveltejs/kit": "next", "@tailwindcss/typography": "^0.5.0", "@types/mongoose": "^5.11.97", "@typescript-eslint/eslint-plugin": "^4.31.1", "@typescript-eslint/parser": "^4.31.1", "autoprefixer": "^10.4.2", "buffer": "^6.0.3", "cookie": "^0.4.1", "daisyui": "^1.23.0", "env-cmd": "^10.1.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.1", "graphql": "^16.2.0", "graphql-request": "^3.7.0", "mongodb": "^4.3.0", "mongoose": "^6.1.7", "near-api-js": "^0.44.2", "postcss": "^8.4.5", "prettier": "^2.4.1", "prettier-plugin-svelte": "^2.4.0", "svelte": "^3.44.0", "svelte-check": "^2.2.6", "svelte-preprocess": "^4.10.1", "tailwindcss": "^3.0.12", "theme-change": "^2.0.2", "tslib": "^2.3.1", "typescript": "^4.4.3", "uuid": "^8.3.2" }, "type": "module", "dependencies": {} }
svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
import { resolve } from 'path';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: [preprocess({})],
kit: {
adapter: adapter(),
target: '#body',
vite: {
resolve: {
alias: {
$schema: resolve('./src/schema'),
},
},
},
},
};
export default config;
postcss.config.cjs
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');
const config = {
plugins: [
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
tailwindcss(),
//But others, like autoprefixer, need to run after,
autoprefixer,
],
};
module.exports = config;
Moving the postcss config to the svelte.config.js
import adapter from "@sveltejs/adapter-vercel";
import preprocess from "svelte-preprocess";
import { resolve } from "path";
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: [
preprocess({
postcss: {
plugins: [tailwindcss(), autoprefixer()],
},
}),
],
kit: {
adapter: adapter(),
target: "#svelte",
vite: {
css: {
postcss: {
plugins: [tailwindcss(), autoprefixer()], // <-- here
},
},
ssr: {
noExternal: ["svelte-hero-icons"], // <-- and also here
},
resolve: {
alias: {
$components: resolve("src/components"),
$icons: resolve("src/components/icons"),
},
},
},
},
};
export default config;
and deleting postcss.config.cjs fixed it 🤷
@wiesson I think that you should change autoprefixer() to autoprefixer.
On my end, I could put plugin: [] in the top part (that removes duplicate).
But, I have to say that I don't really think that it's a "fix" 🤔 I would like to understand more what is going on behind.
If some people could advice? 👍
No, it is not really a fix but at least I can continue working with that 😅 I tested both variants and only if I add the plugins to both, it works.
I'm not sure what the postcss plugin array requires. I also checked what tailwind and autoprefixer actually returns and it looks like, both are functions (tw for sure)
I would like to understand more what is going on behind.
Same here :)
Closing my editor, terminal and browser tab seems to fix it until the next time it happens. I personally prefer that to a config change.
Interesting clues, it is starting to look like the issue is that sometimes the hot reload code path does not look for the configuration file, tries to use a cached version but fails, or looks for the wrong file/setup. (resetting the hole dev env fixes it for a while, duplicating configuration into two places solves it, ...)
I can confirm that I need both configuration blocks mentioned above set to have a smooth workflow again.
Moving the postcss config to the
svelte.config.js
Definitely not a fix, but at least a headache terminator. 🥲 (Thanks, @wiesson!)
I am facing this issue for a couple of days without any success. It just appears from nowhere.
Don't know if a coincidence, but It started after I ran yarn dev --host – and, yes, I tried deleting .svelte-kit and node_modules
Not sure if related, but dropping the reproduction repo here as a reminder for later which also has an issue with loading PostCSS: https://github.com/pngwn/postcss-preprocess-repro-1
Sorry, for the old thread, but I recently had this issue moving from @sveltejs/kit 1.0.0-next.328 -> 1.0.0-next.350. Updating the vite.css.plugins like @wiesson helped me as well.
On the shoulders of @wiesson solution I had to modify svelte.config.js for svelte-kit 1.0
import preprocess from 'svelte-preprocess';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: [
preprocess({
postcss: {
plugins: [tailwindcss(), autoprefixer()]
}
})
]
};
export default config;
and vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { resolve } from 'path';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
/** @type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()],
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
},
css: {
postcss: {
plugins: [tailwindcss(), autoprefixer()] // <-- here
}
},
ssr: {
noExternal: ['svelte-hero-icons'] // <-- and also here
},
resolve: {
alias: {
$components: resolve('src/components'),
$icons: resolve('src/components/icons')
}
}
};
export default config;
import preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: [
preprocess({
postcss: true // <- only this line is needed. There is no need to change vite.config.js
})
]
};
export default config;
Using the latest vitePreprocess in Sveltekit, this pops up because I'm using workspaces, and my ui package is not in the root of my repo.
"If your tailwind.config.js is not in the workspace root. Or if your project is not in the workspace root. Make sure you pass in the path to your tailwind config file in your postcss config file."
const path = require('path');
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [tailwindcss(path.resolve(__dirname, './tailwind.config.cjs'))]
};
svelte-preprocess allows you to specify your postcss.config file path:
import adapter from "@sveltejs/adapter-vercel";
import preprocess from "svelte-preprocess";
import { resolve } from "path";
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess({
postcss: {
configFilePath: './postcss.config.cjs', // <-- your postcss.config file path
},
}),
...
This could be particularly useful if you want to keep a separate configuration file and resolve the [svelte-preprocess] PostCSS configuration was not passed or is invalid ... error.
