React not starting server due to webpack and deprecated software I believe [Summary: What are dev tools and how can I add it to my app?]

Question

Okay before I get an answer I assume it has to do with a deprecated piece of software meaning that the deprecation is essentially a natural part of software engineering like virus mutation is a natural part of virology. Bellow is the error I receive when I try to start the server:

[noah@Qyain setup]$ npm run webpack

> solution@1.0.0 webpack
> webpack --mode=development --watch


webpack is watching the files…

node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/home/noah/Downloads/setup/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /home/noah/Downloads/setup/node_modules/babel-loader/lib/index.js:59:71 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
[noah@Qyain setup]$

package.json

{
  "name": "solution",
  "version": "1.0.0",
  "description": "This homework covers configuration of a new React project. Download the skeleton [here][skeleton].",
  "main": "index.jsx",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --mode=development --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0",
    "babel-preset-env": "^1.7.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "webpack": "^4.17.1"
  },
  "devDependencies": {
    "webpack-cli": "^3.1.0"
  }
}

I am trying to run a basic react app and have the index.jsx as bellow:

import React from 'react';
import ReactDOM from 'react-dom';
import Congrats from './congrats';

document.addEventListener("DOMContentLoaded", () => {
    const root = document.getElementById("root");
    ReactDOM.render(<Congrats/>, root);
});

I just began to realize the power of client-side software engineering and have moved to react to create apps that honestly shouldn't need to scale but I am having trouble with getting react started. Any ideas on what is going on? As usually I receive the all too common npm 'vulnerabilities' ranging from low severity to blue-screen-of-death level and everything in between, about 77 odd errors, I would call it?

I tried following that answer in that I uninstalled nodex and reinstalled node16 with dnf in fedora linux.

[noah@Qyain setup]$ npm run webpack

> solution@1.0.0 webpack
> webpack --mode=development --watch


webpack is watching the files…

node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/home/noah/Downloads/setup/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /home/noah/Downloads/setup/node_modules/babel-loader/lib/index.js:59:71 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
[noah@Qyain setup]$ export NODE_OPTIONS=--openssl-legacy-provider
[noah@Qyain setup]$ npm run webpack
/usr/bin/node: --openssl-legacy-provider is not allowed in NODE_OPTIONS
[noah@Qyain setup]$ npm run webpack
/usr/bin/node: --openssl-legacy-provider is not allowed in NODE_OPTIONS
[noah@Qyain setup]$ npm install
/usr/bin/node: --openssl-legacy-provider is not allowed in NODE_OPTIONS
[noah@Qyain setup]$

Above is my responses when I try starting the app. It appears to not work.

To note I created a new project of which is such:

[noah@Qyain my-app]$ npx create-react-app my-app
-> cd my-app
-> npm start
Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.243.208.85:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
^X^C
[noah@Qyain my-app]$ npm start

[noah@Qyain my-app]$ sudo npm install @babel/core @babel/preset-env @babel/preset-react babel-loader
[sudo] password for noah: 

up to date, audited 1444 packages in 5s

193 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Why are these errors 'critical', shaded in red and looks like they will destroy my house? What is a vulnerability, is it like an error or just a security risk? I don't want to run the audit b.c. tbh I think it will jump up to 113 or something, which is has in the past.

I then tried installing webpack and yet again more aggressive, hostile and dangerous critical vulnerabilities (which caused my house to tremble):

[noah@Qyain my-app]$ npm install webpack

up to date, audited 1444 packages in 5s

193 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
[noah@Qyain my-app]$

So as I continue I crated a an init file/command:

[noah@Qyain my-app]$ npm init --yes
Wrote to /home/noah/my-app/package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "babel-loader": "^8.2.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "webpack": "^5.73.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"
    ]
  },
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
  "main": "promise.js",
  "devDependencies": {},
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Installed webpack-cli, babel and react-dom oddly enough:

[noah@Qyain my-app]$ npm install  webpack-cli babel-loader react react-dom

added 16 packages, and audited 1460 packages in 6s

194 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Then I initialized webpack and am continuing to get this party started.

[noah@Qyain my-app]$ npx webpack-cli init
[webpack-cli] For using this command you need to install: '@webpack-cli/generators' package.
[webpack-cli] Would you like to install '@webpack-cli/generators' package? (That will run 'npm install -D @webpack-cli/generators') (Y/n) y
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated

added 493 packages, and audited 1953 packages in 39s

219 packages are looking for funding
  run `npm fund` for details

17 vulnerabilities (3 moderate, 9 high, 5 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
? Which of the following JS solutions do you want to use? ES6
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? Yes
? Which of the following CSS solutions do you want to use? SASS
? Will you be using CSS styles along with SASS in your project? Yes
? Will you be using PostCSS in your project? Yes
? Do you want to extract CSS for every file? Yes
? Do you like to install prettier to format generated configuration? Yes
? Pick a package manager: npm
[webpack-cli] ℹ INFO  Initialising project...
 conflict package.json
? Overwrite package.json? overwrite
    force package.json
 conflict src/index.js
? Overwrite src/index.js? overwrite
    force src/index.js
 conflict README.md
? Overwrite README.md? overwrite
    force README.md
   create index.html
   create webpack.config.js
   create .babelrc
   create postcss.config.js
npm WARN idealTree Removing dependencies.webpack in favor of devDependencies.webpack
npm WARN idealTree Removing dependencies.webpack-cli in favor of devDependencies.webpack-cli
npm WARN idealTree Removing dependencies.babel-loader in favor of devDependencies.babel-loader
npm WARN idealTree Removing dependencies.@babel/core in favor of devDependencies.@babel/core
npm WARN idealTree Removing dependencies.@babel/preset-env in favor of devDependencies.@babel/preset-env

added 5 packages, changed 2 packages, and audited 1958 packages in 9s

222 packages are looking for funding
  run `npm fund` for details

17 vulnerabilities (3 moderate, 9 high, 5 critical)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
[webpack-cli] Project has been initialised with webpack!
[noah@Qyain my-app]$

SO I GOT IT STARTED BUT I WANT TO ADD DEV TOOLS TO THE FOLLOWING:

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");

const isProduction = process.env.NODE_ENV == "production";

const stylesHandler = MiniCssExtractPlugin.loader;

const config = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  devServer: {
    open: true,
    host: "localhost",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html",
    }),

    new MiniCssExtractPlugin(),

    // Add your plugins here
    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        loader: "babel-loader",
      },
      {
        test: /\.s[ac]ss$/i,
        use: [stylesHandler, "css-loader", "postcss-loader", "sass-loader"],
      },
      {
        test: /\.css$/i,
        use: [stylesHandler, "css-loader", "postcss-loader"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
};

module.exports = () => {
  if (isProduction) {
    config.mode = "production";

    config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
  } else {
    config.mode = "development";
  }

  return config;
};

How do I do so and in what case would I add dev tools. What are dev tools exactly with respect to webpack, react and the entire front end?

Does this answer your question? [Error message "error:0308010C:digital envelope routines::unsupported"](https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported) — Cursed, Jun 24 '22 at 13:58

score 0 · Accepted Answer · answered Jun 24 '22 at 18:23

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");

const isProduction = process.env.NODE_ENV == "production";

const config = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  devServer: {
    open: true,
    host: "localhost",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html",
    }),

    // Add your plugins here
    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        loader: "babel-loader",
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
};

module.exports = () => {
  if (isProduction) {
    config.mode = "production";

    config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
  } else {
    config.mode = "development";
  }
  return config;
};

I generated a webpack.config and even though it did not answer my original question it goes with out saying that RESTARTING the creation of a rect app after uninstalling node18, installing node 16 and then following the above steps will create a full production environment in React and should solve the previous issues. STILL THERE ARE MANY SEVERE VULNERABILITIES -- SUGGESTIONS ON HOW TO ADDRESS THESE ISSUES WILL BE WELCOMED!

React not starting server due to webpack and deprecated software I believe [Summary: What are dev tools and how can I add it to my app?]

1 Answers1