Importing classes in ECMAScript 6 does not work properly, causing issues when running scripts

I am currently learning Selenium Webdriver. I am facing an issue where I can't run a script with imported classes, but I am able to run it without classes using import functions only. To execute it, I use babel-cli in the following manner:

node ./babel-cli/bin/babel-node.js --presets node6 ./test.js

//test.js
import homePage from "./home_page"

var webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

var driver = new webdriver.Builder()
    .forBrowser('firefox')
    .build();

home_page = new HomePage(driver);
home_page.goHomePage();

//home_page.js
export default class HomePage{
    constructor(driver){
        this.driver = driver;
    }
     goHomePage = function(){
        this.driver.get("https://www.google.com/");
    }
}

The error message displayed is:

home_page.js: Unexpected token (5:15)

Answer №1

Originally, Node.js was developed using CommonJS modules as detailed in the Node.js documentation. The transition to ES2015 modules may present some challenges according to insights shared on this article.

In your example, both ES2015 and CommonJS modules are being used: import belongs to ES2015 while require is a CommonJS feature. Changing import to require might solve the compatibility issue.

To represent the import statement in CommonJS format, it would appear like this:

var homePage = require('./home_page');

Answer №2

For ES6 code, it is essential to utilize Babel for transpilation. Ensure that you have included Babel in your package.json file.

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

Using framer-motion with Next.JS ensures that content remains consistent during navigation

I added a Link on my homepage that connects to the About Us page: <Link href="/about"><a>About us</a></Link> In my _app.js file, there is an AnimatePresence wrapper: <AnimatePresence exitBeforeEnter> <Component {...p ...

Overriding the w-4xl with sm:text-2xl in Tailwind CSS

Struggling to achieve responsive design on my Pages, especially with changing text size when the screen is small. I've been following all the correct steps and maintaining the right order. However, whenever I set 'sm', it seems to override a ...

What is the best way to compress all folders, including the main directory?

I am working on a PHP script where I need to zip all directories, including the root directory. For instance, if my script file is located at /practice/zip/index.php, and I want to create a zip archive for the entire /practice directory. Currently, my sc ...

Error occurred while retrieving JSON array using Jquery

var groupMembers = $.parseJSON(members); $.each(groupMembers, function (index, item) { $.ajax({ type: "POST", url: "'.base_url(" / panel / listNotifications ").'/'.$id.'/" + valueSelected, d ...

JavaScript: Converting an Array to a String

Having trouble making the string method work with an array - it keeps showing up as empty. let url = "https://api.myjson.com/bins/be7fc" let data =[]; fetch(url) .then(response => response.json()) .then(result => data.push(r ...

Is this the proper formatting for JavaScript code?

Having trouble changing the CSS of elements that match b-video > p with an embed element using JQuery. Here's my code: $('div.b-video > p').has('embed').attr('style','display:block;'); Can anyone help me ...

Learn how to efficiently apply styles to multiple objects within an array using the material-ui library

Currently, I'm utilizing the functional component of React.js. Within this component, I have an array of objects that contain specific styles. const data = [ { id: 1, color: '#000' }, { ...

What could be the reason for typescript not issuing a warning regarding the return type in this specific function?

For instance, there is an onClick event handler attached to a <div> element. The handler function is supposed to return a value of type React.MouseEventHandler<HTMLDivElement> | undefined. Surprisingly, even if I return a boolean value of fal ...

In my Node.js/Express.js application, I have a directory that holds various images. Whenever I attempt to view these images via their URL, I encounter a 404 error message

In my Node.js/Express js project, I have the following folder structure: root ----bin ----controllers ----middleware ----models ----node_modules ----public --------images ------------test.png ----routes ----views I am currently trying to determine the cor ...

When iteratively utilizing the setValue() function, an unintentional occurrence of an 'Uncaught error' is encountered

I encountered an issue while trying to update a spreadsheet upon submitting a form. The problem is that after pressing the submit button, the remaining commands are not being executed properly. As a result, I see an error message in the console saying "U ...

Unique alphanumeric code following the inclusion of a JavaScript file

I'm encountering an issue with a webpage that incorporates two JavaScript files. When inspecting it using firebug, I noticed that every time the page loads, these two files are included with the prefix ?_=someRandomNumber I'm unsure about the or ...

Get tabular information in xlsx format by utilizing the xlsx npm package for download

I have been attempting to convert my json-like data into an xlsx file format. I utilized the xlsx npm package and followed various code samples available online, however, when trying to open the file in Excel, I encountered the following error: https://i.s ...

Save JSON data from Javascript to a file on the server without using a server-side application

I am currently working with a .js client and need to save an object to a file on the server. This is new to me as I am not familiar with file i/o using JavaScript. My plan is to utilize jquery and json for this task, and I am using java serverside. Althoug ...

Is it possible to further simplify this piece of JavaScript using jQuery?

In my journey to learn and grow with Javascript, I have come across a snippet of code that simply attaches an onclick event to a button and updates the text of an em tag below it. As I delve deeper into jQuery, I am beginning to appreciate its syntax and u ...

What is the best way to incorporate intervals and polling in Angular 2 for seamless integration with Protractor?

I have an angular2 application that I am looking to test using protractor. Within this application, there is a page featuring a graph that updates at regular intervals with data generated on its own. It appears that one aspect of protractor is the abilit ...

What is the best way to create separate arrays for every element in my object, containing a total of four arrays to efficiently produce a weekly forecast?

Hey there, I'm back with an update on my ongoing project. I've encountered a major challenge while trying to incorporate a 7-day forecast display in my app. Something along these lines: https://i.stack.imgur.com/xJA4M.png https://i.stack.imgur. ...

Encountering a DiscordAPIError[10062] when attempting to retrieve user points from the database due to an unknown interaction

content: "Congratulations, you have been successfully verified!", ephemeral: true, }); } } else if (interaction.customId === "giverole") { const userPoints = await findUser(interaction.member ...

Struggling with Angular 8: Attempting to utilize form data for string formatting in a service, but encountering persistent page reloading and failure to reassign variables from form values

My goal is to extract the zip code from a form, create a URL based on that zip code, make an API call using that URL, and then display the JSON data on the screen. I have successfully generated the URL and retrieved the necessary data. However, I am strug ...

Implementing Event Handlers Post-Infinite Scroll Refresh

I have incorporated the infinite scroll feature using a plugin that can be found at this website. This plugin helps in loading page content seamlessly. One jQuery event listener that I have set up is as follows: $('.like-action').on('click ...

Customize your AppBar with Material UI and NProgress integration

Snippet of Code: <AppBar color='inherit' position='fixed'><AppBar> I'm currently working with material-ui and facing an issue where nprogress doesn't show up at the top in my Nextjs App when using it in conjunctio ...