Error encountered: Trying to bundle with WebPack 4 results in an uncaught TypeError where Object(...) is not recognized as a

Currently, I am incorporating a library into my TypeScript 4 Web Component and utilizing it as shown below:

import { connect } from '@captaincodeman/redux-connect-element';
export class AppRouterElement extends connect(store, LitElement) {....}

After building the project with Yarn 2 using yarn build, I encounter an issue at run-time where I see the error: 

Uncaught TypeError: Object(...) is not a function

Upon investigating the compiled JavaScript code, I notice the following line of code:

let Sr = class extends (Object(wr.connect) (fn, vr)) {....}

This line appears to be missing a comma. Adding the comma resolves the issue and the application functions correctly. Interestingly, when using Rollup for the build process, no runtime error occurs.

Now, I am unsure which specific WebPack or TSC configurations to modify in order to address this issue. If you have any insights on what this problem could be called or how to troubleshoot it effectively, please let me know.

javascripttypescriptwebpack

Answer №1

Encountered a similar error when attempting to import like this:

import start from './modules/App.jsx';

The error message looked something like this:

Uncaught TypeError: Object(...) is not a function
at eval (index.js:4)
at Module../src/index.js (main.d806e840d36f0916cf01.js:589)
at __webpack_require__ (main.d806e840d36f0916cf01.js:20)
at eval (webpack:///multi_(:8080/webpack)-dev-server/client?:2:18)
at Object.0 (main.d806e840d36f0916cf01.js:624)
at __webpack_require__ (main.d806e840d36f0916cf01.js:20)
at main.d806e840d36f0916cf01.js:84
at main.d806e840d36f0916cf01.js:87

After some investigation, I realized that the issue was missing braces in my import statement. I made the correction below:

import { start } from './modules/App.jsx';

This solution may help if you are facing a similar problem. Good luck!

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

Arrange rows in ascending order using jQuery

This script is functioning correctly but only examines the first column. I would like to alter it to check the second column for points instead. How can I make this adjustment? HTML Table: <table width="100%"> <thead> <tr> ...

javascriptjquery

export default select an option

Forgive me if my question comes off as naive, but I'm still learning the ropes. :-) I stumbled upon something perplexing in this GitHub file. I am aware that we can export or import default functions, but in this instance, the author has used: expo ...

javascriptreactjs

Learn how to navigate to another page after successful AJAX request handling

Upon deletion of a file, I am attempting to redirect to the admin_dashboard page using ajax. I have a function called in a button tag, and upon successful response, I want to redirect to the next page. While the value gets deleted successfully, I am facing ...

javascriptphpjqueryajaxhttp-redirect

Prevent the beforeunload dialog box from appearing

Looking for a solution that is compatible with all browsers and operating systems. Referring to this resource https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload This is what I have so far: window.addEventListener("beforeunload", function ( ...

javascriptjquery

To close the responsive menu, simply click anywhere outside of the navigation bar

My issue involves a responsive menu with Bootstrap. On desktop, the menu closes fine; however, on the responsive view, I want it to close when clicking outside of the nav menu in any area. Here is my navigation code: <!-- Navigation --> <nav id= ...

javascriptjqueryhtmlcsstwitter-bootstrap

Exploring the Functionality of Chaining in JQuery and Understanding its Inner Workings

I have a question and I am looking for the best answer. Hopefully, someone in our group can provide it. Most of you are familiar with jQuery chaining. It allows us to attach multiple events to an HTML element using just one statement. For example: $(&ap ...

javascriptjquery

Passing parameters to a controller method in AngularJS from a directive

Embarking on my Angular JS journey, I have begun creating custom directives for a project. As part of the task, I needed to generate an angular tree and found a code snippet on a plunkr sample by someone else. Although it is not originally my code, I tried ...

javascriptangularjs

Using react-select to display "N items selected" instead of listing out all the selected items

Exploring the potential of react-select as a city-picker selector for users to choose one or multiple cities to filter data. Take a look at how it appears on my page: https://i.sstatic.net/A3cBX.png The list of cities may be extensive, and I am concerned ...

javascriptreactjsreact-select

React Jest is experiencing an error at line 246 in the internal process promises module, triggering an uncaught exception with the specified error

In my React code snippet below, I am using the useEffect hook with an async function to fetch data: useEffect(() => { (async () => { await httpClient .get(`${config.resourceServerUrl}/inventory/`) . ...

javascriptreactjspromisejestjscallback

Adjust google maps to fill the entire vertical space available

I found this helpful resource for integrating Google Maps into my Ionic app. Everything is working smoothly, but I am trying to make the map fill the remaining height below the header. Currently, I can only set a fixed height in pixels like this: .angula ...

javascriptcssangularjsionic-framework

What is the name of this JavaScript function declaration syntax? (var) => {}

While perusing the most recent NodeJS documentation, I stumbled upon a novel approach to defining a function: fs.unlink('/tmp/hello', (err) => { if (err) throw err; console.log('successfully deleted /tmp/hello'); }); Source: ht ...

javascriptnode.js

An issue occurred: Unable to access the 'login' property because of a TypeError

Setting up a login page and declaring an object in my login.ts file. public User: { login:"", senha:"", }; Utilizing [ngModel] to save values within the parameters of the object. <ion-item> <ion-label floating>Enter ...

angulartypescriptobjectionic-frameworkionic3

What is the clarification on Angular's paramMap.getAll method?

Angular 4 introduced support for paramMap along with get and getAll methods : I comprehend this code snippet that retrieves the value of "id" route.paramMap.subscribe( params => this.productID = params.get('id') ); However, I am c ...

javascriptangular

Utilizing AngularJS to invoke REST API calls within a for loop and efficiently manage priority for the visible content area

Currently, I am dealing with an array containing over 400 data IDs related to different fruits. My goal is to make API calls in a for loop to retrieve relevant information about each fruit. While this works fine for smaller lists, it fails when dealing wit ...

javascriptjqueryangularjsangularjs-service

In jQuery, the use of display:none effectively conceals all elements

I have a jQuery script that is meant to display 10 elements at a time on my webpage. Here is the current code snippet: var max_items_page = 10; $('#song_list div:lt('+max_items_page+')').show(); var shown = null; var items ...

javascriptjquerycssdjango

`Creating a functional list.js filter``

I'm having trouble making the List.js filter function work properly. The documentation for List.js is not very helpful for someone new to development. Below is the code I am using: HTML: <div class="col-sm-12" id="lessons"> <input class= ...

javascriptjqueryhtmlweblist.js

sending information from a PHP form to a JavaScript window

Currently, I am in the process of developing a game using javascript and jquery. In this game, when a player interacts with another character, it triggers the opening of text from an external file using the window.open('') function. At the start ...

javascriptphpjqueryformswindow.open

Implementing the History API to dynamically load content into a div using Ajax

On my WordPress site, I have post content that loads into a div using AJAX when a user clicks on it. Now, I'd like to update the URL for the current post without using hashes. How can I achieve this with my JavaScript? JavaScript: jQuery(docum ...

javascriptjqueryajaxwordpressurl

Tips for leveraging stage 3 functionalities in TypeScript?

Array.prototype.at() is currently in the proposal stage 3. Even after adding "lib": ["ESNext"] to my tsconfig.json, I encountered the error: Property 'at' does not exist on type 'number[]'. Could you shed some light ...

javascripttypescript

Show the current phone number with the default flag instead of choosing the appropriate one using the initial country flag in intl-tel-input

Utilizing intl-tel-input to store a user's full international number in the database has been successful. However, when attempting to display the phone number, it correctly removes the country code but does not select the appropriate country flag; ins ...

javascriptlaravelintl-tel-input