Issue: The plugin 0 mentioned in the file "/my dir/node_modules/babel-preset-php/src/index.js" contains an invalid property called "default"

While attempting to convert a PHP script to JavaScript using babel-preset-php, I encountered the following error:

Error: Plugin 0 specified in "/media/deep/5738c180-2397-451b-b0b5-df09b7ad951e1/deepx/Documents/TestingAll/node_modules/babel-preset-php/src/index.js" provided an invalid property of "default" (While processing preset: "/media/deep/5738c180-2397-451b-b0b5-df09b7ad951e1/deepx/Documents/TestingAll/node_modules/babel-preset-php/src/index.js")
    at Plugin.init (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/plugin.js:131:13)
    at Function.normalisePlugin (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:152:12)
    at /usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at /usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
    at /usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)

I installed the preset using npm i -S babel-preset-php. I configured my .babelrc file like this:

{
  "presets": ["php"]
}

In addition, I installed the Babel CLI with npm i -g babel-cli. Then, I created a simple PHP file containing only basic code:

<?php
echo "hello world";

When trying to transpile the PHP file into JS using babel file.php -o file.js, the aforementioned error occurs.


package.json -

{
  "name": "testingall",
  "version": "1.0.0",
  "description": "",
  "main": "script.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.21.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "babel-preset-php": "^2.0.0",
    "body-parser": "^1.19.0",
    "compression": "^1.7.4",
    "cors": "^2.8.5",
    "dotenv": "^9.0.2",
    "express": "^4.17.1",
    "express-rate-limit": "^5.2.6",
    "pug": "^3.0.2",
    "superagent": "^6.1.0"
  }
}

Node version - v12.18.4.

Babel version - 6.26.0 (babel-core 6.26.3)

Any suggestions on how to resolve this issue?

Answer №1

"php-babel-preset": "^2.0.0",

This particular preset is designed for Babel version 7.x. If you are currently using Babel version 6.x, make sure to install

"php-babel-preset": "^1.0.0",

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

Place the text within the contenteditable body of a frame at the specific caret position

Within my iframe object, there is a contenteditable body. I am trying to paste text or HTML elements at the caret position. However, when I attempted this code snippet, I encountered an error message saying Cannot read property 'createRange' of u ...

Struggling to concentrate on a text field following navigation in an AngularJS application

My current project involves working with an AngularJS application where I am facing a challenge in setting the cursor or focus on a specific text box when routing to a page. Despite my attempts using various methods such as setFocus() in JavaScript, autofo ...

Save the selected value in the database when an item is chosen from the drop-down menu

I am currently developing a registration form for storing family details in a database table. One of the fields in my form is a drop-down list for specifying the number of brothers or sisters. <select id="purpose" required="required" name="purpose"> ...

Leverage webpack to dynamically import a specific file depending on the node environment

Currently, I am developing a Vue app using cli 3. However, I have encountered an issue with a third-party front end component that requires a config file. My goal is to use different files based on my node environment, such as tree.production.js and tree.d ...

Enhancing the visual display of a webpage using AngularJS

Hello there! I'm currently working on enhancing an angular 1.6 app and have encountered a dilemma that needs solving. Let me provide some context: The page in question is a lengthy form consisting of thirty questions. The client-side logic includes nu ...

Accessing elements within a ReactJS map structure using the material-ui Selectable List component is not supported

I'm facing a dilemma. Unfortunately, my proficiency in English writing is not up to par... ※Please bear with me as it might be hard to follow. I'm trying to choose the ListItem component, but for some reason, I can't select the ListIt ...

The disparity between two dates is not equal to zero

I have two specific dates stored as datetime1 and datetime2. I am seeking to calculate the duration in between them. However, there is an issue that needs to be addressed: Currently, I determine the difference using the following method: $interval = $date ...

Troubleshooting: Issue with JavaScript Input Validation Functionality

Having trouble with two simple JS functions? One checks the values of 2 input fields and triggers the other function. Check out the code below! function ValidateForm() { var name = document.getElementById('fullname').value; var emai ...

Choose the DIV element based on its data attribute using JSON

When using each(), my goal is to: Hide all divs where the data-infos.grpid = $jQuery(this).data('infos').grpid Show the next div where data-infos.ordre = $jQuery(this).data('infos').next_ordre I am unsure how to apply a "where" ...

Populate an array of objects with various key-value pairs

In my @change method, I receive the following values: changeAttr(id, key, value) { const selections = []; }, id can be any number, key could be: color, size, sex, etc..., and value could be: red, 8, female, etc. Initially, the values might look like ...

Is there a way to ensure that @angular/core is utilizing the most up-to-date version of zone.js in its peerDependencies configuration?

This code passes the test, but there is an issue: it('should successfully retrieve data when getDownloadProgress() is called', (done: DoneFn) => { let response = { 'process': {}, 'success': 'success ...

Ways to execute postinstall script in package.json exclusively on macOS operating system

On my MacOS machine, I need to run the postinstall script to address a temporary issue in react-native-maps: "scripts": { "postinstall": "sed -i '' '/Google.*\\.[h|m]/d' node_modules/react-native-maps/lib/ios/AirMaps.xcodep ...

When I run 'npm start', all I see is a blank screen. My app is not

I'm experiencing a blank page on the home screen. How do I fix this issue? I want to display my frontend and see my website, but instead I'm getting a "Cannot get/" error message. My frontend is built in React.js - how can I connect it with node. ...

What is the best way to enable autocomplete in AngularJS?

I am working with an object that contains both a name and an ID. I want to implement autocomplete functionality based on the name property. Below is the code snippet that I have tried: //Js file var app=angular.module("myapp",[]); app.controller("controll ...

Updating the User Interface in ReactJS based on changes in the state

I am relatively new to ReactJS and I am currently working on building a Sudoku Solver. My goal is to update the state in real-time so that the user can visually see how the algorithm is progressing. However, my current code only updates the UI at the end ...

Subdirectory configuration with Nginx and php-fpm

My goal is to run php-fpm using nginx, with different roots specified for different locations: for path: http://localhost/ -> /usr/share/nginx/html http://localhost/pma -> /var/www/default/phpMyAdmin/ http://localhost/pga -> /var/www/default/php ...

"No data found in the JSON response due to lack of parameters

When I attempted to receive empty parameters, I expected a specific output but instead received a "Cannot Get ..." error message. This is the original code I was using: app.get("/api/timestamp/:date", function(req, res) { let dateString = re ...

cancel the ongoing ajax request during a specific event

There seems to be an issue with the behavior of clicking on the .personalized class. When clicked, it does not display both #loading_personalized and #divPersonalized elements simultaneously. This results in the execution of an AJAX call even when the pr ...

Before being sent, CDATA is eliminated

Currently, I am integrating a SOAP call within an Angular application. One requirement I have is to include CDATA for a specific section of the payload for certain calls. angular.forEach(contactsCollection, function (item, index) { contacts = contact ...

The problem with the Next.js 14 generateStaticParamsparams parameter is that it is currently

I'm using this documentation as a reference to extract parameters from the URL in my generateStaticParams function: https://nextjs.org/docs/app/api-reference/functions/generate-static-params#generate-params-from-the-bottom-up This is the route I am w ...