What potential issues can arise when importing a default export alongside a named export and using webpack in conjunction with babel?

I have two distinct constructors in my codebase: SignUp and GoogleSignIn. They are structured as follows:

import SignUp, {gapi_promise} from "./SignUp";
/**
*
* @param element
* @extends SignUp
* @constructor
*/
function GoogleSignIn(element){

    SignUp.call(this);
}

GoogleSignIn.prototype = Object.create(SignUp.prototype);

export default GoogleSignIn;

Additionally,

function SignUp(){
    //Some constructor code
}

export let gapi_promise = (function(){

    return new Promise((resolve, reject) => {
        //Perform some operations using the google API
    });
}());

export default SignUp;

While attempting to bundle these assets with webpack and Babel loader, I encountered an error upon loading the page:

GoogleSignIn.js?1051**:21 Uncaught TypeError: Cannot read property 'prototype' of undefined(…)

The underlying issue seems to stem from the fact that the value of SignUp is undefined. Could it be caused by a mistake in how I am importing or exporting values?

The specific line causing the failure is:

GoogleSignIn.prototype = Object.create(SignUp.prototype);

If more information is needed to provide assistance, please do not hesitate to ask. Thank you for your help!

Answer №1

If you're encountering this issue, it could be due to your use of Babel 6, which compiles modules based on ES6 specifications. In such cases, there are two possible solutions:

1. Modify

GoogleSignIn.prototype = Object.create(SignUp.prototype);
to
GoogleSignIn.prototype = Object.create(SignUp.default.prototype);

2. Alternatively, you can utilize the following plugin (https://www.npmjs.com/package/babel-plugin-add-module-exports) to revert to the previous export behavior.

You may find additional information on the topic at Babel 6 changes how it exports default

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

Integrating tooltips on Dimple.js line charts

A simplified network-style chart has been created using Dimple's line plot as the foundation. For example, please refer to this link: http://jsfiddle.net/cc1gpt2o/ myChart.addCategoryAxis("x", "Entity"); myChart.addCategoryAxis("y", "Entity").add ...

NuxtJS modifies the names of assets files when deploying to production environments

As a newcomer to VueJS, NuxtJS, and Webpack, I am currently utilizing NuxtJS for a static site and everything is going smoothly so far. However, one concern that arises is the fact that file names in the assets folder change to a hash after the build proce ...

Linking JavaScript on the client side to a NodeJS application on the server side

I am new to NodeJS and I am currently exploring the app structure. I have developed a basic app using Socket.IO and MongoJS, which functions as a tracking system that gathers variables from a client-side script and stores them in Mongo. This is how I envi ...

Tips for selecting React component props based on a specific condition

Here is a React component that I have: <SweetAlert show={this.props.message} success title={this.props.message} onConfirm={this.props.handleCloseAlert}> </SweetAlert> Upon using this component, I receive the following alert ...

What is the best way to alphabetically arrange an array of names in a JavaScript.map?

I am attempting to alphabetically sort an array of first names using JavaScript map function. Additionally, I aim to remove the "undefined" row from the final results: function contacts_callback(obj) { var contactinfo = obj.contacts .filter( ...

Nested modal in native app utilizes the React Carbon TextInput component for an uneditable input field

As a newcomer to React, I have encountered an issue with the Tauri framework used to bundle my React application as a desktop app. Specifically, I am facing a problem where the TextInput field, nested inside a modal and utilizing React Carbon components, i ...

How to simulate loadStripe behavior with Cypress stub?

I am struggling to correctly stub out Stripe from my tests CartCheckoutButton.ts import React from 'react' import { loadStripe } from '@stripe/stripe-js' import useCart from '~/state/CartContext' import styles from '. ...

The storage capacity of localStorage is insufficient for retaining data

While I was trying to troubleshoot an error, I encountered another issue. var save_button = document.getElementById('overlayBtn'); if(save_button){ save_button.addEventListener('click', updateOutput);} This led to the following ...

Unspecified variable in AngularJS data binding with Onsen UI

I am new to Onsen UI and AngularJS, and I have a simple question about data binding. When I use the variable $scope.name with ng-model in an Onsen UI template, it returns as UNDEFINED. Here is my code: <!doctype html> <html lang="en" ng-app="simp ...

Conceal certain digits of a credit card number in a masked format for security purposes

Is there a reliable method to mask Credit Card numbers in password format within a text field? **** **** **** 1234 If you are aware of a definitive solution, please share it with us. ...

Utilizing parameters for data filtering in VueX getters

I'm really stuck on this issue. I've been trying to retrieve a blog post object using a getter based on its "slug". Despite all my attempts, every time I try to use the getter, I keep getting an error saying "state.posts.filter" is not a function ...

Adjust the color of the input range slider using javascript

Is there a way to modify the color of my slider using <input type="range" id="input"> I attempted changing it with color, background-color, and bg-color but none seem to work... UPDATE: I am looking to alter it with javascript. Maybe something al ...

Select the input based on the name and value provided from a radio button using jQuery

I want to show a div element when the user chooses option 4 from a radio button. $(document).ready(function () { $("#GenderInAnotherWay").hide(); $("input[name='Gender'][value=4]").prop("checked", true); $("#GenderInAnotherWay").tog ...

What is the reason AJAX does not prevent page from refreshing?

Can anyone offer some guidance on using AJAX in Django? I'm attempting to create a basic form with two inputs and send the data to my Python backend without refreshing the page. Below is the AJAX code I am using: <script type="text/javascript& ...

Adding a collection to an array in JavaScript

In my dynamic inputs, I am collecting a list of data like the following: FirstNames : Person1 FN, Person2 FN, Person3 FN, ... LastNames : Person1 LN, Person2 LN, Person3 LN, ... To retrieve these values, I use input names as shown below: var Fir ...

Dividing JSON information into parts

I am attempting to present a highchart. I have utilized the following link: Highchart Demo Link Now, I am trying this web method: [WebMethod] public static string select() { SMSEntities d = new SMSEntities(); List<str ...

In what way can an item be "chosen" to initiate a certain action?

For example, imagine having two containers positioned on the left and right side. The left container contains content that, when selected, displays items on the right side. One solution could involve hiding elements using JavaScript with display: none/in ...

ASP.NET Dynamic Slideshow with Horizontal Reel Scrolling for Stunning

I'm curious if there is anyone who can guide me on creating a fascinating horizontal reel scroll slideshow using asp.net, similar to the one showcased in this mesmerizing link! Check out this Live Demo for a captivating horizontal slide show designed ...

What is the process of embedding a string with pug code into a pug file?

How can I interpolate a string with pug formatted code in a pug file? Here is what I have tried: - var text = "i.home.icon" div= text div !{text} div #{text} div ${${text}} div {{text}} div {text} div \#{text} div \{text} div ${text} div # ...

bind a class property dynamically in real-time

I need to dynamically generate a TypeScript class and then add a property to it on the go. The property could be of any type like a function, Promise, etc., and should use this with the intention that it refers to the class itself. let MyClass = class{ ...