Error: The selected module is not a valid top-level option

I am facing an issue while using the babel-loader. I have removed all irrelevant code and just kept the error-related portion. What could be causing this problem?

module.exports = merge(baseWebpackConfig, {
    ...
    module: {
        rules: [
            {
                test: /\.[jt]s$/,
                use: [
                    'babel-loader'
                ],
                exclude: /node_modules/
            }
        ]
    }
})

ERROR in ./src/index.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/eterna/workspaces/experiments/neoteric/src/index.ts: Invalid Option: module is not a valid top-level option.
        Maybe you meant to use 'modules'? (While processing: "/Users/eterna/workspaces/experiments/neoteric/node_modules/@babel/preset-env/lib/index.js")
...
    at async.call.result.err.err (/Users/eterna/workspaces/experiments/neoteric/node_modules/gensync/index.js:216:11)

package.json

"babel-loader": "^8.1.0",
"@babel/preset-env": "^7.11.5",
"webpack": "^4.44.2",
"webpack-merge": "^5.1.4"
typescriptwebpackbabeljs

Answer №1

The issue I encountered was in the ~/project directory, where I discovered an outdated version of @babel/preset-env within the ~/node_modules folder as well.

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

When attempting to utilize the dispatch function in a class-based component, an invalid hook call error may

I am a beginner with react-redux. I currently have this code that uses react, redux, and TypeScript. The code utilizes a class-based component and I am attempting to use dispatch to trigger an action to increment the value of counter. However, I encountere ...

reactjstypescriptreduxreact-redux

What is the process for releasing an npm package without relying on any babel dependencies?

I am currently working on a npm project called moduleA which I plan to publish to the npm registry. This project utilizes javascript along with webpack4 and babel7. While moduleA functions properly on its own, I encountered some issues with babel when atte ...

node.jsnpmbabeljs

Using React-Bootstrap with TypeScript in your project

I'm currently working on creating a navigation bar using react-bootstrap. I've already installed the node-module as follows: "@types/react-bootstrap": "^0.32.11",. However, when I try to use it in my hello.tsx component, I encounter a compile err ...

reactjstypescriptreact-bootstrap

Using Handlebars.js with Angular CLI versions 6 and above: A Step-by-Step Guide

Looking to create a customizable customer letter in either plain text or HTML format that can be edited further by the customer. Considering using Handlebars.js to render an HTML template with mustache tags, using a JSON object for business information. T ...

angulartypescripthandlebars.jsangular-climustache

Is it a good idea to separate TypeScript types into their own package?

In my React/TypeScript application, I have approximately 100 files where various types are declared. I am looking for a simpler and more automated approach to extract all these types into a separate package. Is there a method other than manually copying ...

typescript

Utilize the TypeScript Compiler API to extract the Type Alias Declaration Node from a Type Reference Node

Currently, I am utilizing ts-morph library which makes use of the TS Compiler API. Here is an example of my code: export type Foo = string export const foo: Foo = 'bar' Whenever I try to find the type for the export of foo, it returns string. H ...

typescripttsctypescript-compiler-api

Switching the Checkbox Data Binding Feature in Angular

I am looking to send a value based on a toggle switch checkbox selection between Hourly or Salary. How can I incorporate this into the form below? html <div class="row"> <div class="col-sm-6"> <div cl ...

angulartypescript

Angular encountered an error when trying to access the property "fruits" of an undefined object

When working with Angular, I encountered an issue where I received the error message "cannot read property 'fruits' of undefined." Within my class definition, I have included the following: export class MyClass implements OnInit { fruits: any[] ...

arraysangulartypescriptangular7

Adding a fresh element to an array in Angular 4 using an observable

I am currently working on a page that showcases a list of locations, with the ability to click on each location and display the corresponding assets. Here is how I have structured the template: <li *ngFor="let location of locations" (click)="se ...

javascriptarraysangulartypescriptobservable

Ways to generate an Angular 7 component

Seeking guidance on creating an angular 7 component. I have forked a jsFiddle at this link: https://jsfiddle.net/gauravshrestha/fdxsywLv/. The chart in the fiddle allows data points to be dragged up and down. My goal is to convert this into a component whe ...

javascriptangulartypescriptchart.js

Where can I find the @types for a specific lodash package?

Seeking to utilize a specific function from lodash - assignin. I have successfully installed lodash.assignin and incorporated it into my project: import assignIn = require('lodash.assignin'); However, when compiling, an error occurs: "error TS2 ...

javascripttypescriptnpmlodash

Dealing with GraphQL mutation errors without relying on the Apollo onError() function

When managing access to an API call server-side, I am throwing a 403 Forbidden error. While trying to catch the GraphQL error for a mutation, I experimented with various methods. (Method #1 successfully catches errors for useQuery()) const [m, { error }] ...

javascripttypescriptreact-nativegraphqlapollo

Angular Material Popup - Interactive Map from AGM

I am in the process of developing a material dialog to collect user location information using AGM (angular google maps). I have successfully implemented a map on my main page, but when the dialog is opened, it only shows a blank space instead of the map. ...

javascriptcssangulartypescriptangular-google-maps

Guide on how to update an array within typed angular reactive forms

I'm currently working on finding a solution for patching a form array in a strongly-typed reactive Angular form. I've noticed that patchValue and setValue don't consistently work as expected with FormControl. Here's an example of the fo ...

arraysangulartypescriptangular-reactive-formsstrong-typing

Setting up Why Did You Render with NextJS 12: A step-by-step guide

One notable feature of Next.JS is its use of babel in configuring the Why Did You Render. module.exports = function (api) { const isServer = api.caller((caller) => caller?.isServer) const isCallerDevelopment = api.caller((caller) => caller?.i ...

reactjsnext.jsbabeljsrerenderswc-compiler

Creating a personalized NPM package: Converting and exporting TypeScript definitions

Question: Do I need to adjust my TS configuration or add a TS build step? I recently developed a new npm package: Custom-NPM-Package / - src -- index.js -- index.d.ts -- IType.ts accompanied by this tsconfig.json: { "compilerOptions" ...

node.jsreactjstypescriptnpm

What is the process for setting up a node test launch configuration?

I have some "node 18 test runner" tests ready to be executed. I can run them using the following command: node --loader tsx --test tests/**/*.ts To debug these tests in vscode, I realized that I need to set up a configuration entry in my launch.json. But ...

node.jstypescriptvisual-studio-codetesting

Angular makes it easy to extract multiple parameters from a URL

In the process of developing a basic Angular application using TypeScript, I have encountered an issue. Within my project, there is a URL structure like this: www.example.com/api/1/countries/Italy/ My goal is to extract the values 1 and Italy from this U ...

angularurltypescript

What is the best way to implement a dynamic back button in Next.js?

Being familiar with creating a standard back button, I am now eager to craft one that directs the user back by one step in the URL rather than returning to the previous page. This way, I can utilize the button in various locations without needing to alter ...

reactjstypescriptnext.jsurl-routing

How do I adjust brightness and contrast filters on a base64 URL?

When presented with an image in base64 format like this: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDAAwfqNRk/rjcYX+PxrV/wtWqwJSTlboMgAAAABJRU5ErkJggg== What is the most efficient method to programmatically alter a filter (such as brightness or cont ...

javascripttypescriptimage-processingcss-filters