Issue deploying to Vercel with Create React App - node.js

Im having issues deploying my react app to Vercel. I believe it is failing to compile due to Vercel not being able to resolve './index.css', not sure what needs to be modified to fix this issue.
Here are the logs:
[12:22:08.385] Cloning completed: 1.218s
[12:22:08.459] Installing build runtime...
[12:22:10.412] Build runtime installed: 1.953s
[12:22:10.773] No Build Cache available
[12:22:10.926] Installing dependencies...
[12:22:20.413] npm WARN deprecated source-map-url#0.4.1: See https://github.com/lydell/source-map-url#deprecated
[12:22:20.902] npm WARN deprecated source-map-resolve#0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
[12:22:24.009] npm WARN deprecated formidable#1.2.6: Please upgrade to latest, formidable#v2 or formidable#v3! Check these notes:
[12:22:26.196] npm WARN deprecated superagent#5.3.1: Please upgrade to v7.0.2+ of superagent. We have fixed numerous issues with streams, form-data, attach(), filesystem errors not bubbling up (ENOENT on attach()), and all tests are now passing. See the releases tab for more information at <https://github.com/visionmedia/superagent/releases>.
[12:22:26.972] npm WARN deprecated svgo#1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
[12:22:34.604]
[12:22:34.604] added 1420 packages in 23s
[12:22:34.605]
[12:22:34.605] 170 packages are looking for funding
[12:22:34.605] run `npm fund` for details
[12:22:34.830] Detected `package-lock.json` generated by npm 7...
[12:22:34.830] Running "npm run build"
[12:22:35.098]
[12:22:35.098] > collage#0.1.0 build
[12:22:35.099] > react-scripts build
[12:22:35.099]
[12:22:36.313] Creating an optimized production build...
[12:22:37.029] Failed to compile.
[12:22:37.030]
[12:22:37.030] Module not found: Error: Can't resolve './index.css' in '/vercel/path0/src'
[12:22:37.030]
[12:22:37.030]
[12:22:37.046] Error: Command "npm run build" exited with 1

Resolved:
Case sensitivity issue. File name updated from 'Index.css' to 'index.css'.

Related

Can't get create-react-app to work on Linux mint 21

I am trying to get a simple create-react-app to work, but nothing seems to work. With Linux Mint the terminal sends few warnings but can't get the create-react-app to function.
~/Documents/Code$ npx create-react-app testreact Creating a new React
app in /home/omistaja/Documents/Code/testreact.
Installing packages. This might take a couple minutes. Installing
react, react-dom, and react-scripts...
npm WARN deprecated stable#0.1.8: Modern JS already guarantees
Array#sort() is a stable sort, so this library is deprecated. See the
compatibility table on MDN:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated rollup-plugin-terser#7.0.2: This package has been
deprecated and is no longer maintained. Please use
#rollup/plugin-terser npm WARN deprecated w3c-hr-time#1.0.2: Use your
platform's native performance.now() and performance.timeOrigin. npm
WARN deprecated sourcemap-codec#1.4.8: Please use
#jridgewell/sourcemap-codec instead npm WARN deprecated svgo#1.3.2:
This SVGO version is no longer supported. Upgrade to v2.x.x.
added 1415 packages, and audited 1416 packages in 41s
231 packages are looking for funding run npm fund for details
6 high severity vulnerabilities
To address all issues, run: npm audit fix
Run npm audit for details.
A template was not provided. This is likely because you're using an
outdated version of create-react-app. Please note that global installs
of create-react-app are no longer supported. You can fix this by
running npm uninstall -g create-react-app or yarn global remove
create-react-app before using create-react-app again.**
Running the audit fix returns
up to date, audited 101 packages in 1s
20 packages are looking for funding run npm fund for details
found 0 vulnerabilities
In addition to the warnings the terminal does not start the "quick tips" part (which starts with npm start and ends in Happy hacking!)
The created folder only contains following
node_modules (folder)
package.json
package-lock.json
with windows the folder also contains
public
src
.gitignore
README.md
going to the folder and running npm start returns Missing script error (which is to be found in the comments)
I am using running
Linux mint 21
node v18.14.1.
npm v. 9.3.1.
I have uninstalled and removed couple of times and nothing seems to fix that.
I also tested my commands with windows Git Bash (i have a dual-boot machine) and seems to work fine with the commands I am giving it.
Any ideas?
Not sure what the specific problem was but fixed it bt restoring the system to a few days back (before started working on updating the node.js to current version and trying to create-react-app for the first time).
After restoring the system I did a fresh autoremove on the node and install to the current nodejs version 18.14.1. it all just worked.

Error while installing gatsby.js starter templates

I want to make web app using gatsby.js
I have installed gatsby-cli globally using npm install.
But whenever I run gatsby new gatsby-starter-forty https://github.com/codebushi/gatsby-starter-forty or any other starter template command. I always end up with following error in my terminal
C:\Users\Sachin Verma\Desktop\gatsby>gatsby new gatsby-starter-forty https://github.com/codebushi/gatsby-starter-forty
info Creating new site from git: https://github.com/codebushi/gatsby-starter-forty.git
Cloning into 'gatsby-starter-forty'...
remote: Enumerating objects: 88, done.
remote: Counting objects: 100% (88/88), done.
remote: Compressing objects: 100% (83/83), done.
Uremote: Total 88 (delta 7), reused 72 (delta 4), pack-reused 0
Unpacking objects: 100% (88/88), done.
[32msuccess[39m Created starter directory layout
[34minfo[39m Installing packages...
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated core-js#2.6.11: core-js#<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js#3.
npm ERR! Unexpected end of JSON input while parsing near '...n"},"engines":{"node"'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Sachin Verma\AppData\Roaming\npm-cache\_logs\2020-05-10T15_43_11_180Z-debug.log
ERROR
Command failed with exit code 1: npm install
Error: Command failed with exit code 1: npm install
- error.js:56 makeError
[npm]/[gatsby-cli]/[execa]/lib/error.js:56:11
- index.js:114 handlePromise
[npm]/[gatsby-cli]/[execa]/index.js:114:26
- task_queues.js:97 processTicksAndRejections
internal/process/task_queues.js:97:5
Please suggest some way to fix it. As I am new to Node.js and can't fully understand the error
Judging by your console output, I can see that you're using Windows. You will need some additional setup in order to get a working environment.
Take a look at the official Gatsby on Windows docs.
In a nutshell, Gatsby recommends installing the windows-build-tools package to run on Windows:
The recommended way to setup your build environment on Windows is to install the windows-build-tools package by running npm install --global windows-build-tools --vs2015
If this doesn't work for you, there is further information (including troubleshooting) in the official Gatsby on Windows docs.
Alternatively, if you're on Windows 10, a good solution is to use Gatsby in the Windows Subsystem for Linux (WSL). To set it up, follow the instructions on the WSL Linux docs.

node-sass: command not found

I'm using Atom and trying to autocompile SCSS with the 'SASS Autocompile' package.
I'm absolutely going mad trying to get it to work. I'm being told node-sass: command not found and have followed countless guides and articles which mostly say run npm install node-sass. I do that, and it installs ok but Atom still gives me an error when I save a SASS file.
I have no idea if I'm running these commands in the correct location - on my local user level, in my project folder etc. The guides are so vague for someone who's not doing this all day every day.
I can't believe this is modern web development where you just have no way of knowing what is causing issues, no simple way to remove and reinstall things and we're all flying blind trying to fix things.
If anyone has some ideas of what I could try, I would love to hear them.
$ npm i node-sass
npm WARN deprecated mkdirp#0.5.3: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
> node-sass#4.13.1 install /Users/tommyprsnl/Sites/ozspurs/node_modules/node-sass
> node scripts/install.js
Cached binary found at /Users/tommyprsnl/.npm/node-sass/4.13.1/darwin-x64-72_binding.node
> node-sass#4.13.1 postinstall /Users/tommyprsnl/Sites/ozspurs/node_modules/node-sass
> node scripts/build.js
Binary found at /Users/tommyprsnl/Sites/ozspurs/node_modules/node-sass/vendor/darwin-x64-72/binding.node
Testing binary
Binary is fine
npm WARN ozspurs No description
npm WARN ozspurs No repository field.
npm WARN ozspurs No license field.
+ node-sass#4.13.1
updated 1 package and audited 528 packages in 4.857s
found 0 vulnerabilities

How to manually fix the vulnerabilities shown during npm install?

I am a beginner to NodeJS and during the installation of packages I encountered some vulnerabilities error. I have encountered a few errors previously as well. And which were fixed by simply updating the packages. Also, 'npm audit fix' didn't help. Following is the result of 'npm audit'. Can anyone tell me, how can I update these dependencies manually?
=== npm audit security report ===
Manual Review
Some vulnerabilities require your attention to resolve
Visit https://go.npm.me/audit-guide for additional guidance
High Command Injection
Package tree-kill
Patched in >=1.2.2
Dependency of #angular-devkit/build-angular [dev]
Path #angular-devkit/build-angular > #ngtools/webpack > tree-kill
More info https://npmjs.com/advisories/1432
High Command Injection
Package tree-kill
Patched in >=1.2.2
Dependency of #angular-devkit/build-angular [dev]
Path #angular-devkit/build-angular > tree-kill
More info https://npmjs.com/advisories/1432
found 2 high severity vulnerabilities in 16547 scanned packages
2 vulnerabilities require manual review. See the full report for details.
Also, can I update the 'tree-kill' package under the path '#angular-devkit/build-angular > #ngtools/webpack > tree-kill' and '#angular-devkit/build-angular > tree-kill' manually? If Yes, then how do I do it?
npm version - 6.12.1
node version - 12.13.1
Thank You for helping!

React Starter Kit Reports Unexplained Missing Packages

Let me start by stating that I am a rank beginner with respect to React/JS, but far from a beginner overall; my experience is varied, and includes, among many other things, some work with Angular/JS. Hence, this is not my first exposure to the Node/JS ecosystem.
The current investigation began with a missing peer report that I received when I installed the Material_UI package into the directory into which I had just installed the React Starter Kit, which gave the following report.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
> uglifyjs-webpack-plugin#0.4.6 postinstall F:\Praesidium\Armatus_Admin_EventRegistration\React\material_ui_table_demo\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
+ react-scripts#1.1.2
+ react#16.3.0
+ react-dom#16.3.0
added 1327 packages in 86.861s
Success! Created material_ui_table_demo at F:\Praesidium\Armatus_Admin_EventRegistration\React\material_ui_table_demo
Inside that directory, you can run several commands: ...
Installing Material_UI elicited the following report.
npm install material-ui#next
> jss#9.8.1 postinstall F:\Praesidium\Armatus_Admin_EventRegistration\React\material_ui_table_demo\node_modules\jss
> node -e "console.log('\u001b[35m\u001b[1mLove JSS? You can now support us on open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/jss/donate\u001b[0m')"
Love JSS? You can now support us on open collective:
> https://opencollective.com/jss/donate
npm WARN ajv-keywords#3.1.0 requires a peer of ajv#^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ material-ui#1.0.0-beta.40
added 47 packages in 23.878s
After investigating the AJV package, I decided to generate a dependency tree from the starter kit. The dependency tree reported one peer dependency, on the aforementioned AJV package, which went unreported by the installer.
More puzzling, however, is the list of allegedly missing packages reported by npm list.
material_ui_table_demo_Packages_Skeleton_20180402_211705.TXT is the npm list report covering the React Starter Kit.
material_ui_table_demo_Packages_Skeleton_20180402_211705_STDOUT.TXT is the list of missing packages, which were reported on the terminal console.
Since it affects the dependency tree, it is important that you are aware that this installation is on Microsoft Windows 10 Professional, and that the installed NPM and Node versions are 5.6.0 and v8.10.0, respectively.
The React Starter Kit Installation Instructions are dead silent about unresolved dependencies that a developer must address. Which report do I believe, the dependency tree or the missing packages reported separately by the very same npm list?
The issue of not installing packages on the first npm install has been popping up up here in there.
Running npm install again for a second time usually solves the problem, but in some cases (like this) you have to force a package version by doing the following steps:
Delete the node_modules folder
Delete the package-lock.json
Add the exact dependency to the package.json (in our case ajv#^6.0.0)
Execute npm update (just in case)
Execute npm install
Now the pm ERR! peer dep missing: ajv#^6.0.0, required by ajv-keywords#3.1.0 is no longer!
Note: how to add the dependency:
...
"dependencies": {
"ajv": "^6.0.0",
...
Why? Its a bug with the dependency system of npm (they added a hacky solution at some point and then they removed it, they have said they will rewrite the whole dependency system at some point)

Resources