Invalid PostCSS plugin error while deploying next js site to vercel - next.js

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"
}

Related

unable to run build command successfully on a sveltekit project

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"
}
}

"Error: Hook can only be invoked from render methods." error in Next.js and Preact

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"
}
},

Error while deploying firebase function with Stripe

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.

Nextjs 10.0 builds without styles

Hello guys can anybody help with Nextjs v10 build ? it builds without styles :|
here is my package.json and next.config.js
I import all styles in _app.js, it also comes in chrome network -> preview without styles
On vercel everything is ok, but when i try to build on my computer, it's without styles :|
**
next.config.js
**
module.exports = {
images: {
domains: ['localhost','assets.vercel.com','via.placeholder.com','mine-front-new.vercel.app'],
},
}
package.json
{
"name": "mine",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build",
"start": "next start",
"prod:build": "SET NODE_ENV=production && next build && next export",
"export": "next build && next export"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#fortawesome/fontawesome-free": "^5.13.1",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.57",
"add": "^2.0.6",
"axios": "^0.19.2",
"chart.js": "^2.9.3",
"date-fns": "^2.16.1",
"draft-js": "^0.11.7",
"es6-shim": "^0.35.6",
"js-cookie": "^2.2.1",
"jwt-decode": "^3.0.0",
"moment": "^2.27.0",
"next": "10.0.0",
"react": "17.0.1",
"react-chartjs-2": "^2.9.0",
"react-dom": "17.0.1",
"react-facebook": "^8.1.4",
"react-lottie": "^1.2.3",
"react-transition-group": "^4.4.1",
"yarn": "^1.22.10"
},
"devDependencies": {
"#types/cookie": "^0.4.0",
"clsx": "^1.1.1",
"cookie": "^0.4.1",
"prop-types": "^15.7.2",
"react-date-range": "^1.0.3",
"react-reveal": "^1.2.2",
"react-slick": "^0.26.1",
"react-toastify": "^6.0.8",
"slick-carousel": "^1.8.1",
"sweetalert2": "^9.15.2"
}
}
Make sure u use appropriate css loaders. I faced the same issue and resolved using this,
loaders: ['style-loader', 'css-loader', 'less-loader']
My next.config.js
module.exports = withImages({
target: 'serverless',
webpack: function (config, { webpack }) {
config.module.rules.push({
test: /\.(eot|svg|gif|md)$/,
loaders: ['style-loader', 'css-loader', 'less-loader']
})
return config
},
})

Vue JS Build not Import CSS Files

My CSS code that I imported into my Vue project and runs in the "npm run serve" section does not work on my server after "npm run build". What could be the reason for this? When I open the index file in the dist file on the local computer, it says CSS is missing, it does not say any error on the server.
main.js
import Vue from 'vue'
import App from './App.vue'
import VRouter from './router'
import VStore from './configurations/storeConfiguration'
import V18n from './configurations/languageConfiguration'
// Special CSS Library ( UA )
import "./assets/scss/ua.css";
The CSS file that appears appears in the development environment. However, it does not appear in the server environment.
package.json
{
"name": "driver",
"version": "0.1.0",
"private": true,
"sideEffects": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.32",
"#fortawesome/free-solid-svg-icons": "^5.15.1",
"#fortawesome/vue-fontawesome": "^2.0.0",
"axios": "^0.20.0",
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.17.3",
"core-js": "^3.6.5",
"epic-spinners": "^1.1.0",
"node-sass": "^4.14.1",
"sass": "^1.27.0",
"sass-loader": "^10.0.3",
"scriptjs": "^2.5.9",
"sweet-modal-vue": "^2.0.0",
"v-mask": "^2.2.3",
"vue": "^2.6.12",
"vue-analytics": "^5.22.1",
"vue-ctk-date-time-picker": "^2.5.0",
"vue-i18n": "^8.22.0",
"vue-input-mask": "0.0.11",
"vue-router": "^3.4.7",
"vue-suggestion": "^1.1.0",
"vue-sweetalert2": "^4.0.0",
"vue-the-mask": "^0.11.1",
"vue-toastification": "^1.7.8",
"vuex": "^3.5.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
First things first:
npm run serve does not serve the content of your dist file
Check: How to run production site after build vue cli
Would you mind show some code so we can analyse your problem?

Resources