Search code examples
angulartypescriptjs-xlsxwijmo5

Wijmo ExcelImportExport in Angular 2 project 'window.require is not a function' error

I'm using the current build of Wijmo (5.20172.359) in an Angular 2 project (Angular 4.4.4, TypeScript 2.5.3). Everything I've been using (FlexGrid, FlexPie, FlexCharts) works fine, however...

I'm trying to integrate the Excel Import functionality, and am using the ExcelImportExport project included in the TS/Angular2 Samples downloaded with the build, and I'm getting the following error on build:

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)

I have the following imports in the component:

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';

And the problem goes away if I remove the following:

import * as wjcGridXlsx from 'wijmo/wijmo.grid.xlsx';

However (obviously) the Excel import feature requires wjcGridXlsx, so that just indicates to me where the specific problem lies.

I'm unclear how to resolve this.

The wijmo.xlsx module seems to be a wrapper around https://github.com/SheetJS/js-xlsx, and I can find some references to errors implementing that, but nothing that leads me to a solution.

I'm using webpack, and not Angular CLI.

Solution

  • Importing the jszip library with a <script> tag in the index.html file solves the problem. I would like to have found a webpack solution, but this at least resolves the issue.

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