When I ran npm run build, I encountered numerous errors

I'm overwhelmed with numerous errors and not sure where to even begin.

Error Log

> webpack

[webpack-cli] The configuration object for webpack is invalid. It seems that the configuration object does not match the API schema.
 - configuration.module.rules[1] should be one of the following:
   ["..." | object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]
   -> A rule.
   Details:
    * configuration.module.rules[1].loader must be a non-empty string.
      -> A loader request.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f68493979582a992849f9a9ab6c7d8c6d8c6">[email protected]</a> build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! The build script for <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dba9bebab8af84bfa9b2b7b79beaf5ebf5eb">[email protected]</a> has failed.
npm ERR! This issue is most likely not related to npm. There might be additional logging information above.

npm ERR! You can find a detailed log of this run at:
npm ERR!     /Users/yamaguchishuuhei/.npm/_logs/2021-08-28T17_30_34_922Z-debug.log

package.json

{
  "name": "react_drill",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "repository": {
    "type": "git",
   omitted

webpack.config.js

module.exports = {
    entry: {
      app: "./src/index.js"
    },
    output: {
      path: __dirname + '/public/js',
      filename: "[name].js"
    },
      devServer: {
      contentBase: __dirname + '/public',
      port: 8080,
      publicPath: '/js/'
    },
    devtool: "eval-source-map",
    mode: 'development',
    module: {
      rules: [{
        test: /\.js$/,
        enforce: "pre",
        exclude: /node_modules/,
        loader: "eslint-loader"
      }, {
        test: /\.css$/,
        loader: ["style-loader","css-loader"]
      }, {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
       }]
    }
  };

Answer №1

It appears that your webpack.config.js file is not correctly formatted. The issue lies in the fact that rule.loader does not support passing in an array. Instead, you should use the use property as demonstrated below:

module.exports = {
    entry: {
      app: "./src/index.js"
    },
    output: {
      path: __dirname + '/public/js',
      filename: "[name].js"
    },
      devServer: {
      contentBase: __dirname + '/public',
      port: 8080,
      publicPath: '/js/'
    },
    devtool: "eval-source-map",
    mode: 'development',
    module: {
      rules: [{
        test: /\.js$/,
        enforce: "pre",
        exclude: /node_modules/,
        loader: "eslint-loader"
      }, {
        test: /\.css$/,
        use: ["style-loader","css-loader"]
      }, {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
       }]
    }
  };

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

If the text is too lengthy, enclose it within a div element

I am facing an issue with a fixed width DIV of 300px. Within this DIV, I have dynamic text that sometimes exceeds the width and gets cut off. Is there a way to make the text wrap when it exceeds the 300px limit without increasing the height of the DIV? Is ...

Troubleshooting error when integrating Power BI with Angular: Module 'powerbi-client-angular' not found or its type declarations

Encountered an error at: import { PowerBIEmbedModule } from "powerbi-client-angular"; error: Cannot find module 'powerbi-client-angular' or its corresponding type declarations `import { NgModule } from '@angular/core';import ...

Six Material-UI TextFields sharing a single label

Is there a way to create 6 MUI TextField components for entering 6 numbers separated by dots, all enclosed within one common label 'Code Number' inside a single FormControl? The issue here is that the label currently appears only in the first tex ...

Utilize Javascript to convert centimeters into inches

Can anyone help me with a JavaScript function that accurately converts CM to IN? I've been using the code below: function toFeet(n) { var realFeet = ((n*0.393700) / 12); var feet = Math.floor(realFeet); var inches = Math.round(10*((realFeet ...

Modify the background color of a div by selecting a hex code from a dropdown menu

Is there a way to utilize jQuery in order to alter the background of a <div> by choosing the HEX code from a separate dropdown menu? HTML <select id="target"> <option value="#c2c2c2">Grey</option> <option value="blue">Bl ...

Failed to parse module: Encountered an unexpected token while using babel-loader with BABEL_ENV set to development

I recently encountered an issue with my React project using webpack when I added the @superset-ui/embedded-sdk library via yarn. While the production build runs smoothly, the development build fails to compile. Since I am not very familiar with webpack, it ...

Compiling TypeScript to JavaScript with Deno

Currently experimenting with Deno projects and looking for a way to transpile TypeScript into JavaScript to execute in the browser (given that TS is not supported directly). In my previous experience with NodeJS, I relied on installing the tsc compiler via ...

Troubleshooting Cross-Origin Read Blocking with the Google Maps Elevation API using Axios in a Vue.js Application

I'm currently working on integrating the Google Maps API into a Vue.js project. I've encountered an issue with two Google Maps services: - The Time Zone API is functioning properly. - However, the Elevation API is giving me a Cross-Origin Read Bl ...

Unexpected syntax error encountered when shutting down the route, unable to recover

const express = require('express'); const app = express(); const bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.get('/split/name', (req, res) => ...

The carousel spun around, each section moving to the side on its own

One issue I'm facing is that on my page, I have multiple carousel rows. However, when I click on the "next" or "prev" button to navigate through the items in the carousel, it affects all carousels instead of just the one I clicked on. I've attem ...

How would you utilize jQuery to access the "option" array of a select control with the attribute of multiple=true by utilizing the find() method?

When using jquery, I am attempting to access selected items from a select control that has multiple=true. My goal is to reference them by name criteria and then iterate through the list. Below is my current code snippet: var currentRow = $(this); // sele ...

Delete a filename in Internet Explorer with the power of JavaScript and jQuery

In my attempts to clear the file input field in IE using $('#files').val('');, I found that it was not effective. $('#uploadimgdiv').html(''); var fil1 = document.getElementById("files"); $('#fil1').val(&a ...

I encountered an error of "Unexpected token '>'" while working with an

My code includes an ajax call and utilizes promises in the function: element.on("keypress", ".keyEvents", function(event) { if (event.which == 13) { // create the url and json object var putUrl = ...

Using JavaScript to transfer HTML entities as a function parameter

Is it possible to pass HTML entities as function parameters in JavaScript? I am developing a React application and I need to transmit HTML entities from the parent component to the child component as a property, and then exhibit the character represented ...

In React.js, the switch case statement consistently defaults to the default case

Currently, I am working on utilizing <select> tags to update information across components using useContext(). However, I am encountering an issue where the default case is consistently being returned despite the fact that the logged values match the ...

Steps to display a full-page loader/spinner prior to the completion of loading a React application

What is the best way to create a full-page loader/spinner that will be displayed until a React (or other JS-based framework) app is fully loaded? By "fully loaded," I mean when the browser's spinner stops spinning. I have experience creating loaders ...

Show the current temperature data retrieved from the weather API

I'm trying to figure out what's causing the issue with the temperature not displaying. Can anyone help me identify and fix the error? <script type="text/javascript"> $.ajax({ url: 'https://api.weather.gov/gridpoints/EWX ...

Filtering objects by their properties or attributes in AngularJS can be achieved by using forEach, but encountering an error stating "forEach is

In my AngularJS application, I have a page that displays multiple widgets. One widget shows a table with details about a monitored system. Currently, the table has two columns: 'Type' and 'Data', displaying information and values respec ...

Randomize checkbox selection using Javascript and Bootstrap

I'm in a bit of a bind with my webpage and could really use some help to figure it out. Here's the issue: On my website, there's a table of players. Each player has two checkboxes on their line: one to show if they are active (checked), and ...

What is the best way to avoid duplicating this JQM function multiple times and instead reuse it efficiently?

After coming across this interactive demo, I successfully implemented it on my website using JQM. However, in order to activate the panel swipe feature, I had to include the following function: $( document ).on( "pagecreate", "#demo-page", function() { ...