My nextjs app was working properly I added some files to update my code now it is not deploying my app on vercel. gives this error
I tried googling the error but my case in unique.
This is the git repo
https://github.com/usman-174/google-calendar-frontend
These are my script tags from package.json
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"export": "next export",
"lint": "next lint",
"lint-fix": "next lint --fix"
},
next.config.js
module.exports = {
distDir: 'build',
}
I also ran into this error because the root directory of my app was not in the top-level directory of my Git repository, so Vercel was unable to find the .next folder.
I fixed it by going to the Vercel dashboard for my Vercel project, then -> Settings -> General and setting Root Directory to the subdirectory path to my application:
Issue was we were using 'latest' in package.json for next version. I fixed it to previous version of nextjs which is 12.3.1 for us seems to have fixed the deployment for now.
But still waiting for vercel support for best way to update nextjs version in deployment for vercel or is it some sort of bug their end.
Run npm run build (check all files in builded folder)
Create .next folder and move all files from build folder to .next
Commit your .next folder to vercel or maybe git.
In my case, make sure please if the folder within the project is called "web", the json name inside should be "web"!
In my case I had a few errors in my files
Error: `'` can be escaped with `'`, `‘`, `'`, `’`. react/no-unescaped-entities
Which were being hidden in the Vercel build log because I forgot I had the following in next.config.js
eslint: {
ignoreDuringBuilds: true,
}
Which just showed me the error you have instead of the actual reason it failed.
Enabling eslint indirectly solved my issue as it led me to find the real error.
Overriding the build folder fixed my issue.
Related
Inside svelte.config.js I was using this
const dev = process.env.NODE_ENV === 'development';
to conditionally set a base path which was working fine in projects with #sveltejs/kit#1.0.0-next.350 and *.357
After installing now the most recent SvelteKit version #sveltejs/kit#1.0.0-next.386 it only results to undefined
Differences I notice is that the new project lists "vite": "^3.0.0" as devDependency and the script changed from "dev": "svelte-kit dev", to "dev": "vite dev"
Update: It's also the case for a project with #sveltejs/kit#1.0.0-next.366, vite#2.9.14, "dev": "vite dev" - so the switch was before vite 3.0
Going through the vite docs I find import.meta.env, but that's also undefined inside svelte.config.js
Switching from Node v16 to 17 didn't make a difference as well
What changed and how can I now distinguish between dev and build mode?
The behavior you describe was introduced in 100-next384
[breaking] remove mode, prod and server from $app/env (#5602)
and here is the relevant discussion
respect --mode, and remove server, prod and mode from $app/env
I think you should use Vite capabilities to configure dev VS production/build modes.
Update
Considering better your case, a way to solve the issue is to set a value for the NODE_DEV environment variable, like (Linux/Mac):
export NODE_ENV=development && npm run dev
There are other ways to do this but at least for development it should do the trick.
This might help someone in the future. I encountered this error when I created an express server in a react application. I created the server directory in the root folder of the react application and I was running both react app and express server at the same time.
All of a sudden, when creating a react production build, I get this error.
> safe-courier#0.1.0 build
> react-scripts build
Creating an optimized production build...
Failed to compile.
Module not found: Error: Can't resolve 'fs' in '/workspace/safe-courier/client/node_modules/dotenv/lib'
I have searched on the web, found similar cases but different frameworks of which all were not of help in regards to this issue.
I have tried to uninstall dotenv and reinstall it again but i get the same error. I'm not sure what could be the problem understanding that fs module is part of nodejs and comes bundled with it
To solve this:
Create the .env file at the root level of you app
Name your variables beginning with REACT_APP_ // that's the key !!
Restart your server with npm start each time you change an env variable
Use your variable with process.env.NAMEOFYOURVARIABLE
No need of dotenv for your React app.
I solved the same problem;
npm install dotenv-webpack --save-dev
Create .env file under root folder
create env variable as
REACT_APP_YOURVARIABLE=itsvalue
Create webpack.config.js file under the root folder with following content
const Dotenv = require('dotenv-webpack');
module.exports = {
plugins: [
new Dotenv()
]
}
Then wherever you want to use variable in .env write
process.env.REACT_APP_YOURVARIABLE
There is no need to import dotenv. It is already done in webpack.config.js
1- As already mentioned by Stéphane Sulikowski, No need to use dot-env in react projects
Why?
"dot-env" uses some modules that are only supported by nodejs but not supported by "browser engines" like fs, os etc. React-code-bundle runs in the browser and the browser doesn't support module "fs", so if any modules reference the "fs" module will get the same error.
There is some inbuilt support by reactjs to use environment variables stored in a .env file and begins with REACT_APP_
2- If you have to use it for some reason use "env-cmd"
npm install env-cmd
3- create environment specific .env files like .env.local OR .env
4- In your "environment specific" OR .env file, add variables beginning with REACT_APP_
REACT_APP_API_BASE_URL="http://localhost:4000"
5- Use these environment variables in your code files
like console.warn (process.env.REACT_APP_API_BASE_URL)
6- OPTIONALLY...... configure package.json something like this
...
"scripts": {
"start": "env-cmd -f .env.local react-scripts start",
"build:staging": "env-cmd -f .env.staging react-scripts build",
"build:production": "env-cmd -f .env.production react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Note - When you add a new variable in .env .... files, you have to run npm start OR related...
Just like Reno mentioned just create your .env at the root with the name prepended with REACT_APP and it will work out of the box
Example .env file
REACT_APP_GITHUB_API_URL=https://api.github.com/graphql
Usage:
process.env.REACT_APP_GITHUB_API_URL
If you are using create-react-app this article describes the behavior of environment variables: https://create-react-app.dev/docs/adding-custom-environment-variables/
Note that the document frequently reminds you of this warning:
WARNING: Do not store any secrets (such as private API keys) in your React app!
Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
To securely use secrets such as passwords and tokens, consider setting up a server that can deliver this data to the frontend via HTTP. For example, once users authenticate into your app you send their credentials to a microservice that can validate their identity and return an API key or session to be used for subsequent REST API calls.
I am currently facing an issue where my Discord Node.js bot is not starting on Heroku for some reason, despite doing everything that I could possibly find on this forum, the official documentation, youtube videos, anything.
If I run the index.js file on my computer, the bot successfully logs in, and commands I have added so far work perfectly fine. But of course I want to offload this payload to a server, that is Heroku.
My project is on a private repository on GitHub, with which I have already set up auto deploy on the Heroku dashboard (main branch).
My folder structure:
node_modules/
src/
Commands/
Data/
Events/
Structures/
index.js
.gitignore
package-lock.json
package.json
Procfile
README.md
The content of my Procfile is this (without quotes): "worker: node src/index.js"
In package.json, relevant parts are:
"main": "src/index.js",
"scripts": {
"start": "node src/index.js"
},
"engines": {
"node": "16.x",
"npm": "8.x"
},
"repository": {
"type": "git",
"url": "git+https://github.com/******/******.git"
},
"private": true
Environmental variables are also set up on the Heroku Dashboard, and it is on the gitignore list, and found at src/Data/config.json file.
I have checked the Heroku logs, and it's literally empty. It didn't even try to start yet, and on the Resources tab of the dashboard, it says "This app has no process types yet. Add a Procfile to to your app in order to define it's process types."
However, I totally have a Procfile in the folder, and on GitHub as well.
I also added the Node.js Buildpack to my app on the Heroku Dashboard.
Guys, what am I missing here? How could I finally get Heroku to launch my Node.js?
I'm gonna close this help request by a quote from one of my favorite games (We Were Here Together): "Please somebody help!" :)
Okay, figured it out. For someone in the future that runs into the same issue:
Solution was to disconnect, then reconnect the GitHub repository on the Heroku Dashboard.
Users must have a Procfile described in the question, where the js file points to the index file, with directory relative reference.
package.json must contain the start script. Version number declaration is not mandatory.
I am very new to server side scripting. And I am using NodeJS. My Problem is that after adding some new features to the app, i.e. after changing the code, these changes will be applied only after restarting the server. Till then NodeJS behaves so as though I hadn't changed anything. So for instance if I add console.log("works") and don't restart the server, then it hasn't any effect.
I am using Nuxt.js, which is actually the Vue.js framework but with additional and very usefull features mainly for server side rendering. I didn't integrate the express.js at the beginning of the project, beacause it wasn't planned to write any server side code. So I am normally exporting express and using it, which is pretty fine for me, since I need just a couple lines of code to use the NodeJS file system.
So, as it is pretty hard to code, if I should restart the server once I changed anything, I want to ask you if there is any solution to this problem.
Use nodemon
step 1 : npm install -g nodemon <- this will install nodemon globaly in your system
step 2 : change your start script within package.json
"scripts": {
"start": "nodemon fileName" <- like this //filename is you root file which starts the app like app.js
}
step 3 : npm start
This is already build in into nuxt. You just need to run it in dev mode, not in production.
E.g. for dev with change monitoring
nuxt
For production without monitoring
nuxt start
So in this particular case the following changes to the "scripts" in package.json have solved my problem.
"scripts": {
"dev": "nodemon --watch api --exec \"nuxt\"",
"start": "nodemon nuxt",
}
The following link could also be usefull to you.
Install nodemmon in your application to allow live update npm -g install nodemon
and add the following codes inside your packages json file :
"main": "app.js",
"scripts": {
"start": "node app"
},
on your command line, just type : start
For example, if your package.json file contains:
"scripts": {
"start": "make start",
"test": "make test",
}
^ Will nodejitsu be able to parse and implement "make start"?
If the server.js file contains the static file path of the following directory then only the makefile functionality will work.
Nodejitsu should parse this just fine. Just be sure that you are calling node <app file>.js in your Makefile somewhere, or you change it to make start && node <app file.js>. Nodejitsu uses npm start to start your application, so the Makefile exiting without starting the app would cause the deployment to fail.