Oops! Looks like the module '@babel/plugin-proposal-class-properties' is nowhere to be found

Issue with CLI (require stack):

- C:\As Sunnah Store\as_sunnah_client\node_modules\@babel\preset-env\lib\available-plugins.js
- C:\As Sunnah Store\as_sunnah_client\node_modules\@babel\preset-env\lib\filter-items.js
- C:\As Sunnah Store\as_sunnah_client\node_modules\@babel\preset-env\lib\index.js
- C:\As Sunnah Store\as_sunnah_client\node_modules\workbox-build\build\lib\bundle.js
- C:\As Sunnah Store\as_sunnah_client\node_modules\workbox-webpack-plugin\build\generate-sw.js
- C:\As Sunnah Store\as_sunnah_client\node_modules\workbox-webpack-plugin\build\index.js
- C:\As Sunnah Store\as_sunnah_client\node_modules\react-scripts\config\webpack.config.js
- C:\As Sunnah Store\as_sunnah_client\node_modules\react-scripts\scripts\start.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\As Sunnah Store\as_sunnah_client\node_modules\@babel\preset-env\lib\available-plugins.js:40:38)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\As Sunnah Store\\as_sunnah_client\\node_modules\\@babel\\preset-env\\lib\\available-plugins.js',
    'C:\\As Sunnah Store\\as_sunnah_client\\node_modules\\@babel\\preset-env\\lib\\filter-items.js',
    'C:\\As Sunnah Store\\as_sunnah_client\\node_modules\\@babel\\preset-env\\lib\\index.js',
    'C:\\As Sunnah Store\\as_sunnah_client\\node_modules\\workbox-build\\build\\lib\\bundle.js',
    'C:\\As Sunnah Store\\as_sunnah_client\\node_modules\\workbox-webpack-plugin\\build\\generate-sw.js',
    'C:\\As Sunnah Store\\as_sunnah_client\\node_modules\\workbox-webpack-plugin\\build\\index.js',
    'C:\\As Sunnah Store\\as_sunnah_client\\node_modules\\react-scripts\\config\\webpack.config.js',
    'C:\\As Sunnah Store\\as_sunnah_client\\node_modules\\react-scripts\\scripts\\start.js'
  ]
}

What steps should I take to resolve this issue?

Answer №1

If Babel is already installed on your system

Check the directory for the file that lists your installed packages, and ensure that the symbol: @ precedes the babel import. Make sure the package versions are compatible.

Example :

"@babel/core": "^7.10.1"

If Babel has not been installed yet

Open your terminal and enter the following command to install the latest version:

npm install --save-dev @babel/plugin-proposal-class-properties

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

Creating multiple instances in ReactJS: A step-by-step guide

Having trouble figuring out how to add multiple jockeys to a racing program using this jockey program. It was working fine with just one jockey, but as soon as I try to add a second or multiple jockeys, issues arise. Where is the logic going wrong? App.js ...

Managed inputs versus FormData API

Recently, I came across a fascinating article that has the potential to revolutionize how web form submissions are handled in ReactJS moving forward. Check it out: https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f What ar ...

Trouble with triggering events from Datatable buttons

Below is the code snippet I am currently using for my DataTable : var oTable12= $('#example').DataTable({ "aaData": tableData, "aLengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]], "iDisplayLength": 5, "aoColumnDefs ...

When I try to run "npm start" with node-webkit, it seems like the script specified in my package.json manifest file is not being

After running npm start in the terminal, I encountered the following error message: PS C:\Users\finsa\OneDrive\Documents\UNI\Web Development\NS_Music_App> npm start > <a href="/cdn-cgi/l/email-protection" class= ...

Issue with npm installation process within the VS Code IDE

Encountering an error while trying to install npm npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe939f8a9b8c979f92d39391939b908ad39f9a9f8e8a9b8cb ...

Instructions on adding a file path to the package.json file

Is it possible to create a script in the package.json file that allows me to run a file located in the parent folder of the package.json file, rather than the same directory? I would like the syntax to be similar to this: "scripts": { "server": " ...

Using PHP to submit a form depending on user selection

Currently, I am working on a basic input form page that includes a submit button. The goal is to have the data from the form written into my MySQL database based on the user's selection. For instance, if the user chooses option X, I want the input da ...

Integrate the CKEditor into your Laravel 8 project using Composer

I am currently attempting to integrate CKEditor into my Laravel 8 project using composer. However, when I execute the following command: $ composer require unisharp/laravel-ckeditor I encounter the following errors: Using version ^4.7 for unisharp/laravel ...

The error "Cannot set headers after they are sent" is causing issues with the functionality of the Express session

Ensuring secure authentication for my Node.js application is a top priority. I have implemented the use of express-session npm to achieve this goal. The idea is that upon successful login on the /login page, a session should be initiated and the user shoul ...

Add HTML to the nearest div containing a specific class when a button is clicked using JavaScript and jQuery

Here is the HTML setup I'm working with: <div class='form-row'> <div class='col-2'> Blah Blah </div> <div class='col-4'> <button type='button' class=' ...

Is it necessary to configure Webpack or use a plugin to remove console.log() statements by default in an Angular Application, or does it do so automatically?

Welcome to my first post! I hope I can effectively communicate the question and the background that led me to ask it. I am relatively new to web programming, with about 1 and a half years of experience working with Java, JavaScript, and TypeScript using An ...

In JavaScript, you can update the class named "active" to become the active attribute for a link

My current menu uses superfish, but it lacks an active class to highlight the current page tab. To rectify this, I implemented the following JavaScript code. <script type="text/javascript"> var path = window.location.pathname.split('/'); p ...

Tips for preventing repetition of code in multiple entry points in Rollup

My goal is to use rollup to process a group of input files and generate multiple output files in the dist directory that all have some common code shared between them. Below is my current rollup configuration: import path from 'path'; import pat ...

What is the best way to convert Decimal numbers (including decimal points) into Hexadecimal Strings using javascript?

I'm attempting to change a decimal value with a decimal point into a hexadecimal string: Decimal: 0.01 Hexadecimal: 3C23D70A I am struggling to convert 0.01 to 3C23D70A in JavaScript, as using .toString(16) only gives me back 0. Does anyone have a s ...

Deliver feedback from NodeJS Server to JavaScript on the client side

I have set up an HTTP server in NodeJS by utilizing the http.createServer(...) method. In my client-side JavaScript file, I sent a query using the POST method to the localhost URL. The server effectively received the data from the client, but now I am enco ...

maintain ajax history during jquery redirection

Currently, I am designing a compact application using php, jquery, and ajax. The purpose of this app is to enable users to conduct customer searches, view customer details, and easily navigate back to the search page without losing any data. To enhance use ...

Guide to switching accordion with Javascript and jquery

Currently, I am facing an issue with my accordion where it does not toggle as expected. Ideally, when I click on the same accordion header, it should close along with opening a new one. While clicking on a different header closes the previous one successfu ...

What is the best way to access the value of a child element using $event within AngularJS?

Utilizing $event.currentTarget to access the element on ng-click: <div ng-click="eventHandler($event)" class="bg-master m-b-10" id="slider-tooltips" nouislider=""></div> Upon inspecting my controller&apo ...

How can I ensure that my rendering only occurs after a full input has been entered? Implementing a delayed render() in ReactJS

Im working on a form that includes Controlled Component text inputs: <input type="text" onChange={(e) => this.props.changeBusiness(e)}/> I'm thinking of rendering the above text input in a separate component. It would be great if I could re ...

Encountering errors like 'No space left on device' when running multiple npm install commands simultaneously in the background using Bash

I am in the process of setting up docker on a Google Cloud Compute machine with 1 vCPU and 3.75 GB RAM. Running docker-compose up --build works, but it's slow because the process is sequential. To speed things up, I've created a bash script to b ...