Is there anyone else who faced the issues just like me? I try to make a GET request to my API endpoint it keeps on returning 404 when the application is deployed on Vercel - it works perfectly fine on locally.
Even it is a simple api that are provided by the Next.JS by default.
default api location: pages/api/hello
export default async function handler(req, res) {
res.status(200).json({
name: 'John Doe',
})
}
My package.json
{
"name": "my-next-js-sample"
"version": "0.1.1",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"axios": "^1.1.3",
"cheerio": "^1.0.0-rc.12",
"dayjs": "^1.11.6",
"firebase": "^9.13.0",
"next": "13.0.0",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"eslint": "8.26.0",
"eslint-config-next": "13.0.0"
}
}
This is how I'd structured my folders.
This is how'd called the api routes.
http://localhost:3000/api/hello
http://localhost:3000/api/v2/live
Perfectly can call any api routes just like this example in local development.
Vercel Project Settings
After I'd created a new vercel account and deployed this project into that new one, then the problem has solved without knowing the actual issues.
For anyone crossing with this problem, this issue might be your guy
In a nutshell: Standalone configuration is not yet supported.
Related
I am refactoring an application from Nuxt2 to Nuxt3 and I use PanZoom for panning and zooming a specific div.
My package.json looks like below
{ "private": true, "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" }, "devDependencies": { "nuxt": "^3.0.0" }, "dependencies": { "vue-panzoom": "^1.1.6" } }
as proposed, I use the plugin folder to declare my panzoom plugin like
import panZoom from 'vue-panzoom' export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(panZoom) })
I do not declare the plugin in the nuxt.config.ts file as Nuxt 3 auto-configures plugins.
then I try to test the installation with a snippet like
<panZoom> <img src="https://picsum.photos/300"> </panZoom>
This does not work. The console.log shows
Cannot create panzoom for the current type of dom element
this shows that Nuxt foundn the panzoom plugin, but cannot use it for a reason unknown to me.
Can anybody help me on this.
Thanks i advance
see details of problem
im trying to create a website using NextJS, prisma and netlify functions and deploy it to netlify.
The Website and nextJS framework work quite well while debugging using netlify dev.
The functions dont work. Trying to get a response from the functions ends in this error:
NestedError: Cannot read from `D:/Eigene Dateien/Github/beatraum/node_modules/.prisma`: EISDIR: illegal operation on a directory, read
at Module.createReadStream (file:///C:/Users/s.blaser/AppData/Roaming/npm/node_modules/netlify-cli/node_modules/cp-file/fs.js:21:9)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at copyFileAsync (file:///C:/Users/s.blaser/AppData/Roaming/npm/node_modules/netlify-cli/node_modules/cp-file/index.js:11:21)
at file:///C:/Users/s.blaser/AppData/Roaming/npm/node_modules/netlify-cli/node_modules/#netlify/zip-it-and-ship-it/node_modules/p-map/index.js:141:20
Caused By: Error: EISDIR: illegal operation on a directory, read {
nested: [Error: EISDIR: illegal operation on a directory, read] {
errno: -4068,
code: 'EISDIR',
syscall: 'read'
},
errno: -4068,
code: 'EISDIR',
syscall: 'read',
name: 'CopyFileError'
}
Node.js v18.12.1
It doesnt matter whether I start with netlify dev or netlify functions:serve - both ends in the same error.
I deployed the application and the functions work :o
So only the local environment seems to be broken.
I think it has something to do with the prisma dependency, but im quite unsure.
This is my netlify.toml:
# example netlify.toml
[build]
command = "npm run build"
functions = "netlify/functions"
publish = ".next"
[[plugins]]
package = "#netlify/plugin-nextjs"
## Uncomment to use this redirect for Single Page Applications like create-react-app.
## Not needed for static site generators.
#[[redirects]]
# from = "/*"
# to = "/index.html"
# status = 200
## (optional) Settings for Netlify Dev
## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
[dev]
framework = "next"
command = "next dev -p 8080" # Command to start your dev server
targetPort = 8080 # Port that the dev server will be listening on
# publish = "dist" # Folder with the static content for _redirect file
## more info on configuring this file: https://docs.netlify.com/configure-builds/file-based-configuration/
This is my package.json:
{
"name": "beatraum",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"export": "next export",
"debug": "netlify dev --inspect"
},
"dependencies": {
"#hapi/iron": "^7.0.0",
"#netlify/functions": "^1.4.0",
"#next/font": "13.1.6",
"#prisma/client": "^4.9.0",
"#types/node": "18.11.18",
"#types/react": "18.0.27",
"#types/react-dom": "18.0.10",
"cookie": "^0.5.0",
"eslint": "8.33.0",
"eslint-config-next": "13.1.6",
"netlify-dev-plugin": "^1.0.28",
"next": "13.1.6",
"passport": "^0.6.0",
"passport-local": "^1.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-netlify-forms": "^1.3.3",
"swr": "^2.0.3",
"typescript": "4.9.5",
"uuid": "^9.0.0"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"netlify-cli": "^12.10.0",
"postcss": "^8.4.21",
"prisma": "^4.9.0",
"tailwindcss": "^3.2.4"
}
}
I asked the same question in the netlify forum but didn't receive any answers.
https://answers.netlify.com/t/netlify-dev-functions-cannot-be-called-in-dev-mode-with-prisma-eisdir/85068
Thank you for your help in advance!
I have a developed a sample application in nextjs and deployed this sample application using npm run build command.
I am following this (https://nextjs.org/docs/advanced-features/custom-server) article for a custom server deployment.
I have created a server.js file for custom server at the root level of build directory.
and modified the following in package.json:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}
and next.config.js
module.exports = {
reactStrictMode: true,
};
const path = require("path");
module.exports = {
distDir: "build",
sassOptions: {
includePaths: [path.join(__dirname, "styles")],
},
env: {
DOM: process.env.DOM,
SERDOM: process.env.SERDOM,
PAPI: process.env.PAPI,
UAPI: process.env.UAPI,
PAEXIST: process.env.PAEXIST,
USEREXIST: process.env.USEREXIST
},
};
Now after that , I am a bit confused. Should I give the path of server.js using pm2 ?
server.js is using port 3000 and nextjs frontend app is using 3001.
Initially my deployment was not working and throwing 404 error but now it is working but here is some issue in it.
When I run the npm run build command to generate a new build/release and try to deploy again then my nextjs deployed app is not displaying the new changes.
Why ?
Does it get from somewhere else or from cached objects ?
How can I enable/display the updated deployment to my end user ?
Moreover, what is the best way to deploy nextjs app first time and after then latest deployment ?
================================package.json================================
{
"name": "New demo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"bootstrap": "^5.0.2",
"next": "11.0.1",
"node-sass": "^4.14.1",
"react": "17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "17.0.2",
"react-icons": "^4.2.0"
},
"devDependencies": {
"eslint": "7.29.0",
"eslint-config-next": "11.0.1"
},
"proxy": "http://localhost:3008"
}
Try like this
"scripts": {
"web:local": "env-cmd -f environments/.env.local node server.js",
"dev": "next dev",
"build": "next build",
"start": "next start"
},
where environments/.env.local is your local settins and some private info (you need to create environments folder and .env.local file). Server.js is your file, code example below
const { createServer } = require('https');
const { parse } = require('url');
const next = require('next');
const fs = require('fs');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
// these are keys to run your localhost with https protocol, you can // if you dont need it
const httpsOptions = {
key: fs.readFileSync('./environments/key.pem'),
cert: fs.readFileSync('./environments/cert.pem')
};
app.prepare().then(() => {
createServer(httpsOptions, (req, res) => {
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
}).listen(3000, err => {
if (err) throw err;
console.log('> Ready on https://localhost:3000');
});
});
Then you run your application with npm run web:local
Why ?
Because you did a build, it's not dynamically updated
Does it get from somewhere else or from cached objects ?
No, its a "built" of your project
Moreover, what is the best way to deploy nextjs app first time and after then latest deployment ?
You upload your code to git, you link git to Vercel. In vercel you need to also add environment variables. Don't forget also, you need to.gitignore /environments folder!
Can't for the life of me figure out why my app suddenly won't start. I keep getting this error:
Unable to resolve module fs from
node_modules\firebase-admin\lib\firebase-namespace.js: fs could not
be found within the project.
If you are sure the module exists, try these steps:
Clear watchman watches: watchman watch-del-all
Delete node_modules and run yarn install
Reset Metro's cache: yarn start --reset-cache
Remove the cache: rm -rf /tmp/metro-*
whenever I run expo start in the root folder. I've even tried expo start -c to reset the cache.
I've also tried removing node_modules and npm installing it back for both the {myapp}/functions/node_modules and {myapp}/node_modules.
I've tried updating firebase-admin and all dependencies.
It's weird because my app was working a couple days ago and this came out of the blue. I've never had to install fs before.
Anyone got any idea what's going on here? It feels like a simple environment fix, but I'm not sure.
My app dependencies if it helps:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest"
},
"dependencies": {
"#react-native-async-storage/async-storage": "^1.13.0",
"#react-native-community/masked-view": "0.1.10",
"algoliasearch": "^4.8.3",
"axios": "^0.21.1",
"buffer": "^6.0.3",
"expo": "^41.0.0",
"expo-font": "~9.1.0",
"expo-image-picker": "~10.1.4",
"expo-linear-gradient": "~9.1.0",
"expo-notifications": "~0.11.6",
"expo-status-bar": "~1.0.4",
"expo-web-browser": "~9.1.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"react-native-elements": "^3.0.0-alpha.1",
"react-native-gesture-handler": "~1.10.2",
"react-native-keyboard-aware-scroll-view": "^0.9.3",
"react-native-linear-gradient": "^2.5.6",
"react-native-paper": "^4.7.0",
"react-native-reanimated": "^1.13.3",
"react-native-screens": "^2.10.1",
"react-native-snap-carousel": "^3.9.1",
"react-native-svg": "12.1.0",
"react-native-svg-transformer": "^0.14.3",
"react-native-vector-icons": "^7.1.0",
"react-navigation": "^4.4.3",
"react-navigation-drawer": "^2.6.0",
"react-navigation-header-buttons": "^6.3.1",
"react-navigation-stack": "^2.9.0",
"react-navigation-tabs": "^2.10.1",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"firebase": "8.2.3",
"jest": "^26.6.3",
"jest-expo": "^41.0.0",
"react-test-renderer": "^17.0.2"
},
"private": true,
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"./node_modules/(?!(react-navigation-header-buttons|react-native|react-native-gesture-handler|#expo)|expo-font|#unimodules|expo-asset|expo-constants|expo-file-system|expo-web-browser|react-navigation|react-navigation-stack|unimodules-permissions-interface|expo-permissions|expo-image-picker|expo-linear-gradient/)"
],
"setupFiles": [
"./node_modules/react-native-gesture-handler/jestSetup.js"
],
"verbose": true,
"updateSnapshot": true
}
}
and .babelrc:
{
"presets": [
"babel-preset-expo"
]
}
and firebase functions dependencies:
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"serve": "firebase emulators:start --only functions",
"shell": "firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "12"
},
"main": "index.js",
"dependencies": {
"algoliasearch": "^4.8.3",
"axios": "^0.21.0",
"cloudinary": "^1.23.0",
"crypto": "^1.0.1",
"events": "^3.3.0",
"express": "^4.17.1",
"firebase": "^8.7.0",
"firebase-admin": "^9.10.0",
"firebase-functions": "^3.14.1"
},
"devDependencies": {
"firebase-functions-test": "^0.2.0"
},
"private": true
}
firebase-admin is then intialized in my {myapp}/functions/index.js as:
const admin = require("firebase-admin");
admin.initializeApp();
and then used as (for example):
// Called for toggling Tutorial Prompt on ProfileScreen
exports.setTutorialPrompt = functions.https.onRequest(async (req, res) => {
res.set("Access-Control-Allow-Origin", "*");
if (req.method === "OPTIONS") {
// Send response to OPTIONS requests
res.set("Access-Control-Allow-Methods", "GET, POST");
res.set("Access-Control-Allow-Headers", "Content-Type");
res.set("Access-Control-Max-Age", "3600");
res.status(201).send("CORS preflight options set!");
} else {
const db = admin.firestore(); // <--------------------------- here
const { exampleId, ExampletwoId, value, screen } = req.body;
const updatedProfile = {
tutorialPrompt: value,
};
const index = await client.initIndex(ALGOLIA_INDEX_NAME);
index
.partialUpdateObject({
objectID: ExhibitUId,
tutorialPrompt: value,
})
.wait();
db.collection("users").doc(localId).update(updatedProfile);
res.status(201).send(`Successfully toggled tutorialing prompt`);
}
});
I managed to fix it.
It was a random import error within the root app folder. Somehow one of my imports got mixed up, and was trying to call a cloud function instead of a redux-action function.
The wrong import:
import { setTutorialPrompt } from "../../functions/index.js";
The correct import:
import { setTutorialPrompt } from "../../store/actions/user";
Since it was trying to import my functions folder, it gave me the fs error. Similar to what #brentvatne was talking about.
If anyone else runs into this error, I recommend moving your cloud functions folder to your desktop or something, and try running your app without it. That's how I found the right error code.
I found this because I ran into pretty much exactly this same issue.
I discovered that there are (weirdly) two ways you can import firebase-admin into react native projects. I was doing import { firestore } from "firebase-admin" and I needed to be doing import firestore from '#react-native-firebase/firestore'
A pretty easy-to-miss difference, so I thought I’d leave a comment here in case anyone else has this issue.
I'm looking to get Chakra UI set up (latest V1) with a simple Next.js app. Having followed the 'getting started' steps at https://chakra-ui.com/docs/getting-started I'm running into the following error when running dev server:
error - ./node_modules/#chakra-ui/portal/dist/esm/portal.js
Attempted import error: 'useCallbackRef' is not exported from '#chakra-ui/hooks'.
Here's my _app.js file:
import { ChakraProvider } from "#chakra-ui/react";
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp
package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#chakra-ui/react": "^1.1.3",
"#emotion/react": "^11.1.4",
"#emotion/styled": "^11.0.0",
"framer-motion": "^3.2.0",
"next": "10.0.5",
"react": "17.0.1",
"react-dom": "17.0.1"
}
}
I've had a rummage through the prescribed portal.js node module, but there doesn't look to be anything untoward.
Any help would be greatly appreciated, thanks for your time in advance.
Set version to #chakra-ui/react": "1.1.2",
It's a bug and they are working on a fix: https://github.com/chakra-ui/chakra-ui/issues/3006
For now just revert to a lower version until the fix is through.
Same problem here, get a older chakra-ui version.
For example: "#chakra-ui/react": "1.0.4"