I want to deploy my sveltikit App on Firebase but unable to run build command successfully getting error:
[vite-plugin-sveltekit-setup] ENOTEMPTY: directory not empty, rmdir '\?\C:\Users\User\my-CV.svelte-kit\output\server\chunks'
error during build:
your textpackage.json
{
"name": "my-cv",
"version": "0.0.1",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
},
"devDependencies": {
"#fontsource/fira-mono": "^4.5.10",
"#neoconfetti/svelte": "^1.0.0",
"#sveltejs/adapter-auto": "^1.0.1",
"#sveltejs/adapter-node": "^1.0.0-next.106",
"#sveltejs/adapter-static": "^1.0.5",
"#sveltejs/kit": "^1.0.0",
"#tsconfig/svelte": "^3.0.0",
"#types/cookie": "^0.5.1",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.20",
"svelte": "^3.54.0",
"svelte-adapter-firebase": "^0.14.4",
"svelte-check": "^2.10.3",
"svelte-preprocess": "^5.0.0",
"tailwindcss": "^3.2.4",
"typescript": "^4.9.4",
"vite": "^4.0.0"
},
"type": "module",
"dependencies": {
"#rodneylab/svelte-social-icons": "^0.0.24",
"firebase-tools": "^11.21.0"
}
}
Related
I am a beginner in Next.js. In Next.js and Preact based application, after downloading "node_modules" with "npm install --legacy-peer-deps" and running the project with "npm run dev", I am getting errors that I will add below. On the Homepage, I see the text "Internal Server Error".
I tried many versions of "Node.js" with "nvm" as a solution. When I worked on LTS and latest version the project never worked. When I run it on 16.x.x and below, the project works but errors occur.
I couldn't find the cause and solution for this. I hope someone knows the solution.
Errors:
Error: Hook can only be invoked from render methods.
at Object.n.options.__h (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\preact\debug\dist\debug.js:1:6026)
at l (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\preact\hooks\dist\hooks.js:1:175)
at Object.m (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\preact\hooks\dist\hooks.js:1:335)
at ReactDevOverlay (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\#next\react-dev-overlay\lib\internal\ReactDevOverlay.js:87:27)
at ReactDevOverlay (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\next\dist\server\dev\next-dev-server.js:71:12) at renderWithHooks (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5662:16)
at renderIndeterminateComponent (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5735:15)
at renderElement (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5950:7)
at renderNodeDestructiveImpl (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6080:14)
TypeError: Cannot read property 'context' of undefined
at Object.exports.useContext (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\preact\hooks\dist\hooks.js:1:2697)
at useRouter (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\next\dist\client\router.js:123:27)
at MyApp (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\.next\server\pages\_app.js:91:72)
at renderWithHooks (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5662:16)
at renderIndeterminateComponent (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5735:15)
at renderElement (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5950:7)
at renderNodeDestructiveImpl (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6080:14)
at renderIndeterminateComponent (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5789:7)
at renderElement (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5950:7)
package.json
{
"name": "neom-hotel-nextjs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"export": "next build && next export",
"export-s3": "next build && next export '/*'",
"deploy": "next build && next export && firebase deploy",
"openid": "next build && next export && firebase hosting:channel:deploy openid",
"image": "next build && next export && firebase hosting:channel:deploy image",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#fontsource/outfit": "^4.5.8",
"#steveeeie/react-page-transition": "^1.3.0",
"cupertino-pane": "^1.3.0",
"framer-motion": "^6.4.2",
"framework7-react": "^6.3.17",
"framework7": "^6.3.17",
"framework7-icons": "^4.0.2",
"imagemin-gifsicle": "^7.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"mapbox-gl": "^2.9.1",
"next": "^11.1.4",
"next-compose-plugins": "^2.2.1",
"next-optimized-images": "^2.6.2",
"next-plugin-preact": "^3.0.7",
"preact": "^10.8.2",
"preact-render-to-string": "^5.2.0",
"react": "npm:#preact/compat",
"react-bottom-sheet": "^1.1.1",
"react-dom": "npm:#preact/compat",
"react-modal-sheet": "^1.5.2",
"react-scroll-hooks": "^0.1.1",
"react-ssr-prepass": "npm:preact-ssr-prepass",
"react-transition-group": "^4.4.2",
"responsive-loader": "^3.0.4",
"sharp": "latest",
"styled-components": "^5.3.5",
"url-loader": "^4.1.1",
"webp-loader": "^0.6.0"
},
"devDependencies": {
"#zeit/next-css": "^1.0.1",
"eslint": "8.18.0",
"eslint-config-next": "12.2.0",
"next-purgecss": "^4.0.0"
}
}
package-lock.json
{
"name": "neom-hotel-nextjs",
"version": "0.1.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "neom-hotel-nextjs",
"version": "0.1.0",
"dependencies": {
"#fontsource/outfit": "^4.5.8",
"#steveeeie/react-page-transition": "^1.3.0",
"cupertino-pane": "^1.3.0",
"framer-motion": "^6.4.2",
"framework7": "^6.3.17",
"framework7-icons": "^4.0.2",
"framework7-react": "^6.3.17",
"imagemin-gifsicle": "^7.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"mapbox-gl": "^2.9.1",
"next": "^11.1.4",
"next-compose-plugins": "^2.2.1",
"next-optimized-images": "^2.6.2",
"next-plugin-preact": "^3.0.7",
"preact": "^10.8.2",
"preact-render-to-string": "^5.2.0",
"react": "npm:#preact/compat",
"react-bottom-sheet": "^1.1.1",
"react-dom": "npm:#preact/compat",
"react-modal-sheet": "^1.5.2",
"react-scroll-hooks": "^0.1.1",
"react-ssr-prepass": "npm:preact-ssr-prepass",
"react-transition-group": "^4.4.2",
"responsive-loader": "^3.0.4",
"sharp": "latest",
"styled-components": "^5.3.5",
"url-loader": "^4.1.1",
"webp-loader": "^0.6.0"
},
"devDependencies": {
"#zeit/next-css": "^1.0.1",
"eslint": "8.18.0",
"eslint-config-next": "12.2.0",
"next-purgecss": "^4.0.0"
}
},
I am trying to import use Router from next-router, but I am obtaining this error: Module not found: Can't resolve 'next-router'
I have installed last version of next 13.0.6
package.json:
{
"name": "frontend",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "cross-env NODE_OPTIONS='--inspect' next dev -p 8080",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#apollo/client": "^3.7.1",
"cross-env": "^7.0.3",
"dompurify": "^2.4.1",
"eslint": "8.28.0",
"eslint-config-next": "13.0.6",
"graphql": "^16.6.0",
"lodash": "^4.17.21",
"next": "^13.0.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.7.1",
"react-scripts": "^2.1.3",
"sass": "^1.56.1"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.19",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^15.0.1",
"postcss-preset-env": "^7.8.3",
"precss": "^2.0.0",
"tailwindcss": "^3.2.4"
}
You should import useRouter from "next/router" not from "next-router".
import { useRouter } from "next/router";
I am trying deploy firebase function with Stripe but that complain on some manifest.
If you have at least idea in what file that should be, please also suggest.
In advance, thanks!
Maksym
Here is error code:
Error: Failed to load function definition from source: Failed to generate manifest from function source: Error: Cannot find module 'stripe'
Require stack:
- /learning-react/functions/src/index.js
- /learning-react/functions/node_modules/firebase-functions/lib/runtime/loader.js
- /learning-react/functions/node_modules/firebase-functions/lib/bin/firebase-functions.js
package.json in functions directory:
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"lint": "eslint",
"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": "16"
},
"main": "src/index.js",
"dependencies": {
"#sendgrid/mail": "^7.7.0",
"#stripe/react-stripe-js": "^1.13.0",
"#stripe/stripe-js": "^1.42.0",
"cors": "^2.8.5",
"firebase-admin": "^11.0.1",
"firebase-functions": "^4.0.1"
},
"devDependencies": {
"eslint": "^8.9.0",
"eslint-config-google": "^0.14.0",
"firebase-functions-test": "^0.2.0"
},
"private": true
}
package.json in learn-react directory, I am not sure if I need two json files.
{
"name": "learning-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emailjs/browser": "^3.6.2",
"#emotion/react": "^11.10.0",
"#emotion/styled": "^11.10.0",
"#fortawesome/fontawesome-free": "^6.1.1",
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-regular-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-fontawesome": "^0.1.18",
"#mui/icons-material": "^5.8.4",
"#mui/material": "^5.10.0",
"#sendgrid/mail": "^7.7.0",
"#stripe/react-stripe-js": "^1.13.0",
"#stripe/stripe-js": "^1.42.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^29.0.0",
"#types/node": "^18.7.14",
"#types/react": "^18.0.17",
"#types/react-dom": "^18.0.6",
"axios": "^0.27.2",
"dayjs": "^1.11.3",
"firebase": "^9.9.3",
"firebase-admin": "^11.2.0",
"firebase-functions": "^4.0.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-easy-crop": "^4.4.2",
"react-image-crop": "^10.0.6",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-spring": "^9.4.5",
"style-components": "^0.1.0",
"typescript": "^4.8.2",
"uid": "^2.0.0",
"web-vitals": "^2.1.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"css-loader": "^6.7.1",
"file-loader": "^6.2.0",
"tailwindcss": "^3.1.2",
"ts-loader": "^9.3.1",
"url-loader": "^4.1.1"
}
}
If some more information demands, please tell me.
Based on the updated packages JSON, it looks like you're missing the stripe package for stripe-node: https://github.com/stripe/stripe-node#installation
You've included the Stripe.js module helper and React package, which are for client-side pieces of your integration. For server-side secret requests you need stripe-node.
I am trying to deploy a site built with next js ( and with tailwindcss) to vercel.But I keep getting this '' Invalid PostCSS Plugin" error".
Error shown in the vercel log
Works completely fine locally.
I'm trying to deploy the site by importing from github.
My postcss.config.js
module.exports = {
plugins: ['postcss-import', 'tailwindcss', 'autoprefixer']
}
My package.json
{
"name": "community-site",
"version": "1.0.0",
"description": "website for Education and Sports Club",
"main": "index.js",
"dependencies": {
"autoprefixer": "^9.8.4",
"axios": "^0.19.2",
"cosmicjs": "^3.2.48",
"express": "^4.17.1",
"lodash": "^4.17.19",
"moment": "^2.27.0",
"next": "^9.4.4",
"npm-run-all": "^4.1.5",
"postcss-cli": "^7.1.1",
"postcss-import": "^12.0.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-toastify": "^6.0.8",
"tailwindcss": "^1.4.6"
},
"devDependencies": {
"nodemon": "^2.0.4"
},
"scripts": {
"build:tailwind": "postcss styles/tailwind.css -o styles/tailwind.generated.css",
"watch:tailwind": "postcss -w styles/tailwind.css -o styles/tailwind.generated.css",
"start": "run-p watch:tailwind start:next",
"start:next": "next start",
"dev": "next",
"prebuild": "npm run build:tailwind",
"build": "next build"
},
"author": "Salvator",
"license": "ISC"
}
I am developing an application by nuxtjs. I have installed the Admin SDK for Node.js to validate the user's token in the server side but when I import firebase-admin in the project I have the next issue. I have installed the modules child_process fs net tls but it didn' work.
WARNING Compiled with 4 warnings
20:30:20 warning in ./node_modules/grpc/src/grpc_extension.js
Critical dependency: the request of a dependency is an expression
warning in
./node_modules/grpc/node_modules/node-pre-gyp/lib/pre-binding.js
Critical dependency: the request of a dependency is an expression
warning in
./node_modules/grpc/node_modules/node-pre-gyp/lib/util/versioning.js
Critical dependency: the request of a dependency is an expression
warning in ./node_modules/hash-stream-validation/index.js
Module not found: Error: Can't resolve 'fast-crc32c' in
'C:\Users\ARSENIO\Desktop\Development\nuxt\project4\node_modules\hash-stream-
validation'
ERROR Failed to compile with 38 errors
20:30:20 These dependencies were not found:
child_process in ./node_modules/google-auth-library/build/src/auth/googleauth.js,
./node_modules/grpc/node_modules/detect-libc/lib/detect-libc.js
fs in ./node_modules/#google-cloud/storage/src/file.js, ./node_modules/#google-cloud/storage/src/bucket.js and 34 others
To install them, you can run: npm install --save child_process fs
The package.json file is:
{
"name": "project4",
"version": "1.0.0",
"description": "My gnarly Nuxt.js project",
"author": "Arsenio Aguirre",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"dependencies": {
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-beta",
"chart.js": "^2.7.2",
"child_process": "^1.0.2",
"cross-env": "^5.2.0",
"firebase": "^5.5.3",
"firebase-admin": "^6.0.0",
"flag-icon-css": "^2.9.0",
"font-awesome": "^4.7.0",
"fs": "0.0.1-security",
"js-cookie": "^2.2.0",
"net": "^1.0.2",
"node-sass": "^4.9.3",
"nuxt": "^2.0.0",
"sass-loader": "^6.0.7",
"simple-line-icons": "^2.4.1",
"tls": "0.0.1",
"vue-chartjs": "^3.4.0"
},
"devDependencies": {
"nodemon": "^1.11.0",
"babel-eslint": "^8.2.1",
"eslint": "^5.0.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-vue": "^4.0.0",
"eslint-config-prettier": "^3.1.0",
"eslint-plugin-prettier": "2.6.2",
"prettier": "1.14.3"
}
}