bug: "export '__spreadArray' was not found in 'tslib'

[AlvaroCG02]

Bug Report

Ionic version: 6.13.1

[ ] 4.x
[x] 5.x

Current behavior:

Create a brand new vue project and the base example will not load. It warns first that export spreadArray is not found in tslib and then further complains in the console after ionic serve finishes initialization that it can't find the function __spreadArray

In VS Code:

[vue-cli-service]  INFO  Starting development server...
[vue-cli-service]  WARNING  Compiled with 1 warning3:32:38 PM
[vue-cli-service]  warning  in ./node_modules/@ionic/core/dist/esm-es5/animation-096c6391.js
[vue-cli-service] "export '__spreadArray' was not found in 'tslib'
[vue-cli-service]   App running at:
[vue-cli-service]   - Local:   http://localhost:8100/
[vue-cli-service]   - Network: http://192.168.1.24:8100/
[vue-cli-service]   Note that the development build is not optimized.
[vue-cli-service]   To create a production build, run npm run build.

In Console:

index-7a8b7a1c.js?6d28:1 Uncaught (in promise) TypeError: Object(...) is not a function
    at addStyle (index-7a8b7a1c.js?6d28:1)
    at attachStyles (index-7a8b7a1c.js?6d28:1)
    at eval (index-7a8b7a1c.js?6d28:1)
    at step (tslib.es6.js?9ab4:100)
    at Object.eval [as next] (tslib.es6.js?9ab4:81)
    at eval (tslib.es6.js?9ab4:74)
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.js?9ab4:70)
    at updateComponent (index-7a8b7a1c.js?6d28:1)
    at eval (index-7a8b7a1c.js?6d28:1)
...

Expected behavior:

Should show the welcome page for a new templated project.

Steps to reproduce:

As shown above.

Related code:

ionic start

Ionic info:

Ionic:

   Ionic CLI       : 6.13.1 (C:\Users\Alvaro\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/vue 5.6.2

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.11
   OS     : Windows 10

Have deleted node_modules and tried reinstalling (npm i) many times.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[marcosvaz-opah]

Using React i had the same issue

[J-Gonzalez]

Seeing the same issue on 5.6.2 (and using React). Reverting to 5.6.1 allows our builds to work again.

[XsnTrcK]

Also experiencing issue on 5.6.2 with react

[boboldehampsink]

Experiencing this on 5.6.2 with vue

[cesarve77]

Same problem with a fresh installation of react (ionic 6.13.1)

[liamdebeasi]

Hi everyone,

I can reproduce this now. Looks like this was due to a change in Stencil.

I am investigating now and we will have a fix out by the end of today. Thanks for your patience!

[frank505]

having this same exact issue looks like i will be reverting to a lesser version

[liamdebeasi]

Hi everyone,

Please see below for a resolution regarding this issue.

Resolution

A fix has been released via Ionic Framework v5.6.3. Please update your apps to this version to receive the fix:

Angular

npm install @ionic/angular@5.6.3

React

npm install @ionic/react@5.6.3 @ionic/react-router@5.6.3

Vue

npm install @ionic/vue@5.6.3 @ionic/vue-router@5.6.3

Stencil/Vanilla JavaScript

npm install @ionic/core@5.6.3

What Happened

We recently applied @stencil/core@2.5.0 which bumped the TypeScript dependency to the latest 4.2.x version. Another dependency, tslib, has older __spread and __spreadArrays functions that TypeScript deprecated in 4.2.x (see: microsoft/tslib@88a77b8). TypeScript now relies on the newer __spreadArray function. Since our version of tslib was outdated (1.10.x) and did not have that __spreadArray function, developers got the error that was reported in this issue.

Future Steps

We are currently in the process of revamping our E2E testing infrastructure to better detect issues like the one reported here before a PR is even merged. Part of the work involves migrating to Cypress as well as adding more robust automated tests.

We appreciate your patience as we worked to resolve this issue. Please let me know if you have any questions. Thanks!

[1beb]

Excellent work @liamdebeasi ty for taking care of this so quickly. Bug squashed!

[antoinebassin]

Hi, it seems this bug still occurs.

Related code:

ionic start test-project blank --type=react --capacitor
cd test-project
npm install @ionic/react@5.6.3 @ionic/react-router@5.6.3
ionic serve

Console ouputs

[react-scripts] Starting the development server...
[react-scripts]
[react-scripts]
[react-scripts] ./node_modules/@ionic/core/dist/esm-es5/animation-096c6391.js
[react-scripts] Attempted import error: '__spreadArray' is not exported from 'tslib'.

going back to 5.6.1 fixed the problem

[liamdebeasi]

@antoinebassin Can you provide the output of running ionic info from your test-project directory?

[antoinebassin]

For sure, here it is

Ionic:

   Ionic CLI       : 6.13.1 (C:\Users\myname\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/react 5.6.3

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.13.4
   OS     : Windows 10

Strange fact:

• I deleted the project after my message.
• I restored it from the recycle bin to run ionic info and at this time, ionic serve worked perfectly.
  Edit : it was normal, the deleted version used ionic/react 5.6.1
• Then, I recreated the project from scratch (with the commands I wrote before) and the bug came back again.
• Then I run ionic info to get the outputs above.

[liamdebeasi]

Can you provide a GitHub repo where this issue happens? I followed your steps in #23090 (comment) and was unable to reproduce the issue.

[antoinebassin]

here it is
https://github.com/antoinebassin/ionic-5.6.2-test-project

[liamdebeasi]

Thanks! I'm not quite sure why you would still be getting that warning. I cloned your repo and confirmed that 5.6.3 was installed, but I did not get any errors. Another thing to try would be to verify that the package-lock.json file has 5.6.3 and not 5.6.2 listed. If that looks fine then last resort would be to look at the package.json file for @ionic/react inside of node_modules to verify that 5.6.3 is actually getting installed.

[antoinebassin]

package-lock.json

"@ionic/react": {
  "version": "5.6.3",
  "resolved": "https://registry.npmjs.org/@ionic/react/-/react-5.6.3.tgz",
  "integrity": "sha512-fpcxIopxJLzTA+EgHem9pXhX7J+hvCBMdobPoruD/8qmaDwVysM6ls/buf+GC1SNk7SvPizSaaArCO9Vm1zDug==",
  "requires": {
    "@ionic/core": "5.6.3",
    "ionicons": "^5.1.2",
    "tslib": "*"
  }
},
"@ionic/react-router": {
  "version": "5.6.3",
  "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-5.6.3.tgz",
  "integrity": "sha512-MlhHuI3ZBtZP20m28AxYkBltA0V2j3kFHwwuTc28eoZBNXU3QcUXzFbrdH0i6R4BTLdqJYxjjaC+ZXvwtjFtKw==",
  "requires": {
    "tslib": "*"
  }
},

node_modules/@ionic/react

{
  "_from": "@ionic/react@5.6.3",
  "_id": "@ionic/react@5.6.3",
  "_inBundle": false,
  "_integrity": "sha512-fpcxIopxJLzTA+EgHem9pXhX7J+hvCBMdobPoruD/8qmaDwVysM6ls/buf+GC1SNk7SvPizSaaArCO9Vm1zDug==",
  "_location": "/@ionic/react",
  "_phantomChildren": {},
  "_requested": {
    "type": "version",
    "registry": true,
    "raw": "@ionic/react@5.6.3",
    "name": "@ionic/react",
    "escapedName": "@ionic%2freact",
    "scope": "@ionic",
    "rawSpec": "5.6.3",
    "saveSpec": null,
    "fetchSpec": "5.6.3"
  },
  "_requiredBy": [
    "#USER",
    "/"
  ],
  "_resolved": "https://registry.npmjs.org/@ionic/react/-/react-5.6.3.tgz",
  "_shasum": "ebba1eb27bb6dcc2567e96587f4e2482e6b2e33f",
  "_spec": "@ionic/react@5.6.3",
  "_where": "d:\\Perso\\test-project",
  "bugs": {
    "url": "https://github.com/ionic-team/ionic/issues"
  },
  "bundleDependencies": false,
  "dependencies": {
    "@ionic/core": "5.6.3",
    "ionicons": "^5.1.2",
    "tslib": "*"
  },
  "deprecated": false,
  "description": "React specific wrapper for @ionic/core",
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^8.1.0",
    "@rollup/plugin-virtual": "^2.0.3",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@types/jest": "^26.0.15",
    "@types/node": "^14.0.14",
    "@types/react": "16.14.0",
    "@types/react-dom": "^16.9.0",
    "fs-extra": "^9.0.1",
    "jest": "^26.6.3",
    "np": "^6.4.0",
    "prettier": "^2.2.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "rimraf": "^3.0.2",
    "rollup": "^2.26.4",
    "rollup-plugin-sourcemaps": "^0.6.2",
    "ts-jest": "^26.4.4",
    "tslint": "^6.1.2",
    "tslint-ionic-rules": "0.0.21",
    "tslint-react": "^5.0.0",
    "typescript": "^3.9.5"
  },
  "files": [
    "dist/",
    "css/"
  ],
  "homepage": "https://github.com/ionic-team/ionic#readme",
  "jest": {
    "preset": "ts-jest",
    "setupFilesAfterEnv": [
      "<rootDir>/jest.setup.js"
    ],
    "testPathIgnorePatterns": [
      "node_modules",
      "dist-transpiled",
      "dist",
      "test-app"
    ],
    "modulePaths": [
      "<rootDir>"
    ]
  },
  "keywords": [
    "ionic",
    "framework",
    "react",
    "mobile",
    "app",
    "hybrid",
    "webapp",
    "cordova",
    "progressive web app",
    "pwa"
  ],
  "license": "MIT",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "name": "@ionic/react",
  "peerDependencies": {
    "react": ">=16.8.6",
    "react-dom": ">=16.8.6"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ionic-team/ionic.git"
  },
  "scripts": {
    "build": "npm run clean && npm run copy && npm run compile",
    "clean": "rimraf dist && rimraf dist-transpiled && rimraf routing",
    "compile": "npm run tsc && rollup -c",
    "copy": "node scripts/copy.js",
    "lint": "tslint --project .",
    "lint.fix": "tslint --project . --fix",
    "release": "np --any-branch --yolo --no-release-draft",
    "test.spec": "jest --ci",
    "test.treeshake": "node scripts/treeshaking.js dist/index.esm.js",
    "tsc": "tsc -p ."
  },
  "types": "dist/types/index.d.ts",
  "version": "5.6.3"
}

[antoinebassin]

Maybe I use a too old version of NodeJS or NPM ?

[liamdebeasi]

Can you try explicitly installing tslib@2.1.0?

[antoinebassin]

Now it works! Thank you :)

[Lucas-Rz]

Can you try explicitly installing tslib@2.1.0?

Worked for me too, thank you!

[jbagaresgaray]

Still encounter this issue on @ionic/vue 5.6.4

Ionic:

Ionic CLI : 6.12.4 (C:\Users\JANPHIL-PC\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/vue 5.6.4

Capacitor:

Capacitor CLI : 2.4.7
@capacitor/core : 2.4.7

Utility:

cordova-res : 0.15.3
native-run : 1.3.0

System:

NodeJS : v14.15.1 (C:\Program Files\nodejs\node.exe)
npm : 6.14.11
OS : Windows 10

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.