The `.babelrc` file is unable to locate presets within a nested node_modules directory

My file structure is organized as follows:

> build
    > node_modules
    > webpack.config.js
> .babelrc
> .gitignore

In my .babelrc file, the configuration appears like this:

{
    "presets": ["es2015", "stage-0", "react"]
}

However, I am encountering an error message that states...

Module build failed: Error: Couldn't find preset "es2015" relative to directory

Is there a way to specify the path to the node_modules directory within the .babelrc file? Or any other suggestions on resolving this issue?

  • Regrettably, relocating the node_modules folder to the root directory is not an option.

Answer №1

Regrettably, the current version of .babelrc does not offer a way to manipulate how Babel loads modules. However, there are various workarounds available to address this issue.

Babel has the capability to accept both strings and (module) objects as presets and plugins. This means you can either provide the module's name (causing Babel to attempt resolving and loading it using its internal mechanism), or load the module yourself and directly pass it to Babel.

The challenge arises when using .babelrc since it is JSON, allowing solely the passing of the module's name and thereby subjecting you to Babel's default module-loading procedure.

If you employ webpack, you have the option to completely abandon the use of .babelrc and instead pass options to Babel within the webpack configuration, similar to:

query: {
  presets: [
    'babel-preset-es2015',
    'babel-preset-react',
    'babel-preset-stage-0',
  ].map(require.resolve),
}

Refer to: How to set resolve for babel-loader presets

If working directly with Babel in your code, you can still utilize .babelrc, but adjust the code responsible for interpreting it to load the presets and plugins by hand.

For instance, if you currently have the following code snippet reading .babelrc:

var fs = require('fs');
var babelrc = fs.readFileSync('./.babelrc');
var config = JSON.parse(babelrc);

require('babel-core/register')(config);

You could modify it to something like:

var fs = require('fs');
var babelrc = fs.readFileSync('./.babelrc');
var config = JSON.parse(babelrc);

config.presets = config.presets.map(function(preset) {
  return require.resolve('babel-preset-' + preset);
});
config.plugins = config.plugins.map(function(plugin) {
  return require.resolve('babel-plugin-' + plugin);
});

require('babel-core/register')(config);

Answer №2

If you're searching for the resolve attribute within webpack, look no further:

The resolve feature allows you to specify where your modules are sourced from:

resolve: {
    modulesDirectories: ['build/node_modules']
},

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

Is there a way to allow for clicking on a row to redirect to a new tab and display the data of the selected row?

Currently, I am working with mui-datatable and trying to figure out how to enable the user to be directed to another page simply by clicking on a row. Additionally, I need the data of that specific row to be passed along to the new page as well. The error ...

Extract table information from MuiDataTable

I am having trouble retrieving the row data from MuiDataTable. When I try to set the index from the onRowSelectionChange function to a state, it causes my checkbox animation to stop working. Below is how my options are currently configured: const option ...

Steps for appending a string to a variable

Currently working on creating a price configurator for a new lighting system within homes using Angular 7. Instead of using TypeScript and sass, I'm coding it in plain JavaScript. Page 1: The user will choose between a new building or an existing one ...

What is the best way to transfer a querystring received in Node.js to a page being shown through res.render?

I have a nodejs file where I am rendering a page named foo.html. Within foo.html, I am using ajax to retrieve variables from a querystring and load an appropriate xml document based on those variables. The issue arises when I run my nodejs server, which is ...

Launching the Node.js application on Heroku resulted in encountering an issue: "Application error - There was a problem within the application

When I access the browser using http://localhost:8080/, I can see the message Hello World with Express. I am currently trying to deploy this application on Heroku. I have followed the tutorial provided by Heroku. 1) Create a new app 2) Choose an App name ...

utilize a Node module in React

After installing react-awesome-query-builder from branch antd-3, I encountered an error upon importing it in my React file. The error message reads: import {Query, Builder, Utils as QbUtils} from 'react-awesome-query-builder'; Error : Failed to ...

Establish the default bootstrap theme mode specifically for print formatting

Customizing the theme in Bootstrap is made easy by setting the data-bs-theme attribute on the body or parent element. While this feature is useful, we discovered that printing in light mode produces the best results. Instead of creating an entire set of st ...

Accessing a subcollection with DocumentSnapshot in Firebase using JS9

Just had a quick question. Is anyone familiar with how to achieve something similar using Firebase JavaScript v9? Essentially, I have a `userDoc` that is a DocumentSnapshot and I need to access a sub-collection with the document snapshot. Here's the c ...

Skipping an iteration in ng-repeat in Angular 1.0.8: A simple guide

Is it possible to skip a particular iteration in ng-repeat without modifying the underlying array/object being iterated over? Consider the following example: var steps = [ { enabled: true }, { enabled: true }, { ...

Assistance required for activating an unidentified function or plugin within a Chrome extension

I am currently working on a project involving a chrome extension designed to automate tasks on a specific website. My main focus right now is trying to trigger the click event of a link that has an event handler set up through an anonymous function as show ...

Transform yaml strings into JSON entities

We are facing a challenge with two separate codebases that have different localization styles. One codebase uses yaml, while the other uses JSON. Currently, we are working on transitioning to the JSON-based codebase. However, with 20k yaml strings and sup ...

@vx/enhanced responsiveness with TypeScript

I am currently utilizing the @vx/responsive library in an attempt to retrieve the width of a parent component. Below are snippets from my code: import * as React from 'react' import { inject, observer } from 'mobx-react' import { IGlob ...

Having issues with installing serialport using npm

Encountering warnings while attempting to install serialport: sudo npm install serialport --save npm WARN EPACKAGEJSON <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6879482938f8889a6d7c8d6c8d6">[email protected]< ...

Accessing the value of a hidden field within an ng-repeat loop when binding to an HTML table

I am working on a project where I have an HTML table with data being bound from AngularJS. The structure looks something like this: <tr ng-repeat="item in List| filter: { MachineType: 'Physical' }"> <td>{{item.MachineType}}< ...

Accessing form data within Mongoose schema hooks via JavaScript

I have a form where I've split the content into two separate MongoDB schemas. I want to access variables that are within node.js/express.js directly in mongoose schema hooks, whether through pre or post hooks of the schema. Here are my files: expres ...

Error: The PDFJS variable is not recognized when trying to load a PDF file

I've been experimenting with pdf.js to load PDFs into a web application in order to extract information in real-time. However, I keep encountering an error even with a simple example. I've attempted enclosing the code in $(document).ready() as a ...

Having a problem with `npm update` not fetching the latest commit from the GitHub repository

In one of my project packages, there is a dependency on an internal npm repository. { "dependencies": { "my-library": "git+ssh://<gitrepo>#dist" } } The 'dist' branch is the source for this package. Wh ...

The Link tag in Next.js may have issues in production, but functions properly when tested locally

nex config babelrc home page Having issues with my link tag despite trying various solutions. I am utilizing Next Js with Ant design While running locally, the "Go-to Shop" button link functions properly (redirecting to the shop page). However, ...

Mixing box-shadow and blur filters can result in unusual artifacts appearing in Webkit browsers

Recently, I encountered an intriguing and frustrating bug in WebKit browsers. Consider a scenario where there is a parent DIV (let's say .wrapper) and a child DIV (.main). You apply a box-shadow on the .main DIV and a blur filter on the .wrapper DIV. ...

The Angular Date Pipe is currently unable to display solely the Month and Year; it instead presents the complete date, including day, month,

I'm currently using the Bootstrap input date feature to save a new Date from a dialog box. However, I only want to display the month and year when showing the date. Even though I added a pipe to show just the month and year, it still displays the mont ...