Angular ssr css variables name change issue - css

Suddenly some of my css variable names on SSR build on server are being changed to something else and not working.
For example i have
.color-black-75 {
color: var(--black-75-color);
}
in my styles.css but when i build project on server in browser it turns to:
i checked out to older commits from 1 month and 2 month ago but this is still happening.
everything works fine when i build project on local ( with docker ) but on server this is preventing some css classes from working.

First find and replace corrupted classes in *.css with correct classes in dist folder so the project will work fine on server until we find the real issue.
Then if project is being built fine on your local then the issue should be about Package.json package versions or your Dockerfile installed application versions so you can copy your local package-lock.json file to server via scp and then push your local docker image and then pull on server so these issues would be fixed.
The real issue in this case was a package version update which you could find with comparing local package-lock.json with server package-lock.json and then removing ^version and ~versions from package.json and use exact version so over time your packages won't be updated and won't cause any issue.

Related

Nextjs middleware prevents build

I am currently working on a nextjs project. The nextjs project is a bit older and used initially a _middleware.ts file in the pages directory. A while ago, the older nextjs version came in conflict with an update that we wanted to do. In order to get it working, we had to change the name of the file to: middleware.ts(without the underscore). Everything is working fine in development. When running npm run dev the following warning is displayed:
warn - using beta Middleware (not covered by semver) - https://nextjs.org/docs/messages/beta-middleware
until the actual build. When building, the following error is displayed:
- Collecting page data .ReferenceError: self is not defined
at Object.<anonymous> (/Users/****/**** Dropbox/**** ****/Mac/Documents/GitHub/******.com/_next/server/pages/middleware.js:1:1)
***
> Build error occurred
Error: Failed to collect page data for /middleware
According to: https://nextjs.org/docs/messages/middleware-upgrade-guide, the middleware file should currently be placed in the root directory (next to the pages folder). when moving the file middleware file to this directory, the error displayed while building does indeed go away, but when using npm run dev a white page is displayed containing:
style data-next-hide-fouc="true"body{display:none}/style
Moving the middleware file back to the pages folder, everything works fine in dev, but the page can not be built.
I have tried different things, among them:
I ran npm i eslint-config-next#latest --save-dev according to the above mentioned page, trying to make sure that I am running the latest nextjs verion. (When running npm next -v this although displays: 8.11.0).
I made sure that there is no assetPrefix defined, neither a basepath (Next.js Error Getting 404 When Fetching JS Resources After Refresh).
I added: <body style={{ display: "block" }}> according to this: https://github.com/vercel/next.js/issues/10285 . This only displays a plain version of the website (all styling is gone).
I made sure that there was no cypres being used to mess with the clock. This does not seem to be the case.
Any help is appreciated.

I want to open this already created next.js file locally using yarn

I try so many time but it's not working,
I try yarn install to install the yarn first, but it's not installing.
then I try yarn add and then yarn install, but still it's not working. I try next dev. cause I was thinking maybe that's how a next.js file open. but it's still not working.
give me a solution please
and one things, I was trying to create an next.js file but it's not opening. I try this code
yarn create next-app myapp
but it's not working, it's says this error
Usage Error: The nearest package directory (C:\Users\Intel Pc\Downloads\New folder\myapp) doesn't seem to be part of the project declared in C:\Users\Intel P
part of the project declared in C:\Users\Intel Pc.
- If C:\Users\Intel Pc isn't intended to be a project, remove any yarn.lock and/or package.json file there.
- If C:\Users\Intel Pc is intended to be a project, it might be that you forgot to list Downloads/New folder/myapp in its workspace configuration.myapp in its workspace configuration. ly separate project (not even a workspace), crea
- Finally, if C:\Users\Intel Pc is fine and you intend Downloads/New folder/myapp to be treated as a completely separate project (not even a workspace), create an empty yarn.lock file in it.
ev] [-i,--interactive] [--cached] [--mode #0] ..
$ yarn add [--json] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ...
Aborting installation.
yarn add --exact --cwd C:\Users\Intel Pc\Downloads\New folder\myapp react react-dom next has failed.
this image for my existing next.js app which I trying to open locally using yarn but it's not working

Local Jekyll build works but fails build in Github

My problem: I am able to build a nice website locally using Jekyll and the Skinny Bones theme, but when I upload my contents to GitHub the build fails.
System information: Running macOS 12.5, Jekyll 4.2.2, most up-to-date version of gems (managed by Bundler). Clean install of everything this morning.
What I've done:
Downloaded all relevant software and built out a GitHub Pages repo
per these instructions and the GitHub Pages instructions.
Cloned the project (let's call it project.github.io), unzipped the Skinny Bones theme inside that directory, got everything set up.
The directory now looks like:
Gemfile
Gemfile.lock
README.md
jekyll
_site
_pages
_layouts
a whole lot more
I build everything how I wanted it, navigated to the jekyll folder, and built it using bundle exec jekyll build and checked it interactively using bundle exec jekyll serve. Everything worked well, no errors, functioned as expected.
I then navigated to the project.github.io directory, added everything and pushed it successfully, then got the settings configured for GitHub pages (e.g., set it to the right branch, etc.).
This is where the problem occurs. I notice that the build failed, examined the error log, and see this in the output, two lines:
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'jekyll/css/main.scss': File to import not found or unreadable: variables. Load path: /usr/local/bundle/gems/jekyll-theme-primer-0.6.0/_sass on line 10
/usr/local/bundle/gems/jekyll-sass-converter-1.5.2/lib/jekyll/converters/scss.rb:123:in "rescue in convert": File to import not found or unreadable: variables. (Jekyll::Converters::Scss::SyntaxError)
The build has therefore failed, and my pages are not rendering. Furthermore, these are supported dependencies, per the GitHub documentation. I have verified that I have the same version of theme-primer installed.
Can anyone help me diagnose this problem?
I have solved this issue. The problem is that even though I was pushing all material from the parent, I was building locally from a /blog subdirectory inside my project.github.io parent directory. This was cloned directly from GitHub. When I tried to build locally from the parent, I got the same error as I was getting on GitHub, which tipped me off to what might be going on.
When I moved everything up to the parent directory level and rebuilt from parent, everything worked as expected and just as it did from initially building inside /blog. I pushed to GitHub, the build process completed, and the GitHub page was served.
Hopefully this will be helpful for someone else who might have this issue. Jekyll is adamant about directory hierarchy.

mup deploy works but image won't start

I'm deploying my Meteor app with mup from a Windows 10 box to a Digital Ocean VPS. Latest version of mup, latest version of meteor, app runs fine on Windows and the app deployed and ran fine before adding node-uber NPM. I see the following error in the logs when the app tries to start:
npm ERR! enoent ENOENT: no such file or directory, chmod '/bundle/bundle/programs/server/npm/node_modules/node-uber/node_modules/sshpk/bin\sshpk-conv'
Obviously the problem is with the backslash in the filename, but not sure where that is coming from or how to fix it. It isn't referenced in the package.json for node-uber. I've tried editting the package.json for sshpk on the Windows side, but that doesn't make any difference. I can't edit the file in the Docker container because the container keeps restarting and kicking me out.
Anyone have any suggestions on how to fix this, perferably permanently so I don't have to jump through hoops every time I deploy?
Actually manually editting the package.json file does solve the problem. Turns out I have multiple copies of sshpk installed because the parent NPMs are specifying specific versions as being required.
So the "fix" for this problem is the edit the "bin" section of the sshpk package.json file to flip the "\" to "/", save and rerun mup deploy.
Sigh...

WebEssentials less support not working

I'm using VS 2013 Update 4, with Web Essentials installed (the latest version)
If I create a brand new project, and add one .less file with nothing in it but a body declaration
body {
font-size: 10px;
}
I get this error "Compilation Error occurred (see error list to navigate to the error location):".
The error list is completely empty however.
I've done everything I've read, like uninstall / reinstall.
Hard to believe this is so hard and doesn't work out of the box?
Is there something else I can use that will convert to .css files within Visual Studio upon save?
Thanks, this is frustrating!!
I had the same issue with the 2.5.2 update.
I ended up uninstalling version 2.5.2. and installed the stable 2.5 version https://github.com/madskristensen/WebEssentials2013/releases/tag/v2.5 (.vsix)
After this everything was working again.
So:
Uninstall 2.5.2
Restart VS 2013
Install 2.5 (.visx)
tada
For me the problem was a hash(#) in the folder structur where my project was in.
So C:\Develop\C#\MyProject\... failed while C:\Develop\CSharp\MyProject\... worked.
I tracked down a way to fix this with the current version of WE (the issue is due to either NodeJS not being packed right or extracted right - not sure which). So to fix this simply reinstall node and set the modules back up
Locate the path where WE is installed
Should be something like C:\Users\$username\APPDATA\LOCAL\MICROSOFT\VISUALSTUDIO\12.0\Extensions\$random_folder
Run the commands necessary to reinstall node & set the modules back up
I made a powershell script to do this for you open powershell and run
iex ((new-object net.webclient).DownloadString('https://gist.githubusercontent.com/iamkrillin/e5e95f0193eef4358e09/raw/301c170e9eed302f09f0f577dc0ab26be4cc09ea/we.ps1'))
You can view the script here. https://gist.github.com/iamkrillin/e5e95f0193eef4358e09#file-we-ps1
UPDATE
An update has been released to address this problem

Resources