0

I am trying to update angular app from 8 to 15 after updating all the packages, app is throwing below error when running

Uncaught SyntaxError: Cannot use import statement outside a module (at scripts.js:1:1)

I have tried below solutions that I found here SyntaxError: Cannot use import statement outside a module but it didn't help

Adding type = module in package.js

// package.json
{
  "type": "module"
}

changing module to commonjs in tsconfig

"module": "commonjs"

installing below packages

1. npm i typescript --save-dev

2. npm i ts-node --save-dev

Here's my package.json

{
  "name": "paris-app",
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "ng": "ng",
    "start": "node --max-old-space-size=4096 ./node_modules/@angular/cli/bin/ng build --watch",
    "build": "node --max-old-space-size=4096 ./node_modules/@angular/cli/bin/ng build",
    "test": "ng test",
    "test:ci": "ng test --no-watch --no-progress --reporters junit",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.2",
    "@angular/cdk": "15.0.1",
    "@angular/common": "~15.0.2",
    "@angular/compiler": "~15.0.2",
    "@angular/core": "^15.0.2",
    "@angular/forms": "~15.0.2",
    "@angular/material": "15.0.1",
    "@angular/material-moment-adapter": "15.0.1",
    "@angular/platform-browser": "~15.0.2",
    "@angular/platform-browser-dynamic": "~15.0.2",
    "@angular/router": "~15.0.2",
    "@datorama/akita": "^7.1.1",
    "@datorama/akita-ng-router-store": "^7.0.0",
    "@fortawesome/angular-fontawesome": "^0.12.0",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "chart.js": "^4.0.1",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "moment": "^2.24.0",
    "ngx-currency": "^2.0.0",
    "ngx-mat-select-search": "^6.0.0",
    "ngx-spinner": "^14.0.0",
    "ngx-toastr": "^16.0.1",
    "normalizr": "^3.3.0",
    "primeicons": "^6.0.1",
    "primeng": "^15.0.0-rc.1",
    "rxjs": "~7.5.7",
    "tslib": "^1.9.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "15.0.2",
    "@angular/cli": "~15.0.2",
    "@angular/compiler-cli": "~15.0.2",
    "@angular/language-service": "~15.0.2",
    "@datorama/akita-ngdevtools": "^1.0.4",
    "@types/jasmine": "~3.3.5",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.12.18",
    "codelyzer": "~5.1.0",
    "cpx": "^1.5.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "karma-junit-reporter": "^1.2.0",
    "node-sass": "^4.12.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.12.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-plugin-prettier": "^2.0.1",
    "typescript": "~4.8.4"
  },
  "akitaCli": {
    "customFolderName": "true",
    "isAngular": true,
    "basePath": "./src/app"
  }
}

and tsconfig

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "paths": {
      "@admin": ["./src/app/admin"],
      "@admin/*": ["./src/app/admin/*"],
       ...
    }
  }
}

Old version (Angular 8) works fine its only the updated version. Any help is much appreciated.

Thanks a lot.

Maksat Rahmanov
  • 377
  • 3
  • 10
Bhavesh
  • 819
  • 1
  • 17
  • 31

2 Answers2

1

Not sure why my previous answer was deleted.

You are using chartjs 4.0.1, primeng specifies Chart.js 3.3.2+, downgrade to 3.x. It fixed this issue for me.

Dan
  • 51
  • 1
  • 9
  • very interesting, I also using chart.js 4.2.1 with primeng and I get also this error, but I prefer not to downgrade versions, is there not a nother solution? – Reisy Eytan Jun 12 '23 at 07:06
-1

Put type="module" inside the script tag:

<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
Kavinda Senarathne
  • 1,813
  • 13
  • 15
  • already tried but didn't work. also this script is injected by angular so manually editing it won't help as it will be overwritten on next build. – Bhavesh Dec 16 '22 at 03:25