DEV Community

Cover image for React App Setup, Resolving Dependency Conflicts in Node.js, & Debugging
TD!
TD!

Posted on

3

React App Setup, Resolving Dependency Conflicts in Node.js, & Debugging

This morning, I was tasked with reviving a project that had been dormant for years. As I started the project, I realized that most of the dependencies and technologies used to build it were now outdated. I spent half the day working on dependency conflicts and later saw it as an opportunity to share my experiences with you as Day #7 of #100daysofMiva. I turned the challenges I faced to the building blocks of this report to provide a step-by-step "how-to" guides to help you navigate similar obstacles. So it doesn't matter whether you're an expert or beginner, you'd understand it so well. Let's dive in...

Setting Up a React Application

Creating a New React App:

Command:
npx create-react-app my-app
Explanation: This command uses npx to create a new React application in a directory named my-app. It sets up the necessary files and dependencies for a React project.

Building the React App:

Command:
npm run build
Explanation: This command creates an optimized production build of the app in the build folder. The contents of this folder can be deployed to a web server.

Troubleshooting Common Issues

Ensure Node.js and npm are Installed:

Command:
node -v
npm -v

Explanation: These commands check the installed versions of Node.js and npm. If they are not installed, download and install them from the Node.js official website.

Clear npm Cache:

Command:
npm cache clean --force
Explanation: Clearing the npm cache can resolve issues related to corrupted cache files.

Update npm:

Command:
npm install -g npm
Explanation: This command updates npm to the latest version globally.

Uninstall Global create-react-app:

Command:
npm uninstall -g create-react-app
Explanation: Uninstalling the globally installed create-react-app ensures that npx uses the latest version.

Reinstall Dependencies:

Commands:
rm -rf node_modules
npm install

Explanation: Deleting the node_modules folder and reinstalling dependencies can fix issues related to corrupted or missing packages.
Editing App.js

Importing Dependencies:

JavaScript

import React from 'react';
import './App.css';
Enter fullscreen mode Exit fullscreen mode

Defining the Component:

JavaScript

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My React App</h1>
      </header>
    </div>
  );
}
export default App;
Enter fullscreen mode Exit fullscreen mode

Using State and Props:

JavaScript

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <header className="App-header">
        <h1>Count: {count}</h1>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </header>
    </div>
  );
}
export default App;
Enter fullscreen mode Exit fullscreen mode

Debugging Techniques

Using Console Logs:

JavaScript

console.log('Debug message');

Enter fullscreen mode Exit fullscreen mode

Setting Breakpoints in VS Code:

Steps:

Open App.js or any other file.

Click in the gutter to the left of the line number to set a breakpoint.
Run the app and use the VS Code debugger to inspect variables and step through code.

Using the Debugger Statement:

JavaScript

debugger;
Enter fullscreen mode Exit fullscreen mode

Configuring VS Code for Debugging:

Steps:

Create a launch.json file in the .vscode folder.

Add the following configuration:

JSON

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Start debugging by pressing the play button in the VS Code debugger.

Debugging and Resolving Dependency Conflicts in a Node.js Project

I'll be addressing issues related to dependency conflicts and runtime errors in a Node.js project using npm and Webpack. The primary focus was on resolving errors encountered during package installation and build processes.

Key Issues and Resolutions

1. Yarn Installation Error:

Error: 404 Not Found for a package.

Solution:

  • Update dependencies: yarn upgrade

  • Clear Yarn cache: yarn cache clean

  • Remove and reinstall node modules: rm -rf node_modules yarn.lock && yarn install

  • Use npm as an alternative: npm install

Node-Sass Environment Support Error:

Error: Node Sass does not yet support your current environment.

Solution:

  • Rebuild node-sass: npm rebuild node-sass

  • Update node-sass: npm uninstall node-sass && npm install node-sass

  • Switch to Dart Sass: npm uninstall node-sass && npm install sass

  • Check Node.js version compatibility: nvm install && nvm use

  • Clear npm cache and reinstall: npm cache clean --force && rm -rf node_modules package-lock.json && npm install

Dependency Conflict with ERESOLVE:

Error: ERESOLVE could not resolve dependency.

Solution:

  • Use --legacy-peer-deps flag: npm install --legacy-peer-deps

  • Use --force flag: npm install --force

  • Manually install peer dependencies: npm install react@15.7.0

  • Switch to Yarn: yarn install

  • Clear npm cache and reinstall: npm cache clean --force && rm -rf node_modules package-lock.json && npm install

Webpack Configuration Error:

Error: Query arguments on 'loader' has been removed in favor of the 'options' property.

Solution:

Update Webpack loader configuration:

JavaScript

{
  test: /\.svg$/,
  loader: 'url-loader',
  options: {
    limit: 100000
  }
}
Enter fullscreen mode Exit fullscreen mode
  • Review and update other loaders similarly.

  • Refer to the Webpack migration guide for detailed instructions.

Commands and Prompts Explained

  • npm install: Installs all dependencies listed in package.json.

  • npm rebuild node-sass: Rebuilds the node-sass package to ensure compatibility with the current environment.

  • npm uninstall <package> && npm install <package>: Uninstalls and reinstalls a package to update it.

  • npm cache clean --force: Clears the npm cache to resolve potential issues with corrupted cache.

  • rm -rf node_modules package-lock.json: Removes the node_modules directory and package-lock.json file to force a clean installation of dependencies.

  • yarn install: Installs all dependencies listed in package.json using Yarn.

  • nvm install && nvm use : Installs and uses a specific version of Node.js using Node Version Manager (nvm).

Python Installation and PATH Configuration

Steps:

Locate Python Installation:

Typically found in C:\Users\<YourUsername>\AppData\Local\Programs\Python\Python39\.

Open Environment Variables:

Press Win + Pause > Advanced system settings > Environment Variables.

Edit the PATH Variable:

Add the Python installation directory and the Scripts directory to the PATH.

Commands:

  • python --version: Verifies Python installation.

  • pip --version: Verifies pip installation.

  • Explanation: Adding Python to the PATH allows you to run Python and pip commands from any command prompt, making it easier to manage Python projects and dependencies.

Webpack Configuration and node-sass Issue

Objective: Resolve the node-sass issue by transitioning to sass (Dart Sass).

Steps:

Uninstall node-sass:
npm uninstall node-sass

Install sass:
npm install sass --save-dev

Update Webpack Configuration:
Ensure webpack.config.js uses sass-loader correctly.

Commands:

  • npm uninstall node-sass: Removes node-sass from the project.

  • npm install sass --save-dev: Installs sass (Dart Sass) as a development dependency.

  • npm run build: Builds the project using Webpack.

What are some best practices for managing dependencies? (Bonus section)

Managing dependencies effectively is crucial for maintaining a stable and secure development environment. Here are some best practices to help you manage dependencies in your projects:

Version Pinning:

Description: Restrict the version of a dependency to a specific version to ensure consistency across different environments.

Example: Use exact version numbers in your package.json file, like "react": "16.14.0" instead of "react": "^16.14.0".

Use Lockfiles:

Description: Lockfiles (like package-lock.json or yarn.lock) ensure that the exact same versions of dependencies are installed every time.
Example: Always commit your lockfiles to version control to maintain consistency across different environments.

Regular Updates:

Description: Regularly update your dependencies to benefit from security patches, bug fixes, and new features.
Example: Use tools like Dependabot or Renovate to automate dependency updates and keep your project up-to-date.

Minimal Dependencies:

Description: Keep the number of dependencies to a minimum to reduce the attack surface and potential for conflicts.
Example: Avoid adding unnecessary libraries and periodically review and remove unused dependencies.

Security Monitoring:

Description: Monitor your dependencies for known vulnerabilities and apply patches promptly.
Example: Use tools like npm audit, Snyk, or OWASP Dependency-Check to scan for vulnerabilities.

Semantic Versioning:

Description: Follow semantic versioning (SemVer) to understand the impact of updates on your project.
Example: Use version ranges like "^1.2.3" to allow for non-breaking updates, but be cautious with major version changes.

Automated Testing:

Description: Implement automated tests to catch issues early when updating dependencies.
Example: Use CI/CD pipelines to run tests automatically whenever dependencies are updated.

Dependency Management Tools:

Description: Use tools designed to manage dependencies effectively.
Example: Yarn, npm, and pnpm are popular tools that offer features like workspaces and monorepos to manage dependencies efficiently.

Documentation and Communication:

Description: Document your dependency management strategy and communicate it with your team.
Example: Maintain a README or a dedicated document outlining how dependencies should be managed and updated.

Signature and Hash Verification:

Description: Verify the authenticity of dependencies to ensure they haven’t been tampered with.
Example: Use hash verification or signature verification methods to validate the integrity of your dependencies.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (2)

Collapse
 
mayowakalejaiye profile image
mayowa-kalejaiye

wow
Super explanatory💪🚀

Collapse
 
tobidelly profile image
TD!

Thank you

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up