Typescript: ambient declaration file that declares a namespace results in build errors

[andyhopp]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes
$ npm --version
6.9.0

Which terms did you search for in User Guide?

Typescript Declaration @types

Environment

Environment Info:

System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Binaries:
Node: 10.15.3 - /usr/local/bin/node
npm: 6.9.0 - /usr/local/bin/npm
Browsers:
Chrome: 74.0.3729.169
Firefox: 60.6.2
Safari: 12.1.1
npmPackages:
react: ^16.8.6 => 16.8.6
react-dom: ^16.8.6 => 16.8.6
react-scripts: 3.0.1 => 3.0.1
npmGlobalPackages:
create-react-app: 2.1.8

Steps to Reproduce

1. create-react-app my-app --typescript
2. cd my-app
3. npm i --save-dev @types/amazon-connect-streams
4. Create a file named src/connect-service.ts:

export class Connect {
    constructor() {
    }

    public initialize(ccpElement: HTMLElement, options: connect.InitCCPOptions) {
        connect.core.initCCP(ccpElement, options);
        console.log('CCP Initialized!');
    }
}

5. npm i -g typescript # To demonstrate the Typescript compiler
6. tsc --build tsconfig.json # Note no errors
7. npm run-script build

Expected Behavior

I expected the CRA build to behave similarly to the native TS compiler.

Actual Behavior

=============
Failed to compile.

./src/connect-service.ts
  Line 6:  'connect' is not defined  no-undef

Search for the keywords to learn more about each error.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! connect-react-example@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the connect-react-example@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Reproducible Demo

The steps above only require an NPM install of a types file and a single file to be created.

[robertvansteen]

I don't know why there are no errors when running this through tsc but the error makes sense, connect is not defined. Why would you expect this to work in TypeScript?

[andyhopp]

Thanks for responding, @rovansteen! It's defined in the @types/amazon-connect-streams declarations file; the javascript library that this file is describing declares a global namespace (therefore the "declare namespace connect" in the .d.ts file). You don't see an explicit definition because it's an ambient module (i.e., you don't explicitly bring it in).

[Edit: I hereby retract my claim that babel-loader was at fault; it would appear that it's the linter. Researching further...]

[andyhopp]

It appears that the culprit is the typescript-eslint no-undef rule; there appears to be a bit of debate around this particular rule, with people pointing out that the typescript compiler catches this. Adding a line to eslint-config-react-app resolves the issue. I have also verified that the compiler catches undefined namespaces (simply changing the namespace to "connect0" results in the expected compiler error.).

[andyhopp]

@Timer Is there a way to find out whether this tweak would be included in the next release of CRA? (3.0.2, I suppose?)

[iansu]

Yes, it will be included in the 3.0.2 release.