> Build error occurred
Error: Turbopack build failed with 1 errors:
./node_modules/@libsql/hrana-client/LICENSE:1:5
Parsing ecmascript source code failed
> 1 | MIT License
    |     ^^^^^^^
  2 |
  3 | Copyright 2023 the sqld authors
  4 |
Expected ';', '}' or <eof>
    at ./node_modules/ (libsql/hrana-client/LICENSE:1:5)
Error: Command "npm run build" exited with 1

Such error was shown when pushing to Vercel and was not seen in development environtment.

Tech Stacks

Solution

1. Find your package.json file

2. Find the following lines:

      "scripts": {
        "dev": "next dev --turbopack",
        "build": "next build --turbopack",
        "start": "next start",
        "lint": "biome check",
        "format": "biome format --write"
      },
   

3. Remove the --turbopack from build command, so it becomes:

      "scripts": {
        "dev": "next dev --turbopack",
        "build": "next build", //LOOK HERE
        "start": "next start",
        "lint": "biome check",
        "format": "biome format --write"
      },
   

Notes

This error seems to affect Turbopack builds since removing --turbopack from the build script can resolve the build error. This error also mentioned here https://community.vercel.com/t/build-error-an-unexpected-error-happened-when-running-this-build/20836

Attempting to manually delete all the LICENSE and README files relating to hrana library from the Node Modules proven to not work for me. However, it may yields different result to other people as seen here https://github.com/vercel/next.js/issues/82881#issuecomment-3220603319

The move from previous versions to Next 15 brings some unique challenges, especially when dealing with params. As the saying goes, “Every change breaks someone’s workflow”. And today, that was exactly what happened to me 😂. Hence, I want to document it as a blog post for further reference for anyone who need it (might as well be future me imo).

TL;DR

type Params = Promise<{ slug: string }>;

The problem

Let’s say we develop a dynamic web app. Dynamic in here means we populate the app with dynamic data streams from the server (database, API, or such). As for me, I was in the middle of making two pages: blog and blog/[id]. You might have guessed that blog/[slug] needs the slug as a parameter to fetch the data from the API. My file is something like this:

blog/[slug] page:

// NOTE: I only put in the conflicting lines.
...
const PostPage = async ({ params }: { params: { slug: string } }) => {
  const post = await getPostBySlug(params.slug);

  if (!post) {
    return <div>Post not found</div>;
  }

  return (
    <>
      <Layout>
        <div className="container mx-auto px-4 max-w-3xl">
...

and while this does work locally, it went full alarm once I pushed it to Vercel. The error was

Failed to compile.
app/blog/[slug]/page.tsx
Type error: Type '{ params: { slug: string; }; }' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

First trial

After reading the error, I then trying to do something like this

// NOTE: I only put in the conflicting lines.
...
type PageProps = {
  params: {
    slug: string;
  };
};

const PostPage = async ({ params }: PageProps) => {
  const post = await getPostBySlug(params.slug);

 if (!post) {
    return <div>Post not found</div>;
  }

  return (
    <>
      <Layout>
        <div className="container mx-auto px-4 max-w-3xl">
...

as you can see, I now throw in PageProps as a type. Once again, everything works well in dev/local but then scream when pushed to Vercel. The dreaded error was still there.

The solution

Desperate times called for a Google search. With quick searches I then found this post https://github.com/vercel/next.js/discussions/71997
and within that post was this guy’s brilliant idea (shout out to ignatiosdev):

Intrigued by his idea, I then try this

...
type Params = Promise<{ slug: string }>;

const PostPage = async ({ params }: { params: Params }) => {
  const { slug } = await params;
  const post = await getPostBySlug(slug);

  if (!post) {
    return <div>Post not found</div>;
  }

  return (
    <>
      <Layout>
        <div className="container mx-auto px-4 max-w-3xl">
...

aaand it works!
Now it works both in local and production env and nothing was broken no more. All needed to be done was adding type Params = Promise<{ slug: string }>; before calling the params as an argument to the async function.

Conclusion

Initiate Params as a type Promise and only then you can call it to the async function. For further reference, I do suggest reading the NextJS documentation. But for now, that did the job for me so I will leave it there.

Hope this helps!
Let's have further discussion in the comment and bye for now 👋👋

Schema validation failed with the following errors: Data path "" must have required property 'browserTarget'

Naturally, I was confused and questioning where I went wrong 😵. These are what I did on the terminal before getting the error:

PS E:\Code> ng new atmedsphere
PS E:\Code> cd atmedsphere 
PS E:\Code\atmedsphere> ng add @angular/material
PS E:\Code\atmedsphere> npm install -D tailwindcss postcss autoprefixer; npx tailwindcss init
PS E:\Code\atmedsphere> npm audit
PS E:\Code\atmedsphere> npm audit fix --force
PS E:\Code\atmedsphere> ng serve

Pretty standard isn't it? I don't think I got anything wrong so then I look it up on Stackoverflow and GitHub issues. One term that got my attention was "Significantly older". It seems like there's a package in the package.json file that is significantly older compared to the Angular version in use.

I also try to look up the solution brought by @pinarella:

my app is on angular 7.2.3

remove "es5BrowserSupport": true from angular.json. and npm start now works.

However I was unable to find es5BrowserSupport in my Angular.json or package.json file.

So I started looking around a bit and was making a unique finding. Inside my package.json file, a dependency named "@angular-devkit/build-angular" that is suspiciously older than my Angular version (Angular 17).

"@angular-devkit/build-angular": "^15.0.5"

full package.json file:

{
  "name": "atmedsphere",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:atmedsphere": "node dist/atmedsphere/server/server.mjs"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/cdk": "^17.3.1",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/material": "^17.3.1",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/platform-server": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@angular/ssr": "^17.3.1",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.5",
    "@angular/cli": "^17.3.1",
    "@angular/compiler-cli": "^17.3.0",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "autoprefixer": "^10.4.19",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.1",
    "typescript": "~5.4.2"
  }
}

Instinctively, I decided to try replacing it with the current Angular version number I was on as so:

"@angular-devkit/build-angular": "^17.0.5"

Hence the full package.json file:

{
  "name": "atmedsphere",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:atmedsphere": "node dist/atmedsphere/server/server.mjs"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/cdk": "^17.3.1",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/material": "^17.3.1",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/platform-server": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@angular/ssr": "^17.3.1",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.5",
    "@angular/cli": "^17.3.1",
    "@angular/compiler-cli": "^17.3.0",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "autoprefixer": "^10.4.19",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.1",
    "typescript": "~5.4.2"
  }
}

And then I run npm update in the terminal. Honestly, it was not clear wether I should have been using npm update or ng update. So I went npm update anyway since I think the change I made is in package.json file that is accessed by npm.

The update went smooth and I was then able to do ng serve without any further issue. So yeah, if you are experiencing the same issue, try

"@angular-devkit/build-angular": "^17.0.5"

in your package.json file.

Hope this helps!
Let's have further discussion in the comment and bye for now 👋👋

I censored the username and profile picture because I sincerely have no intention of messing other people's business ❌. I just genuinely want to talk about the Ads.

In the picture there are 12 well-known web-related terms being shown with the word "Week" written on top and a number following it. Presumably, it's what the student will learn on that respective week when taking the course. Let's call it "roadmap" for short.

Some things definitely stand out for me and honestly I disagree much with the roadmap. Here's some:

1. Learning Javascript before HTML and CSS

Start it off nice and easy. The roadmap planned to teach Javascript before HTML and CSS. Now of course this is not so bad. However, I kinda think the opposite is much better. Javascript is a great language to teach programming logic and functionality for beginners. However, without HTML and CSS, Javascript is pretty much a theoretical language. Sure you can console.log() your code to the terminal, but that's pretty much it, right?
Keep in mind we're talking beginners here since it's said to be done on Week 1.

Human loves to brag, that's just in our DNA. How you would brag your Javascript code to your pals when all it can do is showing things on the terminal?

Imagine if we're doing the opposite. In a span of a week, you can build a really simple landing page or whatever, and host it for free on those serverless services, and then show it to your friends! 😲
Add another week to that and you can build a BMI calculator with DOM modification with vanilla JS and CSS (no framework).

Don't forget to block those known bots when hosting your site so they don't waste your bandwith. ✨

2. Learning Angular at week 5

Okay now what the actual f is going on 😂. Diving right into Angular with basic JS, HTML, and CSS knowledge doesn't seem like a great idea...

I'm more inlined with studying React first instead of Angular. React is much more flexible and has a gentle-er learning curve. With React you can more quickly transcends from learning to building; a great way to maintain motivation!

Another great idea why learning Angular at week 5 is not so great is because you need Typescript to build with Angular which seems like won't be learned until week 10.

After you know Typescript, you can start building with Angular. Probably then host your page on Cloudflare Pages for free. Also, while we are talking Typescript...

3. Learning Typescript after Angular

This one is still in a direct connection with poin 2 above. Pretty much you will need Typescript to build with Angular so there's really no point learning it after you know Angular. 🤓

Conclusion

So yeah that pretty much some parts which I disagree with the Ads. What do you think?
I'm open for discussion so please let your voice be heard in the comment section. I'll be seeing you again. Bye now 👋

Lately, my websites have been dealing with massive amount of requests. There are literally hundreds of thousands of request each month for about three consecutive months. Well, trafic's a good thing but pardon me for saying that traffic seems.. "questionable", at best 🤔.

Fortunately for me, I host my sites on CloudFlare Pages with does not charge for network egress. It just my curiosity that causes me to dig deeper on this topic.

At first I thought it was DDOS until I see the analytics. The requests were different in location and also consistent for three months. Three months. Who in their right minds would DDOS my sites for three months in a row?? ⁉️
I mean it's fine if you want to attack like NASA or whatever, but come on now..

It just so happens that I stumbled across this video by Matt KC that then I started thinking about it seriously:

So I dug a little deeper and found out how this "Bytespider" bots have been wrecking people's nerve on the internet. Just look at this post by @generosus on the Wordpress forum from 9 months ago: (link: https://wordpress.org/support/topic/psa-bytedance-and-bytespider-bots-recommend-blocking/)

Or this one in the phpBB forum from 2020: (https://www.phpbb.com/community/viewtopic.php?t=2550501)

Well, I might be a bit late to the party since the anomaly has only occured to me lately. Nevertheless, here's how to block these bots with CloudFlare WAF in case you experiencing the same issue or just want to be careful.

Here goes 🛡️

Well first of all of course you need a CloudFlare account and I will assume you already have one.

Step 1: Go to your dashboard and click on your site

For this tutorial I will go with justforvan.com.

Step 2: On the sidebar, Go to "Security" then "WAF"

Pretty straightforward I guess. Just click on "Security" first then choose "WAF".

Step 3: Click "Create Rule"

On the middle pane that uncover after you done step 2, click the blue button "Create rule".

Step 4: Fill in the rule

Fill it like so:

After that, press the OR button on the side:

Then in the new row, fill it like this:

So the entire page will be like:

Or in tabular form:

Rule name

Step 5: Deploying the rule

And yes finally just click the sweet blue button of Deploy ✅.

Closing ceremony

And yes that's how you do it. Pretty straightforward I suppose. Goes pretty well when you serve your site through Cloudflare, like your Angular site that is deployed on Pages.

Hope this helps and I will be seeing you next time! 😁👋

Special mentions

Big thanks for the amazing people behind these posts:

https://community.cloudflare.com/t/blocking-user-agents/523190

https://stackoverflow.com/questions/57908900/what-is-the-bytespider-user-agent

https://wordpress.org/support/topic/psa-bytedance-and-bytespider-bots-recommend-blocking/

https://www.phpbb.com/community/viewtopic.php?t=2550501

https://www.johnlarge.co.uk/blocking-aggressive-chinese-crawlers-scrapers-bots/#comment-11823

On the IDE 💻

Try to run

npx ng build --c production

This is to check whether the build can run locally on your system. The idea being if it can't run locally, then it will most probably won't run on the cloud.

The --c production flag is there to indicate that it is a production setting that should be run by the ng build. You can also run --configuration production if you want the long version (--c is a shortened version of --configuration). Npx is there because I use Node. Refer to this discussion on Stackoverflow to learn more.

P.s. Do not run ng build --prod as it has been deprecated. ‼️

If you're using Node

Run node -v

PS A:\Code\> Node -v
v20.11.1

Note whatever number showed up. For me, it is 20.11.1. This indicates your Node version.

If you are using anything else..

Just try to find your environtment version.

On Cloudflare Pages 🛜

Use this configuration:

Details:

P.s. Do not use npx ng build --c production --watch. Your deployment does not need to wait for a code changes (--watch) as Pages will take care of that and rebuild after every commit to your repo. ‼️

After that, open the Environment variables (advanced) and Add new variable

Variable name: NODE_VERSION (or change like YARN VERSION)
Value: Depends on the number shown on your environtment node -v.

Finally, click SAVE AND DEPLOY.

You should be good to go. For a simple, one page app, it should be deployed between 1-2 minutes. If anything goes longer than that, you might have a problem. That's the steps which have been succesful for me. I hope this helps! 😁

Microsoft Editor (will be reffered to as "Editor") is, according to Wikipedia, "closed source AI-powered intelligent writing assistant available for Word, Outlook, and as a Chromium browser extension part of Office 365. It includes the essentials in a writing assistant, such as a grammar and spell checker." (source)
It's kind of Microsoft's answer for Grammarly, a software that does more or less the same.

Even after I thought my struggle has come to an end after seeing all Office apps have been installed, I found that I was wrong. I didn't see the Editor icon on the Home ribbon. I search back and forth, try updating the app as well, but none seems to work. Until ...

1. Update your Office apps 💡

Admittedly, this step is so arguable since there is no evidence it helps solving the case 😀.
But, since I did it before my Editor appear, I'm going to add this step here. It's up to you whether you want to go on or update your apps first. I do recommend updating your apps on regular basis, though. 😉😉

2. Open Microsoft Edge 💡

In case you don't know what Edge is, it's a built-in browser for Windows 10. Being built-in, you can do this step without installing anything beforehand. Just click the icon (it's a blue round-shape icon, shaped like the letter "E").

3. Install the Editor extension 💡

Okay, telling the truth, I don't know why you have to install this extension of your browser (even if you're not using Edge as your browser after all) to work on the Office apps 😕😕.
But it is what it is.

Click this link: https://microsoftedge.microsoft.com/addons/detail/microsoft-editor-spellin/hokifickgkhplphjiodbggjmoafhignh (this is an official link from Microsoft. Don't worry)

And click on the "Get" button. It will install the extension.

You then have to sign in to fully enable the extension.

After that? Close and try to reopen your Office app, preferably Word. You should see the icon on the right Home ribbon.