Next.js Deploy to Netlify - next.js

I am trying to deploy my Next.js app into Netlify using Github, the build succeeds, but when I open the page it says "page not found". Additionally, my repo consists of two files: front_end where my next.js repo lives and back_end where my solidity smart contract lives.
These are my build settings
How can I ensure that the page is found?

I found the answer here with my problem by a user kirillibrahim:
https://answers.netlify.com/t/deployment-of-nextjs-website-page-not-found/28870/4
[build]
command = "npm run build && npm run export"
publish = "out"
netlify.toml at root folder
"scripts": {
"export": "next export"
},
package.json at root folder
Build settings for the netlify project;
Build command: npm run build && npm run export
Publish directory: out

Related

An 'Try building your app with 'next build' before starting the production server' is printed despite run npm run build

I am planning to deploy the frontend with Next.js and the backend with springboot.
Even though I built next.js, next.js still print out the following error.
Could not find a production build in the
'C:\Users\tojaeung\Desktop\blog\frontend.next' directory. Try
building your app with 'next build' before starting the production
server. https://nextjs.org/docs/messages/production-start-no-build-id
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
Since i help you to solve this ploblem, i wrote the folling log when i build app of next.js.
Loaded env from
C:\Users\tojaeung\Desktop\blog\frontend.env.production info -
Linting and checking validity of types ..error - ESLint: Failed to
load config "plugin:prettier/recommand" to extend from. Referenced
from: C:\Users\tojaeung\Desktop\blog\frontend.eslintrc.json info -
Linting and checking validity of types info - Disabled SWC as
replacement for Babel because of custom Babel configuration ".babelrc"
https://nextjs.org/docs/messages/swc-disabled info - Using
external babel configuration from
C:\Users\tojaeung\Desktop\blog\frontend.babelrc (node:6312)
[DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning:
Module.updateHash: Use new ChunkGraph API (Use node --trace-deprecation ... to show where the warning was created) info - Creating an optimized production build info - Compiled successfully
As you can see, it's built without a problem.
What is the cause of this problem?

Command "encore" not found when trying yarn encore dev command

I am currently stuck at the Encore/Webpack installation. I followed the steps at symfony.com. But when continuing to the simple example I got stuck at running yarn encore dev. I get the error: "Command "encore" not found". I also have an error when running symfony server:start after installing Encore and navigating to a view:
An exception has been thrown during the rendering of a template ("Could not find the entrypoints file from Webpack: the file "path/entrypoints.json" does not exist.").
As far as I know the entrypoints.json should have been autogenerated. I have Yarn 1.22.10 and NodeJS 14.16.1.
What I have done
I executed the commands composer require symfony/webpack-encore-bundle
and yarn install
I looked at StackOveflow questions 'error Command "encore" not found.' when running 'yarn run encore' in Symfony4, webpack encore dev-server not found /, Error Command "encore" not found. (separate backend webpack), Can't run encore dev
I executed the command composer require webpack
I noticed my package.json doesn't have a scripts object where the command encore dev is supposed to be living. I watched a YouTube video and followed it (https://youtu.be/Fs_4FMoSO90). That's why I know this. I wonder why I don't have it. Below is the package.json from the video. My package.json only has the dev dependency Bootstrap.
Executed npm install
Package.json from video:
{
"devDependencies": {
"#symfony/webpack-encore": "^0.31.0",
"core-js": "^3.0.0",
"regenerator-runtime": "^0.13.2",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
}
My package.json:
{
"devDependencies": {
"bootstrap": "^5.0.0"
}
}
I removed the package.json, package-lock.json and executed yarn install again and it installed some packages. I didn't need NPM. I already got Bootstrap from my Yarn.lock (that's the only thing in there). I still have both errors though.
After Yivi's advice I executed composer req webpack, yarn install and yarn encore dev. The difference is that I executed composer require symfony/webpack-encore-bundle which is what is mentioned on the installation page on the symfony website. The yarn encore dev command tries to run webpack now, but I get the following error: Error: Encore.enableStimulusBridge is not a recognized property or method. webpack.config.js:26 Object.<anonymous>
webpack.config.js line 26
// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
.enableStimulusBridge('./assets/controllers.json')
Your advice worked msg. I installed the recipes with composer recipes:install symfony/webpack-encore-bundle --force -v and now yarn encore dev compiles webpack successfully. I now also know that I accidentally kept the package.json from the video in my project which explains why my error changed from Command encore not found to Error: Encore.enableStimulusBridge is not a recognized property or method. webpack.config.js:26 Object.<anonymous>

Lerna on AWS CodeBuild & CodeDeploy Not Installing Local Dependencies

So I have a Typescript project called backend with a depedency like such in its package.json:
"dependencies": {
"#the-couple-game/helpers": "^1.0.0",
}
And helpers (also Typescript) is in another folder with its package.json like such:
{
"name": "#the-couple-game/helpers",
}
So running lerna bootstrap should link the two and install #the-couple-game/helpers in backend's node_modules which it does locally.
However, doing the same (with --no-ci because I don't want npm ci) using Codebuild using the below buildspec.yml does not add a #the-couple-game/helpers in backend's node_modules. So if I run backend's transpiled index.js it would complain about the missing module.
version: 0.1
phases:
install:
commands:
- npm install -g lerna
pre_build:
commands:
- lerna bootstrap --no-ci --concurrency 4
build:
commands:
- lerna run build --concurrency 4
artifacts:
files:
- "**/*"
For now, I have to resort to manually doing a lerna bootstrap after deployment to CodeDeploy (using a script called from appspec.yml) so it installs the missing module but shouldn't Codebuild have covered that part?
Thanks.
So it turns out AWS CodePipeline doesn't support symlinks in source (Codebuild in my case). Reference
So after deployment, I'll have to lerna link using a shell script to create the links which is not an expensive job for my micro ec2 instance to do.

Deploying to Firebase Functions with a monorepo

As per Firebase Functions with Yarn workspaces, I'd like to deploy a monorepo to Firebase using Yarn Workspaces. I can successfully deploy the "web" aspect to Firebase Hosting, which references a shared "core" workspace. However, attempts to do the same with the "functions" workspace on Firebase Functions fails.
I'm using Yarn Workspaces with the following folder structure:
packages/
core/ // name: firebase-monorepo-core: custom core package
functions/ // name: firebase-monorepo-functions: firebase functions package
web/ // name: firebase-monorepo-web: react package
These have been configured in the root package.json file:
"workspaces": {
"packages": [
"packages/*"
],
"nohoist": [
"**/firebase-monorepo-core"
]
}
In an attempt to enable Yarn workspaces in Firebase (and therefore share my core package) I've used the nohoist feature to create symlinks to the core workspace in functions and web as per twiz's Stackoverflow answer.
The core package also exists as a dependency in functions and web:
"dependencies": {
"firebase-monorepo-core": "*"
}
There are no problems when any of this runs locally, and in fact deployment of the web package to Firebase hosting works fine. However, deployment of the functions package to Firebase functions throws an error:
I've created a Github repository https://github.com/cjmyles/firebase-monorepo to demonstrate this, and the resultant web workspace can be viewed at https://fir-monorepo.firebaseapp.com.
I can get the functions package to deploy if I yarn pack the core workspace and reference it as a tarball in the package.json file, but I really don't like that solution and it will require more overhead to automate it.
Any advice would be appreciated to resolve this issue.
The issue is that firebase-tools assumes that all packages used by your function are available in npm.
A quick solution is to use firelink.
cd ./packages/functions
yarn add -D #rxdi/firelink
Add an equivalent section to your functions package.json for all shared dependencies.
"fireDependencies": {
"#org/common": "../../packages/common"
},
Change your deploy script to use firelink binary
"scripts": {
"build": "tsc --build tsconfig.build.json",
"predeploy": "yarn build",
"deploy:functions": "firelink deploy --only functions"
}
Just a heads up does not work with "devDependencies", but you should not be needing them in production anyway.
Update your firebase.json to run the predeploy target.
"functions": {
"predeploy": ["npm --prefix \"$RESOURCE_DIR\" run predeploy"],
"source": "packages/functions"
},
Lastly remove any local yarn.lock files in the workspace package. If you wish to lock the dependencies add npm install to your predeploy step. If anyone has a better solution to this let me know. It seem unfortunate that yarn does not have the ability to generate lock files on demand in a workspace.
one potential solution is to use Lerna.
You can then publish your core package to a private GitHub package and use Lerna to create a symlink to the core package for local development.
I got this to work but it was a pain and hacky. So far it's working well though. I'm using NPM Workspaces, but the concept should apply to any project where node modules are hoisted to the root folder. I'm also using GitHub Workflows / Actions for CI and TypeScript, so all of this works within those environments.
Build my dependent packages using TypeScript's tsc
Copy the compiled files into the functions folder (functions/src/domain to be exact) so that they get uploaded by Firebase CLI
cp -r packages/domain firebase/functions/src/domain
Insert local dependency inside functions/package.json. I'm doing it with sed, which GitHub actions supports:
sed -i 's/"dependencies": {/"dependencies": { "#mycompany\/domain": "file:src\/domain",/' package.json
Before that command, my package.json looks like this:
"dependencies": {
"lodash": "^4.17.20",
...
After that command, it looks like this:
"dependencies": { "#mycompany/domain": "file:src/domain",
"lodash": "^4.17.20",
...
Then deploy: firebase deploy --only functions
Not pretty, but it works with full automation. 😁

Error: Functions did not deploy properly

Functions deploy had errors. To continue deploying other features (such as database), run:
firebase deploy --except functions
Error:
Functions did not deploy properly.
Try running deploy with --debug. For example: firebase --debug deploy.
In my case the function looked like this:
exports.test = functions.firestore.document('chats').onCreate((snap, context) => {
...
});
The debug log contained the following error message:
fieldViolations=[field=event_trigger, description=Expected value chats to match regular expression [^/]+/[^/]+(/[^/]+/[^/]+)*]]
And that's when I realized that chats is not a document but a collection. I changed the path to that of the collection and everything worked fine.
EDIT:
To view more logs you can also try:
firebase functions:log
or
firebase functions:log --only <FUNCTION_NAME>
Link to documentation.
I had the same issue with Firestore ,my problem was that the path to the document was bad. I had a slash at the beginning and the end of the path to my document like I used to do with Firebase Realtime Database path.
Hope it helps someone.
Just close whatever IDE you're using and then reopen it. Then on node redeploy your functions. This should resolve the issue.
I got this error as well, I had the problem that a dependency was missing in the package.json file.
By running
firebase --debug deploy it returned an error on the user code.
firebase functions:log gave then the specifics, that a package was not included.
I deleted yarn.lock then error goes away. I think package-lock.json and yarn.lock should not exist together.
Check your json modules dependencies inside functions folder.
There's an specific json package there.
If some module you are including in the project and is not there (in json) you probably will have the error mentioned.
To install just run:
npm install <module> --save
or
yarn add <module> --save
and then run your deploy again:
firebase deploy --only functions
In my case firebase deploy failed with the error "Error: Functions did not deploy properly." and no further explanation. I noticed that no functions could be deployed even the ones I didn't touch.
So I checked for dependencies and I found that a library was not present in the "package.json".
So I execute this command:
cd functions && rm -rf node_modules && rm package-lock.json && npm install && npm install [specific Librairy not in package.json] && firebase deploy
After that the deployment succeeded and the missing dependency appeared in the package.json
Recently Firebase lets you use Functions only if you have the Blaze-Pay as you go plan. So you cannot deploy functions as well, and you will get this same error message without any further clarifications.
Mine was about;
"Function deployment failed because the billing account is not available."
So I had pending payment, after paying, it worked as expected.
I was running into the same generic error message, and ended up running (as mentioned in this question):
firebase --debug deploy --only functions:[functionName]
This revealed the actual issue (my project did not have a default GCP resource location, fix for this described here: Firebase Project Initialization Error: Cloud resource location is not set for this project)
Once I set the GCP resource location, function deployed without issue!
In my case, After a long time of searching, I found the reason to be that I had disabled billing for the project for debugging.
It worked fine now after I enabled it in the Google cloud console.
It's really sad how firebase can't show any useful error message to suggest the problem. I found this after many trials.
I faced a similar problem, but I was using Typescript.
It was basically targeting a non-supported javascript version (ES2020). I changed the tsconfig.json and it deployed normally
"lib": [
"es2019",
"es2020.bigint",
"es2020.string",
"es2020.symbol.wellknown"
],
"module": "commonjs",
"target": "es2019"
After getting the above deploy error, I edited the index.js file and changed the name of the function from "helloWorld" to "heyWorld" and suddenly the firebase deploy command worked.
If anyone gets here trying to deploy ssr functions in angular universal with firebase, it is because firebase is not included in your functions.
1.) cd functions
2.) npm i firebase#latest
3.) npm run deploy
4.) cd ..
5.) now when you run ng deploy it should work correctly... The key here is to add firebase, and deploy with npm run deploy first...
try to add this
"runtime": "nodejs12"
in your firebase,json
example :
"functions": {
"source": ".",
"ignore": [
".firebase/**",
"**/node_modules/**",
"**/public/**",
".firebaserc",
"firebase.json",
"postcss.config.js",
"README.md",
"tailwind.config.js"
],
"runtime": "nodejs12"
}
was with the same error, I ended up solving it by updating package.json
from:
"engines": {
"node": "12"
},
to:
"engines": {
"node": "14"
},
$ in path causes Error: Functions did not deploy properly.
before:
`export const newMessage = functions.firestore.document('chats/${chatId}/messages/${messageId}').onCreate(handleNewMessage())`
after:
`export const newMessage = functions.firestore.document('chats/{chatId}/messages/{messageId}').onCreate(handleNewMessage())`
In my case, the location for the Firestore was not correctly set. From the Functions Documentation:
By default, functions run in the us-central1 region.
In my case, Firestore was set up on a different location. You can find this under Project Settings, at Default GCP resource location.
To fix it, simply make the following change:
// Before
functions.firestore.document("...").onCreate(...)
// After
functions.region("asia-east2").firestore.document("...").onCreate(...)
Follow the steps below:
Deploy with debug enabled:
firebase --debug deploy
You will see the error printed in your console.
In most cases it is something similar to the line below:
npm install before continuing.\nnpm ERR! \nnpm ERR! \nnpm ERR! Invalid: lock file's body-parser#1.19.0 does not satisfy body-parser#~1.0.1\nnpm ERR!
If the error is similar to "lock file's body-parse" in 1) above:
Go to the views directory in your project and edit the dependencies section in your package.json file as below:
Change the body-parser version to the latest version shown in the error printed in 1) above. In my case it was from body-parser#~1.0.1 to body-parser#~1.19.0
Run: npm install
Re-deploy with: firebase deploy
This should work.
If you get a 403 error from your hosting URL after re-deploying, your CLI version could be out of date:
Login to you google cloud account and go your the google cloud console.
Delete your Cloud Functions
Update Firebase CLI using: npm install -g firebase-tools
Re-deploy: firebase deploy
My firebase couldnt find the modules firebase-functions and firebase-admin on deploy because I wrote them in devDependencies instead of just dependencies. But after it ... I still had an issue. But this solved it for me: https://github.com/nuxt/nuxt.js/issues/2714#issuecomment-423048343.
Just notice node 8 as engine object in your function's folder package.json and add the babel snippet in your nuxt config.
I had same problem with Firebase project deployment. Then figure out error and find that some module paths are cause problem. Then i changed the path of that module.
To try redeploying those functions, run:
firebase deploy --only functions:api,functions:createScream
To continue deploying other features (such as database), run:
firebase deploy --except functions
Error: Functions did not deploy properly.
The error shows that could not find modules.
Did you list all required modules in the package.json dependencies?
Detailed stack trace: Error: Cannot find module (../key/your secret key.json) '
Then i changed the path of my secret key that is required for login credentials and put it in different folder. Then run firebase deploy.
That work for me.
I had the same problem. The problem came from the fact that I had an index.js file and package.json file in the root folder and, after running the firebase functions init command, also an index.js and package.json in the functions folder. The dependencies are only listed in the package.json file in the root folder, not in the functions folder. I copied the dependencies to the package.json file in the functions folders and everything worked like a charm.
Deleting the build functions folder worked to me
firebase functions:log
This allowed me to find out the problem in my case: one of the packages was not listed among the dependencies in package.json
This worked for me today: Delete Function and Redeploy.
It happened the same to me but unfortunately I had not any error with --debug.
I then deleted all my deployed functions in the firebase console and
cd functions
rm -rf node_modules
npm install
firebase deploy --only functions
and it worked like magic.
I got the same error
Functions were working in emulator, but couldn't be deployed.
When I deployed functions using debug, I got no more specific info.
Then I found out, that my IDE accidentally imported lib (that I wasn't even using) from parent folder where is my Svelte project located.
Removing that import fixed my error, obviously.
I deleted the recently added 3rd party library (from package/package-lock.json as well). And checked the name of the function to not be a duplicate.
This worked for me.
If u are using SSR you need declare your node version In my case my node version is 14 and firebase was deploying with 10.0 I set this config on angular.json
"functionsNodeVersion": 14
"serve-ssr": {
"builder": "#nguniversal/builders:ssr-dev-server",
"options": {
"browserTarget": "Rioja-web:build",
"serverTarget": "Rioja-web:server"
},
"configurations": {
"production": {
"browserTarget": "Rioja-web:build:production",
"serverTarget": "Rioja-web:server:production"
}
}
},
"prerender": {
"builder": "#nguniversal/builders:prerender",
"options": {
"browserTarget": "Rioja-web:build:production",
"serverTarget": "Rioja-web:server:production",
"routes": [
"/"
]
},
"configurations": {
"production": {}
}
},
"deploy": {
"builder": "#angular/fire:deploy",
"options": {
"ssr": true,
"functionsNodeVersion": 14
}
}
}
I had the same problem.
updating node engine to 16 in package.json solved the issue.
My nodejs local version was 16.
{
...
"engines": {
"node": "16"
},
"main": "lib/index.js",
"dependencies": { ... }
}

Resources