So I’m working on importing a blog template in an already built astro project. I did my best to combine my files but the one issue I’m still having is
Expression expected. ts(1109) [Ln9, Col1]
I’m not sure how to solve this error. When I searched I found this blog post which explained that i was missing a line - but I’m not sure what syntax errors I’m having/what i need to add.
When I try to run dev - I get an error with my @astroastro/tailwind saying “an unhanlded erroroccured while running the “astro:config:setup” hook. Cannot read properties of undefined reading ‘postcss’). Here’s what my my code looks like for the file it located the error in
import autoprefixerPlugin from "autoprefixer";
import fs from "fs/promises";
import path from "path";
import tailwindPlugin from "tailwindcss";
import resolveConfig from "tailwindcss/resolveConfig.js";
import { fileURLToPath } from "url";
function getDefaultTailwindConfig(srcUrl) {
return resolveConfig({
theme: {
extend: {}
},
plugins: [],
content: [path.join(fileURLToPath(srcUrl), `**`, `*.{astro,html,js,jsx,svelte,ts,tsx,vue}`)],
presets: void 0
});
}
async function getUserConfig(root, configPath, isRestart = false) {
const resolvedRoot = fileURLToPath(root);
let userConfigPath;
if (configPath) {
const configPathWithLeadingSlash = /^\.*\//.test(configPath) ? configPath : `./${configPath}`;
userConfigPath = fileURLToPath(new URL(configPathWithLeadingSlash, root));
}
if (isRestart) {
const resolvedConfigPath = await resolve("tailwind", {
mustExist: false,
cwd: resolvedRoot,
filePath: userConfigPath
});
const { dir, base } = path.parse(resolvedConfigPath);
const tempConfigPath = path.join(dir, `.temp.${Date.now()}.${base}`);
await fs.copyFile(resolvedConfigPath, tempConfigPath);
let result;
try {
result = await load("tailwind", {
mustExist: false,
cwd: resolvedRoot,
filePath: tempConfigPath
});
} catch (err) {
console.error(err);
} finally {
await fs.unlink(tempConfigPath);
}
return {
...result,
filePath: resolvedConfigPath
};
} else {
return await load("tailwind", {
mustExist: false,
cwd: resolvedRoot,
filePath: userConfigPath
});
}
}
function tailwindIntegration(options) {
var _a, _b;
const applyBaseStyles = ((_a = options == null ? void 0 : options.config) == null ? void 0 : _a.applyBaseStyles) ?? true;
const customConfigPath = (_b = options == null ? void 0 : options.config) == null ? void 0 : _b.path;
return {
name: "@astrojs/tailwind",
hooks: {
"astro:config:setup": async ({ config, injectScript, addWatchFile, isRestart }) => {
const userConfig = await getUserConfig(config.root, customConfigPath, isRestart);
if (customConfigPath && !(userConfig == null ? void 0 : userConfig.value)) {
throw new Error(
`Could not find a Tailwind config at ${JSON.stringify(
customConfigPath
)}. Does the file exist?`
);
}
if (addWatchFile && (userConfig == null ? void 0 : userConfig.filePath)) {
addWatchFile(userConfig.filePath);
}
const tailwindConfig = (userConfig == null ? void 0 : userConfig.value) ?? getDefaultTailwindConfig(config.srcDir);
config.style.postcss.plugins.push(tailwindPlugin(tailwindConfig));
config.style.postcss.plugins.push(autoprefixerPlugin);
if (applyBaseStyles) {
injectScript("page-ssr", `import '@astrojs/tailwind/base.css';`);
}
}
}
};
}
export {
tailwindIntegration as default
};
I’m kinda understanding what’s wrong but I’d love some help explaining it a little better. Like I know there’s issues with the current astro 5 and tailwind?? Thank you!
edit: i fucked up the md formatting - cleaned it up !!
