Import error in my Angular project

I have the import script from the sample

...
import createReport from 'docx-templates';
import fs from 'fs';
...

but getting error in browser

Failed to compile.

node_modules/docx-templates/lib/main.d.ts:3:8 - error TS1259: Module '"/home/weilies_chok/apps/my-app/node_modules/jszip/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

3 import JSZip from 'jszip';
         ~~~~~

  node_modules/jszip/index.d.ts:270:1
    270 export = JSZip;
        ~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

compiler error

✔ Browser application bundle generation complete.

5 unchanged chunks

Build at: 2021-04-29T03:04:50.495Z - Hash: 54914e41f6300bfbc2a7 - Time: 476ms

Error: node_modules/docx-templates/lib/main.d.ts:3:8 - error TS1259: Module '"/home/weilies_chok/apps/my-app/node_modules/jszip/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

3 import JSZip from 'jszip';
         ~~~~~

  node_modules/jszip/index.d.ts:270:1
    270 export = JSZip;
        ~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.


Error: src/app/app.component.ts:3:8 - error TS1192: Module '"fs"' has no default export.

3 import fs from 'fs';
         ~~

package.json

{
  "name": "my-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.4",
    "@angular/common": "~11.2.4",
    "@angular/compiler": "~11.2.4",
    "@angular/core": "~11.2.4",
    "@angular/elements": "^11.2.4",
    "@angular/forms": "~11.2.4",
    "@angular/platform-browser": "~11.2.4",
    "@angular/platform-browser-dynamic": "~11.2.4",
    "@angular/router": "~11.2.4",
    "angular-formio": "^4.11.4",
    "bootstrap": "^4.6.0",
    "docx-templates": "^4.6.0",
    "fs": "*",
    "nativescript-ibeacon": "^0.8.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.3",
    "@angular/cli": "~11.2.3",
    "@angular/compiler-cli": "~11.2.4",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
  }
}

[mathe42]

Just some ideas:

1. add allowSyntheticDefaultImports: true to your tsconfig
2. DON’T USE fs this is not useable in browsers (so unless your writing a Angular page for electron don’t use fs)

Instead of fs you have to use the fetch api to get the .docx file from your server or use <input type="file"> to get the file or the new Native Filesystem API (see https://caniuse.com/?search=native file )

[jjhbw]

I assume this is fixed since #216? Feel free to reopen if not.