Encountering Babel issues while incorporating npm package into React Native project

Currently, I am developing a React Native application.

In an attempt to enhance my application, I decided to incorporate the npm package available at this link: https://github.com/MagicTheGathering/mtg-sdk-javascript/

Despite trying various import statements like import { card } from 'mtgsdk';, none seem to be working as intended.

The error that keeps popping up is as follows:

TransformError: /myproject/node_modules/mtgsdk/lib/index.js: Couldn't find preset "es2015" relative to directory /myproject/node_modules_mtgsdk

I am seeking guidance on the correct method of importing this package into my project. What aspect am I missing in terms of imports within javascript?

javascriptnpmreact-native

Answer №1

Your Babel might not be aware of the specific plugins you plan to use.

To address this, it's recommended to include a .babelrc file at the root of your project with the following configuration:

{
  "presets": ["es2015"]
}

Also, remember to run the command:

npm install babel-preset-es2015 --save-dev

This should hopefully resolve any issues you encounter with Babel.

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

Error encountered during deployment on Heroku - package xi.pc not found

I've been working on deploying my node.js app through Heroku, but I keep running into an error message that says Package xi was not found in the pkg-config search path. I've attempted to find it on my drive and tried to work around it by adjus ...

node.jsgitnpmherokuheroku-cli

Save all dynamically received data from a form in PHP as an array

I have developed a PHP form that dynamically adds new text variables in this manner: <form action="" enctype=”multipart/form-data” method="post" action="<?php echo $_SERVER['REQUEST_URI'];?>"> <div id="div"> va ...

javascriptphpappend

Centralized platform for accessing node and npm installers that adhere to Nexus standards

I am searching for a nexus-compliant repository where I can find a node installer that aligns with Nexus guidelines (an alternative to http://nodejs.org/dist/). Situation : In our Java environment, Maven handles our builds. We recently integrated a JavaS ...

node.jsmavennpmnexuspackage-managers

In React, the functionality of rendering components conditionally is not functioning properly

I am looking to conditionally display either the Login component or Menubar component based on the value of the isLogin state. If the isLogin state is false, I want to render the login page. If it is true, I want to render the Menubar page. To achieve thi ...

javascriptreactjsif-statement

Updating JSON dependencies in NPM and manually fixing vulnerabilities

After spending a day trying to manually fix multiple high vulnerabilities, I realized it was a futile effort. Despite reading numerous posts, blogs, and suggestions, I couldn't resolve the issue. The root cause seems to be that /css-what requires an ...

node.jssecuritynpmdependenciespackage.json

Increasing the checkout date by one day: A step-by-step guide

I am looking to extend the checkout period by adding 1 more day, ensuring that the end date is always greater than the start date. Below are my custom codes for implementing the bootstrap datepicker: $(function() { $('#datetimepicker1').da ...

javascriptjqueryhtmlbootstrap-datepicker

Exiting a NodeJs function entirely rather than just returning from an internal function

There is a function in my code app.post('/assignment/loan', (req, res) => { Within that function, there is another function db.run('SELECT loanable FROM book WHERE id=?',[bookID],(err,row)=>{ I tried using return but it only exi ...

javascriptnode.jssqliteexpress

The function findOne from Mongoose seems to be non-existent, all while utilizing the Passport library

Whenever I try to implement my local strategy using the passport lib, I keep encountering this error. TypeError: UserModel.findOne is not a function I've spent hours searching for a solution that addresses this issue but haven't been successful ...

javascriptnode.jsmongodbexpressmongoose

I'm having trouble with npm install, it's not working as expected

After downloading node.js, I encountered errors when trying to run the CLI command npm install -g @angular/cli: npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND npm ERR! network request to http://registry.npmjs.org/@angular%2fcli failed, reason: getaddrin ...

node.jsangularnpm

Is it possible to pass an HTML element's id attribute to a function in JavaScript?

In the following code snippet, I am looking to send the id=content to the function mr and then display the result in the passed id=result. While this functionality is currently limited to this HTML file, I aim to extend it to other HTML pages by adding the ...

phpjavascriptajaxxmlhttprequest

Stop the Sidebar from showing up on certain pages with Next.js

Currently, I am facing a small issue with my application. The problem lies in the sidebar that appears on my login.jsx page when I specifically do not want it there. However, I would like it to appear on all other pages except for this one. Is there a cond ...

javascriptreactjsnext.js

What is the functioning process of the angular method decorator?

The tutorial on creating custom decorators in Angular introduces a throttle decorator that utilizes the lodash throttle function. The implementation of this decorator can be seen below: import t from 'lodash.throttle'; export function throttle( ...

javascriptangularangular-decorator

Switching on the click functionality

I was able to successfully toggle a boolean variable along with some other options. However, I encountered an issue when trying to create another click function for a different button to set the boolean variable to false. Here is my code: let manageme ...

javascripthtml

Extracting data from the response object and injecting it into the request

Once the file has been successfully uploaded, the 'uploadSuccess' callback event is triggered, providing information about the newly created media. The 'hashed_id' value within this object is crucial for my PUT request. I attempted to ...

javascriptjqueryjsonajax

Error: The property 'send' cannot be read because it is undefined - Node.js

We have integrated a Node.js package called springedge to handle SMS functionality in our project: npm install springedge Below is the code snippet from the file send_messages.js: var springedge = require('springedge'); var params = { &apos ...

node.jsnpm

Bringing Angular ECharts into a Stackblitz 15.1 setup: A How-To Guide

Recently, Stackblitz made a change to use a standalone configuration for Angular Projects. However, when trying to initialize the module for Angular ECharts (ngx-echarts), an error occurred: Error in src/main.ts (18:5) Type 'ModuleWithProviders<Ngx ...

javascriptangularechartsstackblitzngx-echarts

Troubleshooting: Bootstrap Modal in .NET MVC not appearing on screen

Below is the code that manages order quotes and includes an if statement. The objective is to display an error message using TempData and Bootstrap Modal if the product quantity in the order exceeds the stock quantity. However, despite TempData not being n ...

javascript.netasp.net-core-mvcbootstrap-modalbootstrap-5

Issue with updating onclick attribute of popover in Bootstrap 4

My goal is to design a popover in bootstrap 4 with a nested button inside it. However, when I update the data-content attribute of the popover with the button element, the element gets updated but the onclick attribute goes missing. I have experimented wi ...

javascriptjquerybootstrap-4popover

"Encountering a mysterious internal server error 500 in Express JS without any apparent issues in

My express.js routes keep giving me an internal server error 500, and I have tried to console log the variables but nothing is showing up. Here are the express routes: submitStar() { this.app.post("/submitstar", async (req, res) => { ...

javascriptnode.jsexpressblockchain

In Angular 5, a variable's value becomes undefined once it is subscribed to outside of its assigned

I keep encountering an undefined value when trying to assign the subscribed value to a variable in my code snippet below. service.ts getIpAddress() : Observable<any> { return this.http .get(this.Geo_Api) .map((response: ...

javascriptangulartypescriptangular5