Using Prebid with Typescript requires specific (undocumented) settings in tsconfig.json

[a-lopatin-muse]

Description

I’m using webpack + babel to bundle prebid 10 as a module in my project. When I import a prebid lib like this:

import 'prebid.js/modules/gptPreAuction';

TypeScript starts reporting a large number of errors coming from prebid source files, for example:

../../../../node_modules/prebid.js/src/video.ts:72:47
TS7006: Parameter 'method' implicitly has an 'any' type.

It looks like TypeScript treats prebid source files as part of my project, not as vendor code, even though they live in node_modules.

Expected behavior

Prebid should be treated as a third-party dependency, and TypeScript should not type-check its internal source files.

Actual behavior

After importing a module from prebid.js/modules/*, TypeScript starts type-checking files under: node_modules/prebid.js/src/**/*.ts

This results in many TS errors inside Prebid itself.

Environment

Prebid.js version: 10.15.0, webpack, babel, tsc

tsconfig.json options includes:

{
"exclude": ["node_modules", "**/node_modules"],
"skipLibCheck": true,
"allowJs": true,
"checkJs": false
}

decs.d.ts: declare module 'prebid.js';

What is a right way to build it now as a npm module?

[dgirardi]

This seems to be the minimal tsconfig.json required for tsc to not complain:

{
  "compilerOptions": {
    "module": "NodeNext", 
    "skipLibCheck": true
  }
}

I don't know if this will fix your issue as the errors I get without it are different. We may want to do something about some of them so I'll note them below.

What you describe seems more likely to be coming from webpack, could you try adding the exclude rule there - or post your webpack config?

TSC errors:

• without module: NodeNext (other node variants are likely to also work) I get errors like

  src/index.ts:1:18 - error TS2307: Cannot find module 'prebid.js' or its corresponding type declarations.
    There are types at '/home/demetrio/src/ts-example/node_modules/prebid.js/dist/src/src/prebid.public.d.ts', but this result could not be resolved under your current 'moduleResolution' setti
  ng. Consider updating to 'node16', 'nodenext', or 'bundler'.    
  

  this is due to the exports section in our package.json.
• without skipLibCheck there are errors like

  node_modules/prebid.js/dist/src/src/targeting.d.ts:43:116 - error TS2503: Cannot find namespace 'googletag'.
  

  (types that are imported but not re-exported) and

  node_modules/prebid.js/dist/src/src/utils.d.ts:353:10 - error TS2304: Cannot find name 'deepAccess'.                              
  
  353 export { deepAccess };                                                                                                                                                                    
  

  (types that are generated from .js files, not used in our build but exported)

[a-lopatin-muse]

"module": "NodeNext", 
"skipLibCheck": true

it is not enough.

our ts config looks like this:

{
    "compilerOptions": {
        ...,
        "module": "esnext",
        "moduleResolution": "node10",
        "jsx": "react-jsx",
        "strict": true,
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "isolatedModules": false,
        "esModuleInterop": true,
        "allowJs": true,
        "checkJs": false,
        "typeRoots": [
            "./node_modules/@types",
             ...
        ],
        ....,
        "paths": {
            ..., etc
        },
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": true,
        "noImplicitThis": true,
        "strictNullChecks": true,
        "strictFunctionTypes": true,
        "strictBindCallApply": true,
        "strictPropertyInitialization": true,
        "strictBuiltinIteratorReturn": true,
        "alwaysStrict": true
    },
    "files": [
        "./decs.d.ts",
        ..., etc
    ],
    "exclude": [
        "node_modules",
        "**/node_modules",
        "public",
        "vendor",
        ".git",
        ".gitlab",
        ".idea",
        ".vscode",
        "docs"
    ]
}

webpack config is quite big, but the main part is this:

        plugins.push(
            new ForkTsCheckerWebpackPlugin({
                async: !isDevelopment,
                typescript: { configFile: tsCheckerConfigPath },
            }),
        )

        resolvePlugins.push(
            new TsconfigPathsPlugin({
                configFile: tsConfigPath,
                extensions: fileExtensions,
            }),
        )

The problem was when I used the same ts configFile for both this plugins. When I separate them and started to use tsCheckerConfigPath for ForkTsCheckerWebpackPlugin - I solved the problem.
The difference between tsConfigPath and tsCheckerConfigPath in this line: "prebid.js/*": ["./decs.d.ts"], that I added to the paths section in tsCheckerConfigPath.

[dgirardi]

Is it an option to set module: "nodenext" instead? I believe the problem is that your module resolution is ignoring prebid's package exports. Your fix appears to just turn off the type checker, which is fine, but it shouldn't be necessary - and I'd be worried about the actual bundling to also be using the wrong source files.

Prebid's source ts files (like the video.ts in your error message) should not be pulled in as dependencies; we compile everything into .js and .d.ts files. This doesn't affect only the type checker, there are some features that depend on our compilation logic. An import like prebid.js/modules/gptPreAuction should be resolved to ./node_modules/prebid.js/dist/src/modules/gptPreAuction.js (you can check this in the output of webpack --profile --json).

[a-lopatin-muse]

It is not possible for us to use module: "nodenext" now. Anyway, I tried and again got the same errors from prebid.

On the screenshot we can see, that webpack resolve paths correctly.

I understand what do you mean. The problem with ForkTsCheckerWebpackPlugin and yes, maybe with webpack too - they don't understand the imports from the package.json from prebid and don't resolve it to the dist folder.

[dgirardi]

We should be able to remove the skipLibCheck requirement with a few adjustments to the types;
I am not sure we can avoid the module requirement - I am not aware of any typescript-native equivalent to npm's exports.