I'm working on a nextjs webapp, it's a static website built with Chakra UI. Everything was working quite good till now but suddenly my productions stopped building. It is showing building forever. I'm deploying it on the Vercel but the same issue is arising there as well.
My previous deploymnt is live at https://siws.vercel.app and it's working fine but I'm not able to push another deployment due to this issue. And I don't even know the root cause of this.
I even tried deleting the ./next folder and building again but the facing the same issue.
Here is some information that maybe relevant:
Node JS version: 19.1.0
And here is my package.json file:
"name": "slayitwithskin",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#chakra-ui/react": "^2.4.1",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#splidejs/react-splide": "^0.7.12",
"eslint": "8.27.0",
"eslint-config-next": "13.0.3",
"framer-motion": "^7.6.6",
"next": "13.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.6.0",
"react-rainbow-components": "^1.31.0",
"sass": "^1.56.1"
}
}
Any sort of help is really appreciated.
I checked my package.json file, I was using react-rainbow-components which was the root cause of this issue. I completely removed and the app is now building quickly.
Related
I currently am creating a website using Gatsby v4 and I keep running into an issue with building on AWS Amplify. Building locally works fine every time, however, when I build on AWS Amplify, a random amount of GraphQL query errors appear with the general format of:
Field "[x]" must not have a selection since type "String" has no subfields.
This error usually appears when a file path (usually for an image) is misspelled or written in the wrong format, causing graphQL to recognize it as a String as opposed to a path to a file.
Sometimes there's only one of these errors, other times there's two or three, and occasionally, if I'm lucky (about 35% of the time), there will be no errors and it builds properly. My packages.json is the following:
"scripts": {
"develop": "cross-env GATSBY_GRAPHQL_IDE=playground gatsby develop -H 0.0.0.0",
"start": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,css}\"",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean"
},
"dependencies": {
"#aws-amplify/api": "^4.0.53",
"#pittica/gatsby-plugin-recaptcha": "^2.0.3",
"aws-amplify": "^4.3.35",
"gatsby": "^4.24.4",
"gatsby-cli": "^4.24.0",
"gatsby-plugin-anchor-links": "^1.2.1",
"gatsby-plugin-html-attributes": "^1.0.5",
"gatsby-plugin-image": "^2.16.1",
"gatsby-plugin-manifest": "^4.13.0",
"gatsby-plugin-robots-txt": "1.7.1",
"gatsby-plugin-sharp": "^4.16.1",
"gatsby-plugin-sitemap": "^5.24.0",
"gatsby-source-build-date": "^1.0.1",
"gatsby-source-filesystem": "^4.16.0",
"gatsby-transformer-csv": "^4.23.0",
"gatsby-transformer-json": "^4.16.0",
"gatsby-transformer-remark": "^5.22.0",
"gatsby-transformer-sharp": "^4.16.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1"
},
"devDependencies": {
"cross-env": "^7.0.3",
"prettier": "^2.6.2"
}
Is there any way for me to configure AWS or Gatsby so that it builds correctly 100% of the time (assuming there are no other errors)?
I have tried updating packages, configuring different versions of node and npm, and changing build commands and settings to no avail.
I am trying to deploy the Next,js application to the heroku using heroku CLI. I am getting below issue when i run git push heroku master. Here are the package.json file I have in my current setup. Please help. I have search for the issue but I am not able to find anything related to it. I can build the next.js app in my local machine but not deploy in heroku.
Package.json
{
"name": "XXXX-ecommerce",
"version": "0.1.0",
"engines": {
"node": "18.x",
"npm": "7.x"
},
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"heroku-postbuild": "npm run build",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"#apollo/client": "^3.7.0",
"#nacelle/react-yotpo": "^8.0.0",
"axios": "^1.1.3",
"cookie": "^0.5.0",
"cookie-cutter": "^0.2.0",
"graphql": "^16.6.0",
"lodash": "^4.17.21",
"lodash.filter": "^4.6.0",
"lodash.uniqby": "^4.7.0",
"next": "12.3.1",
"react": "18.2.0",
"react-collapsible": "^2.10.0",
"react-dom": "18.2.0",
"react-rating": "^2.0.5",
"swiper": "^8.4.2"
},
"devDependencies": {
"eslint": "8.24.0",
"eslint-config-next": "12.3.1"
}
}
Heroko Build log:
info - Creating an optimized production build...
Failed to compile.
./components/card.js
Module not found: Can't resolve 'lodash.uniqBy' in '/tmp/build_54073365/components'
Import trace for requested module:
./components/card.js
./components/productSlider.js
./pages/products/[id].js
Module not found: Can't resolve 'lodash.uniqBy' in
'/tmp/build_54073365/pages/products'
> Build failed because of webpack errors
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
The package name is lodash.uniqby (all lowercase). Check your imports, it looks like you have uniqBy (with a capital B) in one of your components. This probably worked locally because macOS and Windows have case-insensitive filesystems, so it would work locally but not when deployed to a machine running Linux, like on Heroku.
I am trying to deploy a nodejs app onto Azure App Service. I did the basics of deploying it, but it's failing to run. It seems it is designed to run "node run.js" commands rather than "npm run start".
I'm playing in the console, and if I try to run npm run start manually, I get a series of errors tied to build. Basically:
'tsc' is not recognized as an internal or external command
I'm wondering if there's something really obvious here about how tsc (and others) can be added to path. I have to admit, I'm not particularly well versed in using Azure or Node for that matter. Any help would be very much appreciated! Thanks!
This is the package.json file:
{
"name": "test-scraper",
"version": "0.1.1",
"description": "",
"main": "dist/main.js",
"scripts": {
"build": "tsc",
"build:dev": "tsc --watch",
"prestart": "npm run build",
"start:dev": "nodemon",
"start": "pm2 start dist/src/main.js --node-args=\"-r ./tsconfig-paths-bootstrap.js\" && pm2 monit",
"stop": "pm2 delete main"
},
"author": "",
"license": "MIT",
"devDependencies": {
"#types/lodash": "^4.14.161",
"#types/node": "^14.11.8",
"#types/puppeteer": "^3.0.2",
"nodemon": "^2.0.4",
"prettier": "^2.1.2",
"typescript": "^4.0.3"
},
"dependencies": {
"axios": "^0.20.0",
"discord-webhook-node": "^1.1.8",
"lodash": "^4.17.20",
"messaging-api-telegram": "^1.0.1",
"playwright-firefox": "^1.4.2",
"pm2": "^4.5.0",
"tsconfig-paths": "^3.9.0",
"winston": "^3.3.3"
}
}
Run this command locally for installing typescript, because your code is compiled with the tsc command.
npm install -g typescript
Mostly I was following this tutorial.
Add the tsc command to package.json and add the dependencies:
"build": "tsc --project ./"
...
"devDependencies": {
"#types/express": "^4.17.9",
"#types/node": "^14.14.20",
"ts-node": "^9.1.1",
"typescript": "^4.1.3"
},
Here is my file structure:
I add a empty file.ts and add this scripts to the tsconfig.jason file:
"exclude": [ "src", "wwwroot" ],
"include": [ "file.ts" ]
Deploy through Azure Web App deployment center:
And the app build (tsc) run successfully:
if you are deploying to Production (NODE_ENV: production), devDependencies will no longer being installed, and you need to edit your package.json and move typescript to dependencies.
Source
on-rest my project was working great untill I delete my node_modules file and try to re-install npm package.
I am getting this error
./node_modules/react-event-listener/dist/react-event-listener.cjs.js
Module not found: Can't resolve '#babel/runtime/helpers/builtin/classCallCheck' in '/Users/suatkarabacak/Desktop/demarkedashboard/node_modules/react-event-listener/dist'
My package.json is looking like this.
{
"name": "demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"admin-on-rest": "^1.4.1",
"aor-dependent-input": "^1.2.0",
"aor-parseserver-client": "0.3.0",
"aor-rich-text-input": "^1.0.1",
"babel-runtime": "^6.26.0",
"parse": "^1.11.1",
"parse-react": "^0.5.2",
"prop-types": "^15.6.2",
"react": "^15.6.2",
"react-dom": "^15.6.2",
"react-image-lightbox": "^4.6.0",
"react-images": "^0.5.19"
},
"devDependencies": {
"#babel/runtime": "^7.0.0-beta.56",
"aor-color-input": "^1.2.1",
"babel-polyfill": "^6.23.0",
"react-scripts": "^1.1.4"
},
"homepage": "demo.html",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
There is no builtin folder.
What could be the problem ?
Since Babel 7.x is still a beta version, there was a breaking change in beta.56, which was released yesterday.
"#babel/runtime": "^7.0.0-beta.56",
If you're using a beta version of something, it is dangerous to use ^ in your version number, because that means it will accept any recent version, whether or not it is actually compatible with previous beta versions.
Since react-scripts uses https://github.com/facebook/create-react-app/blob/1407287839f94151cec729bd89441d4eee7d9dd3/packages/babel-preset-react-app/package.json#L28
"#babel/plugin-transform-runtime": "7.0.0-beta.46",
Your should likely have
"#babel/runtime": "7.0.0-beta.46",
in your own package.json to match.
In my case the problem was in relative paths and complex project structure, so that I had to specify exact location of my node_modules directory:
module.exports = {
resolve: {
modules: [
path.resolve(__dirname, "node_modules")
],
...
In case you are running into this because of your dependency on material-ui:
Looks like material-ui updated its package.json to reference '7.0.0-beta.42' instead of '^7.0.0-beta.42'
See Issue: 12409
If you want to use the 7.0.0-beta.56 version, the easiest solution is to create builtin/ folder manually inside helpers/ folder then, move or copy the contents of helpers folder inside helpers/builtin/ and you will not see this error message anymore.
In case you do have material ui in there, make sure you've installed all that you're importing like /icons,/core.
Here I am having a little addiction problem with reaction-native since yesterday................
it completely blocks me from navigating to certain screens etc.
Here is a copy of package. json:
{
"name": "test2",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.7.0",
"jest-expo": "^22.0.0",
"react-test-renderer": "16.0.0-beta.5"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^22.0.2",
"mobx-react": "^4.3.4",
"react": "16.0.0-beta.5",
"react-native": "^0.49.5",
"react-native-elements": "^0.18.2",
"react-native-keyboard-aware-scroll-view": "^0.4.1",
"react-native-router-flux": "4.0.0-beta.23",
"react-navigation": "^1.0.0-beta.19"
}
}
How to install these outbuildings?
Where can I fix my problem if you've already had it, see?
thx!
You haven't installed the dependencies in your app. Either running
npm install
Has produced errors for those npm libraries, or it simply hasn't been run. Try running it, and if it still doesn't work, take a look at the contents of ./npm-debug.log for error messages related to it.
ETA: Looking closer, it seems that several of your dependencies require peers of specific versions of react, but you have a different version of react installed.
Are you using react#16.0.0-beta for a specific reason? Things like mobx are looking for react 13/14/15/16, but not 16b. I'd try this:
npm remove -S react
npm install -S react
and see if that works. If you were using the React beta for a reason, you may struggle to get these to talk to each other.