We Keep Coding

cross-env APP_ENV=production expo r -c throws Invalid project root error after upgrade to Expo 45

After upgrading from Expo v44 to v45, starting my app in production env with the following npm run start-prod throws an error Invalid project root: /Users/user/code/username/projectname/r.
It seems like it is adding /r to my project root for no reason.
I am using a Managed Workflow with Expo.
package.json
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start-prod": "cross-env APP_ENV=production expo r -c",
},
"dependencies": {
"expo": "^45.0.0",
"react-native": "0.68.2",
"cross-env": "^7.0.3",
...

Vercel deployment error: Module Not Found remotelly works locally. Cached build is the problem?

I'm making this site using Next.JS hosted # Vercel. One of the packages I'm using is a custom one that I've forked, updated it in my project and after the build, was able to make it work locally. I posted a question here about it.
However, deploy is failing on Vercel's side with a message complaining that that same custom module I'm using couldn't be found. Everything works fine locally.
14:40:04.802 Failed to compile.
14:40:04.803 ModuleNotFoundError: Module not found: Error: Can't resolve 'react-headroom' in '/vercel/path0/src/components/layout'
14:40:04.803 > Build error occurred
14:40:04.804 Error: > Build failed because of webpack errors
14:40:04.805 at /vercel/path0/node_modules/next/dist/build/index.js:17:924
14:40:04.805 at runMicrotasks (<anonymous>)
14:40:04.805 at processTicksAndRejections (internal/process/task_queues.js:95:5)
14:40:04.805 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)
I believe this is due to cached builds from the previous version (before I forked and edited my package). I've come across some solutions like using Vercel CLI to clean the cached builds but it seems not to work (vercel --force) because I get the very same error # build time.
I'm not sure what I could do to solve this issue or if something is missing in this process.
EDIT: here it's my package.json file
{
"name": "cms-sanity",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "npm run build:sanity && pwd && npm run build:web",
"build:web": "next build",
"start:web": "next start",
"build:sanity": "cd studio && sanity build ../public/studio -y && cd ..",
"start:sanity": "cp .env ./studio/.env.development && cd studio && sanity start",
"postinstall": "lerna bootstrap"
},
"dependencies": {
"#chakra-ui/icons": "^1.0.15",
"#chakra-ui/react": "^1.6.7",
"#emotion/react": "^11",
"#emotion/styled": "^11",
"#sanity/block-content-to-react": "^3.0.0",
"#sanity/client": "^2.8.0",
"#sanity/image-url": "^0.140.19",
"axios": "^0.22.0",
"classnames": "^2.2.6",
"date-fns": "^2.15.0",
"framer-motion": "^4",
"fs": "^0.0.1-security",
"google-spreadsheet": "^3.1.15",
"next": "^10.2.0",
"next-sanity": "^0.1.5",
"next-sanity-image": "^3.1.6",
"next-seo": "^4.26.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-headroom": "https://github.com/eduoliveira85/react-headroom/",
"react-hook-form": "^7.3.6",
"react-icons": "^4.2.0",
"react-jss": "^10.8.0",
"react-world-flags": "^1.4.0",
"swr": "^0.5.5"
},
"devDependencies": {
"#fullhuman/postcss-purgecss": "^4.0.3",
"#sanity/cli": "^2.0.5",
"lerna": "^4.0.0",
"postcss-preset-env": "^6.7.0"
}
}

There #react-headroom dependency in your package.json points to a github link rather than a dependency version. That seems to be the issue.

I've copied just the files from the repo to my project, installed dependencies manually and this solved the issue. Won't need updates for this lib anyway.

heroku deploy not working when local build works fine - NodeJS Timeout

Title says it really - i can build locally but it fails to deploy. Has an issue with Timeout - not sure how to force this to work?
Here's my package.json, and the logs afterwards.
I tried adding Timeout by running a yarn install but then it triggered some other dependency issues with node-gyp
Many thanks for any tips!
Package.json
{
"name": "api",
"homepage": ".",
"version": "0.0.1",
"private": true,
"scripts": {
"lint": "eslint .",
"dev": "NODE_ENV=development nodemon --watch '**/*' -e ts,tsx,js --ignore 'src/**/*.spec.ts' --exec 'ts-node --project ./tsconfig.json' src/server.ts",
"start": "node ./dist/server.js",
"start:redis": "docker-compose up -d",
"build": "NODE_ENV=production tsc"
},
"engines":{
"node":"14.15.5",
"npm": "6.14.11",
"yarn": "1.22.15"
},
"license": "MIT",
"main": "dist/server.js",
"devDependencies": {
"#types/cookie": "^0.4.0",
"#types/puppeteer": "^5.4.4",
"#types/ramda": "^0.27.44",
"#types/redis": "^2.8.31",
"#types/user-agents": "^1.0.2",
"#typescript-eslint/eslint-plugin": "^4.19.0",
"#typescript-eslint/parser": "^4.19.0",
"eslint": "^7.22.0",
"eslint-config-prettier": "^8.1.0",
"nodemon": "^2.0.12",
"prettier": "~2.2.1",
"tslib": "^2.0.0",
"typescript": "^4.0.0"
},
"dependencies": {
"axios": "^0.21.1",
"body-parser": "^1.19.0",
"chalk": "^4.1.2",
"cookie": "^0.4.1",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"express-async-router": "^0.1.15",
"express-query-boolean": "^2.0.0",
"node-fetch": "^2.6.1",
"puppeteer": "^10.2.0",
"puppeteer-extra": "^3.1.18",
"puppeteer-extra-plugin-adblocker": "^2.11.11",
"puppeteer-extra-plugin-stealth": "^2.7.8",
"ramda": "^0.27.1",
"redis": "^3.1.2",
"user-agents": "^1.0.738",
"util": "^0.12.4"
}
}
Build logs
>
-----> Building on the Heroku-20 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 14.15.5
engines.npm (package.json): 6.14.11
engines.yarn (package.json): 1.22.15
Resolving node version 14.15.5...
Downloading and installing node 14.15.5...
npm 6.14.11 already installed with node
Resolving yarn version 1.22.15...
Downloading and installing yarn (1.22.15)
Installed yarn 1.22.15
-----> Restoring cache
Cached directories were not restored due to a change in version of node, npm, yarn or stack
Module installation may take longer for this build
-----> Installing dependencies
Installing node modules (package.json)
> puppeteer#10.4.0 install /tmp/build_e4061cb3/node_modules/puppeteer
> node install.js
> nodemon#2.0.13 postinstall /tmp/build_e4061cb3/node_modules/nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate
added 477 packages from 392 contributors and audited 479 packages in 31.801s
76 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
-----> Build
Running build
> api#0.0.1 build /tmp/build_e4061cb3
> NODE_ENV=production tsc
node_modules/puppeteer/lib/types.d.ts(3644,28): error TS2694: Namespace 'NodeJS' has no exported member 'Timeout'.
node_modules/puppeteer/lib/types.d.ts(6489,71): error TS2583: Cannot find name 'BigInt'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2020' or later.
node_modules/puppeteer/lib/types.d.ts(6894,28): error TS2694: Namespace 'NodeJS' has no exported member 'Timeout'.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! api#0.0.1 build: `NODE_ENV=production tsc`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the api#0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.LPsTK/_logs/2021-10-13T12_15_23_280Z-debug.log
-----> 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 problem seems to be missing types, here are two possible fix:
Install #types/node as a devDependencies. This package contains types for NodeJS, including the Timeout type.
Edit your tsconfig.json to set skipLibCheck to true:
{
"compilerOptions": {
"skipLibCheck": true
}
}
This will ignore type errors in d.ts files (your error come from node_modules/puppeteer/lib/types.d.ts so it should fix it).

Node.js app failed to build when pushing to Heroku

I'm new to coding and I'm currently developing an embedded app for Shopify using Node.js according to this tutorial. (https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react)
My app works fine locally but failed to build when pushing to Heroku. I've tried every solution I can find online but none of those works.
It seems that there's a syntax error in my code but I've already delete that part, why does the error still exist?
-----> Build
Running build
> collection-generator-app#1.0.0 build /tmp/build_9491321e44d82596e81efddc7086d165
> next build
Creating an optimized production build ...
Failed to compile.
./pages/fetch-query.js
SyntaxError: /tmp/build_9491321e44d82596e81efddc7086d165/pages/fetch-query.js: Unterminated JSX contents (34:9)
32 |
33 | return (
> 34 | <div>
| ^
35 |
36 | );
37 | }}
> Build error occurred
Error: > Build failed because of webpack errors
at Object.build [as default] (/tmp/build_9491321e44d82596e81efddc7086d165/node_modules/next/dist/build/index.js:101:15)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! collection-generator-app#1.0.0 build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the collection-generator-app#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.Galdd/_logs/2019-05-09T04_23_39_145Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
Some possible problems:
- node_modules checked into source control
https://blog.heroku.com/node-habits-2016#9-only-git-the-important-bits
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
Here's my package.json
{
"name": "collection-generator-app",
"version": "1.0.0",
"description": "",
"engines": {
"node": "10.15.2",
"npm": "6.4.1"
},
"main": "index.js",
"scripts": {
"dev": "node server.js",
"start": "next start",
"build": "next build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#shopify/koa-shopify-auth": "^3.1.18",
"#shopify/koa-shopify-graphql-proxy": "^2.1.5",
"#shopify/polaris": "^3.11.0",
"#zeit/next-css": "^1.0.1",
"apollo-boost": "^0.3.1",
"dotenv": "^7.0.0",
"graphql": "^14.1.1",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.0",
"js-cookies": "^1.0.4",
"koa": "^2.7.0",
"koa-session": "^5.10.1",
"next": "^8.0.3",
"react": "^16.8.4",
"react-apollo": "^2.5.3",
"react-dom": "^16.8.4"
}
}

You should have a closing tag for the div tag in your fetch-query.js file.
If you already did that, commit the changes and push to heroku.
Usually, you can do :
git add .
git commit -m "fix closing tag"
git push heroku master
But it depends on how you configured your git.
If you want to keep the div tag, take a look at the Fragments API

According to the logs, you're missing a closing html div tag.
Solutions:
delete the on line 32, OR
Add after line 32 or where you deem that the should end.
Then follow the commands #Nino wrote:
git add .
git commit -m "fix closing tag"
git push heroku master
That's it. :)
It's also recommended you include /node_modules in your .gitignore. Also, include your version here in your package json. Some modules like heroku work best with node 8.0 +

Webpack with html-webpack-plugin, error when installed globally

I know this problem has been reported elsewhere, when webpack and html-webpack-plugin are installed with npm -g:
module.js:341
throw err;
^
Error: Cannot find module 'html-webpack-plugin'
at Function.Module._resolveFilename (module.js:339:15)
And the answer people have found is to install one or both locally to the project. But that won't work for me. I need to get this working in our shared build system, not just in my dev environment. This means having it installed globally so that all projects have access to it via their ant/nant build scripts run by Jenkins.
My project is very simple. A couple of html pages with content generated by reactJS scripts included in the html with script tags. This should be easy, and its beginning to be a pain. Thinking of dumping webpack and looking for another simple javascript package manager.
Are there environment variables that we can use to tell webpack to look in the global node 'node_modules' directory for 'require'd plugings/packages?
Suggestions?

You don't have to install webpack globally for Jenkins.
Add to your package.json under scripts a command that runs the local webpack, like this:
"scripts": {
"start": "webpack-dev-server --inline --hot",
"build": "webpack -p"
},
Now Jenkins can run your build script, without having a global webpack installed:
npm run build
In this way you can maintain multiple projects with different versions of webpack, and each project can have it's own local dependencies.
The scripts prop is part of the projects package.json. The package.json contains all dependencies, and dev dependencies (build, testing, etc...) of the project. Using the package.json running NPM install on your build machine, you can install locally (part of the project dir) all dependencies. A sample of a package.json for an angular project built with webpack:
{
"name": "whatever",
"version": "1.2.0",
"description": "whatever",
"scripts": {
"start": "webpack-dev-server --inline --hot", // runs the dev server
"build": "webpack -p" // builds the release
},
"dependencies": { // the dependencies that are part of the actual release
"angular": "1.5.0",
"angular-animate": "1.5.0",
"angular-messages": "1.5.0",
"angular-ui-router": "0.2.15"
},
"devDependencies": { // build dependencies
"babel-core": "6.5.2",
"babel-eslint": "6.0.0-beta.1",
"babel-loader": "6.2.3",
"babel-preset-es2015": "6.5.0",
"babel-preset-stage-0": "6.5.0",
"css-loader": "0.23.1",
"file-loader": "0.8.5",
"html-loader": "0.4.3",
"html-webpack-plugin": "2.14.0",
"less-loader": "2.2.2",
"style-loader": "0.13.0",
"url-loader": "0.5.7",
"webpack": "1.12.14",
"webpack-dev-server": "1.14.1"
},
"license": "MIT"
}
Whenever the git master is updated, Jenkins pulls the latest commit, cleans the current build directory, including all dependencies, and runs in the project folder the following commands:
npm install to install all dependencies locally, as part of the project folder
npm run build to build the release
Jenkins is not aware of webpack or any other build tool or dependency. The only things that are installed globally on Jenkins are nodejs and npm.
And here is the simple bash script that runs the commands:
rm -rf node_modules || true // remove node_modules (all deps)
npm install // install all deps
npm run build // run the build script