Netlify dev: functions not accessible when starting in dev mode - next.js

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!

Related

Deployed NextJS app's API returns 404 with NextJS version 13

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.

Failed to load plugin '#next/next' when running npm run lint in GitLab CI

Locally I can run npm run lint without issues on Windows. However, on my ubuntu gitlab runner I get followint error:
Failed to load plugin '#next/next' declared in '.eslintrc.json » eslint-config-next/core-web-vitals » /home/gitlab-runner/builds/iPXPkofu/0/isi/micat/front_end/node_modules/eslint-config-next/index.js': Unexpected token '.'
Referenced from: /home/gitlab-runner/builds/iPXPkofu/0/isi/micat/front_end/node_modules/eslint-config-next/index.js
The .eslintrc.json file is auto-generated and only contains:
{
"extends": "next/core-web-vitals"
}
I also tried with "extends": "next".
=> Is this a bug of next.js? If not, what can I do?
My package.json:
{
"name": "micat",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build && next export",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"bootstrap": "5.1.3",
"crossfilter2": "1.5.4",
"d3": "7.5.0",
"dc": "4.2.7",
"exceljs": "^4.3.0",
"next": "12.2.0",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"eslint": "8.18.0",
"eslint-config-next": "12.2.2",
"eslint-plugin-jest": "24.4.0",
"eslint-plugin-jsx-a11y": "6.6.0",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-react-hooks": "4.6.0",
"jest": "28.1.2",
"jest-cli": "27.2.0",
"jest-jasmine2": "27.2.0"
}
}
Accorrding to
https://github.com/vercel/next.js/discussions/38220
its due to different versions of nodejs
I installed nvm and updated nodejs from version 12.22 to to version 18.6.0 then deployed it for the other users (gitlab-runner)
n=$(which node);n=${n%/bin/node}; chmod -R 755 $n/bin/*; cp -r $n/{bin,lib,share} /usr/local
Also see
https://tecadmin.net/how-to-install-nvm-on-ubuntu-20-04/
https://dzone.com/articles/making-nodejs-available-to-all-users-with-nvm
I removed the node_modules folder with rm -r node_modules an reinstalled with npm install
=> npm run lint works now

error - ESLint must be installed: yarn add --dev eslint

I just created a new project using
npx create-next-app#latest --ts
And when I run
npm run lint
I got the error:
next lint
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
error - ESLint must be installed: yarn add --dev eslint
But eslint already installed!
What could be?
Steps to reproduce:
npx create-next-app#latest --ts
cd app
npm install
npm run lint
My package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"lint:css": "stylelint '**/*.{css,tsx}'",
"format": "prettier '**/*' --write --ignore-unknown",
"prepare": "husky install"
},
"dependencies": {
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"#stylelint/postcss-css-in-js": "^0.37.2",
"#types/react": "17.0.31",
"eslint": "^8.0.1",
"eslint-config-next": "11.1.2",
"husky": "^7.0.4",
"postcss-syntax": "^0.36.2",
"prettier": "^2.4.1",
"pretty-quick": "^3.1.1",
"stylelint": "^14.0.0",
"stylelint-config-standard": "^23.0.0",
"stylelint-config-styled-components": "^0.1.1",
"typescript": "4.4.4"
}
}
This issue is related to eslint 8.0.1. Downgrade to 7.32.0.
You'll find more info in this open bug: https://github.com/vercel/next.js/issues/29961#issuecomment-945823476
This was a known issue and has been fixed now.
You can upgrade nextjs v12. source
If you still get the issue, try looking for the .eslintrc file to see if it already exists. If it does, delete it and re-run npm run lint. Doing so fixed my problem.

Error when trying to deploy NextJS app on Vercel

I've been trying to deploy my NextJS onto Vercel, but keep getting the following error:
19:07:34.256
> Build error occurred
19:07:34.257
Error: Failed to load config "next/babel" to extend from.
19:07:34.258
Referenced from: /vercel/path0/.eslintrc
19:07:34.258
type: 'Error',
19:07:34.258
messageTemplate: 'extend-config-missing',
19:07:34.258
messageData: { configName: 'next/babel', importerName: '/vercel/path0/.eslintrc' }
19:07:34.258
}
19:07:34.277
Error: Command "npm run build" exited with 1
Below is my .babelrc file:
{
"presets": ["next/babel"],
"plugins": []
}
My .eslintrc file:
{
"extends": ["next/babel"]
}
And my package-json file:
{
"name": "google-docs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#material-tailwind/react": "0.3.4",
"#next-auth/firebase-adapter": "^0.1.2",
"draft-js": "^0.11.7",
"firebase": "^8.9.1",
"next": "11.0.1",
"next-auth": "^3.27.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "^1.14.7",
"react-firebase-hooks": "^3.0.4"
},
"devDependencies": {
"autoprefixer": "^10.3.1",
"eslint": "7.32.0",
"eslint-config-next": "11.0.1",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.7"
}
}
Also, building the project locally is also not working because of the same error. How do I solve this issue? Thank you in advance.
For those who are wondering, the solution that I used is first to remove the "next/babel" from the extends array, as julio has suggested.
Then, I install babel-eslint:
npm i babel-eslint --save-dev
I then changed the entire .eslintrc file to this:
{
"parser": "babel-eslint"
}
And the build was successful! Credit goes julio and the answers from this thread:
Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint)

Unable to resolve module fs when running expo start

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.

Resources