cra-template-pwa-typescript gives a TS2322 error about pwa

[jeffposnick]

What I remember trying to do when we set up these templates was to leave out all of the Workbox dependencies, because the react-scripts package.json already depends on workbox-webpack-plugin, which in turn depends on the individual Workbox libraries.

My recollection is that leaving out those explicitly dependencies led to warning messages during either install or build time... I think having to do with yarn not being happy that the project relied on dependencies that were inherited instead of explicitly listed? This was a while ago so I'm afraid I'm foggy on some of the details as to what broke.

[jeffposnick]

Hello @moltenice!

Can you provide some additional context about which version of c-r-a you're using? Where are you seeing the error—during compilation, or in your editor?

c-r-a v4.x should be using Workbox v5.1.4, and that project has ExpirationPlugin defined as implementing WorkboxPlugin. Workbox itself wouldn't compile if that weren't the case, so I'm not entirely sure how you're ending up with that error.

[moltenice]

Hello @jeffposnick! Thanks for getting back to me.

Based on your response I did some digging, and it looks like this is the culprit: https://www.npmjs.com/package/workbox-expiration/v/6.1.5

This version is the current version at the time of this post.

Reverting back to 5.1.4 fixes it.

Example package.json to replicate the exact error I am getting in my original message:

{
  "name": "typescript-example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.23",
    "@types/node": "^12.20.13",
    "@types/react": "^16.14.6",
    "@types/react-dom": "^16.9.13",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.2.4",
    "web-vitals": "^0.2.4",
    "workbox-background-sync": "^5.1.4",
    "workbox-broadcast-update": "^5.1.4",
    "workbox-cacheable-response": "^5.1.4",
    "workbox-core": "^5.1.4",
    "workbox-expiration": "^6.1.5",
    "workbox-google-analytics": "^5.1.4",
    "workbox-navigation-preload": "^5.1.4",
    "workbox-precaching": "^5.1.4",
    "workbox-range-requests": "^5.1.4",
    "workbox-routing": "^5.1.4",
    "workbox-strategies": "^5.1.4",
    "workbox-streams": "^5.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Hope that sheds some light :)

[jeffposnick]

Yes, so that does explain what happened. You can't mix-and-match different versions of the Workbox libraries in the same service worker.

I'm going to close this, because I'm assuming that this isn't something that needs to be fixed in this project itself—there should be only v5.1.4 used across all of the Workbox libraries by default, which are pulled in via https://github.com/facebook/create-react-app/blob/7bdeced8495370b683c08b86bc84b66af83f2f0a/packages/react-scripts/package.json#L89

[moltenice]

@jeffposnick as far as I know, when using npx create-react-app my-app --template pwa-typescript, it doesn't use "workbox-webpack-plugin" but directly puts in the dependencies themselves.

That package.json I attached above was what was made using this command (and then I manually changed "workbox-expiration" to recreate the issue I was having)

Also, I think 5.1.4 got updated by itself because of an npm audit fix run, but I could be wrong! Just letting you know in case there was a security fix done in v6 but v5 was left out!

[jeffposnick]

Hello @moltenice—it's definitely possible that manually running npm audit fix might have caused some of the dependencies to get out of sync. That's also mostly out of our control in this project, as far as I can tell. As long as doing the default npx create-react-app my-app --template pwa-typescript led to an install that was internally consistent, I think that's about as good as we can get.

[moltenice]

@jeffposnick do you reckon you could make the default npx command use "workbox-webpack-plugin"? That would probably stop npm audit fix from affecting anything!

I am assuming that plugin can be used as a dependency instead of:

    "workbox-background-sync": "^5.1.4",
    "workbox-broadcast-update": "^5.1.4",
    "workbox-cacheable-response": "^5.1.4",
    "workbox-core": "^5.1.4",
    "workbox-expiration": "^5.1.4",
    "workbox-google-analytics": "^5.1.4",
    "workbox-navigation-preload": "^5.1.4",
    "workbox-precaching": "^5.1.4",
    "workbox-range-requests": "^5.1.4",
    "workbox-routing": "^5.1.4",
    "workbox-strategies": "^5.1.4",
    "workbox-streams": "^5.1.4"