Receiving a 'window.require is not a function' error when using Wijmo ExcelImportExport in an Angular 2 project

In my Angular 2 project utilizing Wijmo version 5.20172.359 with Angular 4.4.4 and TypeScript 2.5.3, I have successfully implemented components like FlexGrid, FlexPie, and FlexCharts. However, when attempting to integrate the Excel Import functionality using the included ExcelImportExport project from the TS/Angular2 Samples provided with the build, I encounter an error during the build process:

Uncaught TypeError: window.require is not a function
    at Object../node_modules/wijmo/wijmo.xlsx.js (app.js:86218)
    at __webpack_require__ (app.js:678)
    at fn (wijmo.grid.xlsx.js:13)
    at Object../node_modules/wijmo/wijmo.grid.xlsx.js (app.js:86158)
    at __webpack_require__ (app.js:678)
    at fn (wijmo.grid.xlsx.js:13)
    at Object../app/home/components/import-grid/import-grid.component.ts (app.js:12533)
    at __webpack_require__ (app.js:678)
    at fn (wijmo.grid.xlsx.js:13)
    at Object../app/home/home.module.ts (app.js:19226)

The component includes the following imports:

import * as JSZip from 'jszip';
import * as wjcGrid from 'wijmo/wijmo.grid';
import * as wjcCore from 'wijmo/wijmo';
import * as wjcXlsx from 'wijmo/wijmo.xlsx';
import * as wjcGridXlsx from 'wijmo/wijmo.grid.xlsx';
import { WjGridModule } from 'wijmo/wijmo.angular2.grid';

If I remove the import for wjcGridXlsx, the issue disappears. However, this import is necessary for the Excel import feature, pinpointing where the problem lies.

I am uncertain of how to resolve this issue.

The wijmo.xlsx module appears to wrap https://github.com/SheetJS/js-xlsx, and while I have encountered some references to errors related to its implementation, I have not found a solution yet.

Note that I am using webpack instead of Angular CLI.

Answer №1

To fix the issue, importing the jszip library using a <script> tag in the index.html file is the solution I ended up going with. While I originally wanted to find a webpack solution, this method at least gets the problem sorted out.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>

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

Is it normal that aws-eventbridge-lambda does not generate a Lambda function?

I've been experimenting with the AWS CDK (Typescript) to enhance my knowledge. I'm interested in setting up a lambda function to run daily at a specific time or at intervals of N minutes. Since I anticipate having multiple functions, it would be ...

Develop a versatile post/put/get request in TypeScript for React applications

I am currently working on enhancing my generic writing skills. I have implemented POST/PUT/DELETE/GET for attachments along with various entity types (with more to be added in the future). The existing code functions correctly and is more generic compared ...

Guide on creating a TypeScript generic type for accessing nested properties and resolving their types

How can I develop a generic type that resolves to the data type of a nested property? Assume I have a configuration structure type Config = { parent: { child: boolean } } I am looking for something like type ChildConfigType = NestedDataType<Co ...

Could I potentially pause and wait for a subscription in Angular?

I'm looking to display a list of posts similar to this: Post List In order to indicate which post is favorited by a user, I need to retrieve data from two different collections in my MongoDB database. The ngOnInit function in my post-list.component.t ...

Storing information in a FormArray within an Angular reactive form

I'm facing a challenge with setting an array of data from an API to a FormGroup that contains a form array. It seems like I'm missing something in the process. Form this.blog = this.fb.group({ title: ['', Validators.required], ...

arrange items based on their category into arrays

I have a JSON file that needs to be arranged based on three specific fields. Here is an example snippet of the JSON data: { "Racename": "10KM", "Category": 34, "Gender": "Male", "Work": "Google", "FullName": "Dave Happner", "Rank": 1, "Poni ...

TypeScript Guidelines for Typing the `groupBy` Function

I am working on a function called groupBy, but the type system is giving me some trouble. export function group< T extends object, K extends (keyof T & string), R = T[K] extends string ? string : never >( data: T[], groupBy: ...

The Google OAuth profile response is lacking the Profile ID - NextAuth

I've been diving into a helpful tutorial on implementing roles in the next-auth session. However, I've encountered an issue where adding the profile property results in unexpected behavior with the profile being undefined. Additionally, there are ...

Tips for dynamically loading Angular modules once they are in production

My application is currently in production, and I am looking to enhance its flexibility when adding new features. These features would essentially be additional modules. In Angular, it is necessary to explicitly define all dependent submodules and componen ...

Altering Angular Material Dimensions and Customizing the Appearance of md-dialog-container

Currently, I am implementing Angular Material on my website and utilizing the md-dialog component for displaying popups in my gallery. While the default animation and styling are appealing, I would like to customize the dimensions of the hidden md-dialog-c ...

How can Mui typescript be extended with a unique wrapper that includes a `component` property?

I recently created a unique wrapper component: import Box, { BoxProps } from "@mui/material/Box"; type CustomWrapperProps = { id: string } & BoxProps const CustomWrapper = (props: CustomWrapperProps) => { const {id, children, ...rest ...

Encountering a 401 Error while trying to host an Angular app on Google Cloud Storage

I am currently facing an issue with deploying my Angular app to a Google Cloud Storage bucket. The bucket is public and set up to be served as a custom website via CNAME (test.example.com). The main page and 404 handler are mapped to index.html, but I am e ...

Navigating through diverse objects in Typescript

My challenge involves a state object and an update object that will merge with the state object. However, if the update value is null, it should be deleted instead of just combining them using {...a, ...b}. const obj = { other: new Date(), num: 5, ...

Remove default focus from angular 2 material input field

Currently, I am faced with a dialog containing a text input, radio buttons, and ok cancel buttons. Upon opening the dialog, the cursor automatically blinks inside the text input, causing the placeholder text to zoom out and become difficult to read. The ...

Determine in React whether a JSX Element is a descendant of a specific class

I am currently working with TypeScript and need to determine if a JSX.Element instance is a subclass of another React component. For instance, if I have a Vehicle component and a Car component that extends it, then when given a JSX.Element generated from ...

Angular is throwing an error stating that the property 'json' cannot be found on the type 'Object'

After updating my Angular app to version 7 and switching to httpClient, I encountered the following error: Property 'json' does not exist on type 'Object' at line let act = data.json().find(x => x.ActivityId == activityId); I sus ...

Allow only numerical values through an ion-input in Ionic 4, preventing the input of letters and special characters

I am currently developing an application in Ionic 4 that requires users to enter only integer numbers (0-9). I need to prevent any other characters such as alphabets, dots, or plus signs from being entered. However, the methods I have tried so far have not ...

Retrieve auth token from Ionic storage using asynchronous data fetching method

Is there a way to access the token stored in cellphone storage asynchronously? I am having trouble with the variable always being undefined. In my .ts file, here is where I am trying to retrieve the data: cars.ts: import { Component } from '@angula ...

Angular Service: Circular Dependency Problem Explained

Greetings, I am fairly new to the realm of Angular and have some background in AngualarJS (not very helpful here hahaha). Currently, I am referring to this resource to implement a Service/State for a specific Module. However, when attempting to use it wi ...

The Background Geolocation feature is throwing an error: "Subscribe method is not present in the Promise<any> type."

I am currently using Ionic 4 to build an app that tracks the user's location every hour using GPS. To achieve this, I utilized the Ionic 4 Background Location plugin as per their official documentation. I followed the code to install the plugin which ...