question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

serviceWorker.ts typescript compilation fail with @types/node": "^13.13.0

See original GitHub issue

Describe the bug

serviceWorker.ts created bye CRA using typescript template generate a compilation compilation error if you upgrade nodejs typedefs with @types/node": "^13.13.0

The problem can be resolved using @types/node": "^12.12.36 but I think it is more correct to define the behavior in case URL is null for the future.

Did you try recovering your dependencies?

Yes

npm --version
6.14.4

Which terms did you search for in User Guide?

“create-react-app” serviceWorker typescript compilation fail

Environment

npx create-react-app --info
npx: installed 99 in 4.647s

Environment Info:

  current version of create-react-app: 3.4.1
  running from /home/ev/.npm/_npx/21142/lib/node_modules/create-react-app

  System:
    OS: Linux 5.3 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-3840QM CPU @ 2.80GHz
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: Not Found
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Chrome: 81.0.4044.113
    Firefox: 75.0
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

npx create-react-app test01 --template typescript
cd test01
npm i @types/node@13.13.0
npm run build

Expected behavior

In your code if you type new URL(param) param must be a valid string but if you set param as process.env.PUBLIC_URL this could be undefined.

Actual behavior

TypeScript error in .../src/serviceWorker.ts(32,7):
Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
  Type 'undefined' is not assignable to type 'string'.  TS2345

    30 |     // The URL constructor is available in all browsers that support SW.
    31 |     const publicUrl = new URL(
  > 32 |       process.env.PUBLIC_URL,
       |       ^
    33 |       window.location.href
    34 |     );
    35 |     if (publicUrl.origin !== window.location.origin) {

Reproducible demo

Follow the instructions given in point [Steps to reproduce]

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:4
  • Comments:9

github_iconTop GitHub Comments

1reaction
erosvalcommented, Apr 20, 2020

thank you @bartlomiejzuber, this solve the question!

1reaction
bartlomiejzubercommented, Apr 20, 2020

@raulfdm @erosval I see that root cause of this issue is already tracked here https://github.com/DefinitelyTyped/DefinitelyTyped/pull/44003, therefore if they decide to revert, there will be no longer any fix required.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Unable to compile typescript project - node.js - Stack Overflow
I have installed @types/node and changing types to node throws another error. I am using same configuration for another project and it works ......
Read more >
Create a Service Worker with TypeScript - Dev Extent
This will first use the TypeScript compiler to typecheck the code and then use the Babel compiler to generate JavaScript for the browser....
Read more >
the deferred dom node could not be resolved to a valid node.
serviceWorker.ts created bye CRA using typescript template generate a compilation compilation error if you upgrade nodejs typedefs with @types/node": ...
Read more >
Creating Your Own GitHub Action With TypeScript
However, since the project is in TypeScript, it will have to be compiled into JavaScript before building the entry point, which will be...
Read more >
The Ultimate Guide to setting up Node.js with TypeScript and ...
Project setup · Initialize a new GitHub project · Creating a package.json · NPM Scripts: Serve and Start · Creating an index.ts file...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found