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

What is the best way to implement a Navbar link in React.js?

I am currently working on developing a website using Reactjs. I have successfully created a Navbar with two links - Home and Contact. However, when I click on the Contact link, although the URL changes accordingly, the page itself does not update. I have s ...

What is the best way to design an angular directive or service specifically for straightforward pagination featuring only next and previous options?

Within a block of div tags, an ng-repeat directive is being used to display sets of 3 divs at a time. By clicking on the next button, the next set of 3 divs should be displayed, and the same goes for the previous button. Check out the HTML code below: &l ...

Retrieve the number of categories that have products only within their subcategories

Struggling to determine the count of products in a category collection that also includes products from any subcategories. Specifically, I'm looking to filter this count based on a product collection, only including products that match certain criter ...

The phantom stdout for Node 4.2.0 is showing an error with code NETWORK_ERR: XMLHttpRequest Exception 101. This error indicates that a network error

Executing the code below in node 4.2.0, it is triggered within a scheduled node cron job rather than through the terminal. The website being 'requested' is . module.exports.dynamicRequest = function(url, callback) { var makeDynamicRequest = fu ...

AJAX in jQuery cannot be used to send data to a PHP

I am facing an issue with my script that uses AJAX to post data to the server and display it, but unfortunately, it is not functioning properly... Here is the current output: Your viewport width is 1332x670 Ajax initialization failed! In this scenario, ...

Using a restricted set of special characters in a jQuery regular expression

My requirement is to only allow alphanumeric data along with the following special characters: ' (single quote) - (hyphen) . (dot) single space I attempted this approach: var userinput = $(this).val(); var pattern = [A-Za-z0-9_~\-!@#\$% ...

The program failed to run properly because it couldn't find the reference to Chart

I added chart.js to my project using npm with the command: npm install chart.js --save-dev. In the file "resources/assets/js/bootstrap.js", I included it by using: require('chart.js');. After running npm run dev in the console, it compiled succe ...

Is there a way to make Phpstorm identify and acknowledge the usage of NextJS pages?

Just finished setting up my brand new NextJS app: function MyApp({ Component, pageProps }: AppProps) { return ( <Layout> <Component {...pageProps} /> </Layout> ) } export default MyApp However, PHPStorm keeps giving me ...

Is it compulsory for all pages to be built with react?

I am diving into the world of web development by creating my own website from scratch using React and Node.js with Next.js. I'm curious if it's possible to build certain sections, like the registration page, without using React. I wonder if optin ...

Unable to find custom components when using react-router

My goal is to improve the organization of my Routes in React and separate concerns. I am currently utilizing react-router-dom version 5. Within my Application Routes component, I have structured it with 3 children components: AuthenticatedRoutes PublicRo ...

Exploring the connected component feature in React/Redux

While testing the connected component of my React/Redux app, I encountered an error. The test case that caused the error is: App component › shows account info and debits and credits` Invariant Violation: Could not find "store" in either the context or ...

I am struggling to display an array of objects retrieved from the server in the UI using AngularJS

I am receiving an array of objects as a JSON from the server. When I try to access my service URI from HTML, I encounter the following array in my console: "angular.js:13920 Error: [$resource:badcfg] http://errors.angularjs.org/1.5.8/$resource/badcfg?p0= ...

Is there a way to utilize JSON parse for converting deeply nested keys from underscore to camelCase?

A JSON string containing an object is on my mind: const str = `[{"user_id":"561904e8-6e45-5012-a9d8-e2ff8761acf6","email_addr":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa0a3a6a5bc8aaca ...

Encountering a 404 error when trying to reload the page?

My React Router is functioning properly in the development environment. Here's what I implemented in Webpack Dev Server: historyApiFallback: { index: 'index.html', } Now, when transitioning to production mode, I wanted to replicate the ...

Execute the npm postscript once the server has been terminated with Ctrl+C

I've set up my development database inside a container. To streamline the process of starting and stopping the container, I've incorporated some pre and post scripts in my package.json file: "prewatch": "docker start mongo", "watch": "nodemon a ...

Performing a simulated click on a dynamically inserted element using pure JavaScript

I am faced with the challenge of programmatically navigating a ReactJS-based website in a looped workflow. The process involves clicking on Element1, dynamically altering the web page to add Element2, then clicking on Element2, and so on until eventually r ...

Unable to locate image in React framework

When attempting to display an image, I encountered a 404 error even though the folder containing it is being served properly. Code snippet from JSX file: render: function(){ ... return <button type="button" id="powerButton" onClick={this.someFun}>& ...

What is the purpose of using double quotes within single quotes in JavaScript?

Could someone clarify the reason behind needing to nest double quotes inside single quotes in my Webpack configuration shown below? What is preventing using just double quotes? module.exports = merge(prodEnv, { NODE_ENV: '"development"', API ...

Using HTML and C# to Deliver Emails

I've encountered a challenge with my HTML page that includes a textbox for users to input their email. When the submit button is clicked, an email should be sent to a specific email address defined in the code, and a pop-up box indicating "Email Sent" ...

Can Pivot Tables be Created or Copied with the PhpExcel Library?

Recently, I utilized the phpExcel library to create excel reports in cakephp. Everything is working smoothly except for pivot tables. I am using a master excel sheet (containing a pivot table) to clone/generate other excel sheets. The newly generated shee ...