SCSS styles are missing in static pages when updating @analogjs/[email protected] to @analogjs/[email protected] or newer #969
Comments
|
This is how my import analog, { PrerenderContentFile } from '@analogjs/platform';
import angular from '@analogjs/vite-plugin-angular';
import { PostAttributes } from 'src/app/types';
/// <reference types="vitest" />
import { defineConfig } from 'vite';
function transFormContentDirRoute(file: PrerenderContentFile, base: string) {
const attributes = file.attributes as PostAttributes;
// do not include files marked as draft in frontmatter
if (attributes.draft) {
return false;
}
// use the slug from frontmatter if defined, otherwise use the files basename
const slug = attributes.slug || file.name;
return `/${base}/${slug}`;
}
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
publicDir: 'src/assets',
build: {
target: ['es2020'],
},
resolve: {
mainFields: ['module'],
},
plugins: [
angular({
inlineStylesExtension: 'scss',
}),
analog({
prerender: {
routes: [
'/api/rss.xml',
'/',
'/blog',
'/contact',
'/imprint',
'/projects',
'/recruitment',
{
contentDir: '/src/content/blog',
transform: (file: PrerenderContentFile) =>
transFormContentDirRoute(file, 'blog'),
},
{
contentDir: '/src/content/projects',
transform: (file: PrerenderContentFile) =>
transFormContentDirRoute(file, 'projects'),
},
{
contentDir: '/src/content/talks',
transform: (file: PrerenderContentFile) =>
transFormContentDirRoute(file, 'talks'),
},
],
postRenderingHooks: [
async (route) => {
if (route.route.endsWith('.xml')) {
return;
}
const gTag = `<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXXX-1', 'auto');
ga('send', 'pageview');
</script>`;
route.contents = route.contents?.concat(gTag);
},
],
sitemap: {
host: 'https://k9n.dev/',
},
},
}),
],
test: {
globals: true,
environment: 'jsdom',
setupFiles: ['src/test.ts'],
include: ['**/*.spec.ts'],
reporters: ['default'],
},
define: {
'import.meta.vitest': mode !== 'production',
},
})); |
|
I've tracked down the A workaround is to pin Not sure where the |
|
Pinning Vite to |
|
Thanks @brandonroberts this will fix my issues for now. Should I let this issue open to track the dependency issues? |
|
Hi. Checking this, is there a hope you can make a more minimal reproduction i can check? 🙏🏼 |
Thanks @pi0, here's a reproduction - https://github.com/brandonroberts/analog-nitro-295 Steps to reproduce
The build finishes but the error messages are logged. Running The two files it throws the error on is |
Vite is already included as a peer dependency with the Angular CLI, so we don't want to create a conflicting one that results in install errors. We'll make the |
|
Thanks for the nice reproduction. The fix (nitrojs/nitro#2321) is marged and testable via nightly channel. i likely make a patch release today. (Note: it only removes the unwanted console error, i expect rest of the nitro behavior is same). |
|
@d-koppenhagen I figured out the There was a change in Vite 5.1 that surfaced this behavior. Will land a fix for this also which will allow you to go back to the latest release of Vite |
|
Awesome! Great that you found it out. And thanks a lot for your support and time invested! |
|
this is still happening on the latest version {
"name": "faverites",
"version": "0.0.0",
"type": "module",
"engines": {
"node": ">=18.19.1"
},
"scripts": {
"ng": "ng",
"dev": "ng serve",
"start": "npm run dev",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@analogjs/content": "^1.5.0",
"@analogjs/router": "^1.5.0",
"@angular/animations": "^18.0.0",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/forms": "^18.0.0",
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/platform-server": "^18.0.0",
"@angular/router": "^18.0.0",
"front-matter": "^4.0.2",
"marked": "^5.0.2",
"marked-gfm-heading-id": "^3.1.0",
"marked-highlight": "^2.0.1",
"marked-mangle": "^1.1.7",
"primeng": "^17.18.1",
"prismjs": "^1.29.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@analogjs/platform": "^1.5.0",
"@analogjs/vite-plugin-angular": "^1.5.0",
"@angular-devkit/build-angular": "^18.0.0",
"@angular/cli": "^18.0.0",
"@angular/compiler-cli": "^18.0.0",
"autoprefixer": "^10.4.14",
"jsdom": "^22.0.0",
"postcss": "^8.4.21",
"tailwindcss": "^3.3.1",
"typescript": "~5.4.2",
"vite": "~5.2.11",
"vite-tsconfig-paths": "^4.2.0",
"vitest": "^1.3.1"
}
} |
|
but i notice if switch browser or open a new profile it works again |
Please provide the environment you discovered this bug in.
Which area/package is the issue in?
platform
Description
I started to migrate my Analog project / static page to version 1.0.0. First it seemed to work and running
npm run devworks good without any issues after migration. Now I realized, the production build generated when runningnpm run buildindist/analog/publicseems not to include some styles. It looks like all references SCSS files aren't part of the build when comparing the served version ofdist/analog/publicand the result of the dev server runningnpm run dev.npm run dev✅npm run build❌I started to isolate the problem a bit more and I will run only in this issue when updating from @analogjs/[email protected] to @analogjs/[email protected] or newer. All other analog packages are running perfectly in version 1.0.0 and newer.
The problem can be reproduced by checking out my repository https://github.com/d-koppenhagen/k9n.dev - Branch: analogjs-platform-1.x.x.
Please provide the exception or error you saw
Other information
No response
I would be willing to submit a PR to fix this issue
The text was updated successfully, but these errors were encountered: