Ignoring declares

[unimonkiez]

Bug report
I'm bundling my code with webpack, and I have some declares in my files:
Input code - src/globals.d.ts

declare const __DEV__: boolean;
declare module '*.pem' {
  const pem: string;
  export default pem;
}

Webpack bundles fine, and also my editor (vscode) recognizes everything, but when using you library (which is great btw!) it doesn't consider the d.ts files which are placed in src folder.

Code - src/store/router/index.ts

...
private handleRouteChange(location: Location) {
    const { locationRegexes } = this;

    const foundLocation = locationRegexes.find(({ regex }) => testRegex(regex, location.pathname));

    if (!foundLocation) {
      if (__DEV__) {
        console.warn(`Route for ${location.pathname} not found, check config.`);
      }
...

Actual output

src/store/index.ts(26,5): error TS2304: Cannot find name '__DEV__'.
src/store/router/index.ts(38,11): error TS2304: Cannot find name '__DEV__'.
C:\Users\uv\dev\max-quality\node_modules\dts-bundle-generator\check-diagnostics-errors.js:20
    throw new Error(failMessage);
    ^

Error: Compiled with errors
    at checkDiagnosticsErrors (C:\Users\uv\dev\max-quality\node_modules\dts-bundle-generator\check-diagnostics-errors.js:20:11)
    at Object.checkProgramDiagnosticsErrors (C:\Users\uv\dev\max-quality\node_modules\dts-bundle-generator\check-diagnostics-errors.js:11:5)
    at getDeclarationFiles (C:\Users\uv\dev\max-quality\node_modules\dts-bundle-generator\compile-dts.js:67:32)
    at Object.compileDts (C:\Users\uv\dev\max-quality\node_modules\dts-bundle-generator\compile-dts.js:15:20)
    at generateDtsBundle (C:\Users\uv\dev\max-quality\node_modules\dts-bundle-generator\bundle-generator.js:33:33)
    at compilation.chunks.forEach (C:\Users\uv\dev\max-quality\node_modules\ts-declaration-webpack-plugin\index.js:25:19)
    at Array.forEach (<anonymous>)
    at compiler.plugin (C:\Users\uv\dev\max-quality\node_modules\ts-declaration-webpack-plugin\index.js:22:23)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\uv\dev\max-quality\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:7:1)

[timocov]

Hi,

which is great btw!

glad to hear that, thanks!

Do you have a little repro without your code? What is your tsconfig.json? Is your project compiled via tsc command? How do you add src/globals.d.ts to your project/compilation: reference path, import, includes in tsconfig, something else?

[unimonkiez]

I'll create a repo demonstrating the problem.

[unimonkiez]

Hey,
I've reproduced the bug on this repo.
It has a branch called bug-dts-bundle-generator, so just trying to start the server will fail over there.

Simpler way this see the issue is just to run node ./run-dts-bundle-generator-on-server.js on the project's root, same issue.
The log while running node ./run-dts-bundle-generator-on-server.js:

$ node run-dts-bundle-generator-on-server.js
packages/server/src/schema/index.ts(7,15): error TS2304: Cannot find name '__DEV__'.
packages/server/src/schema/query/index.ts(5,27): error TS2307: Cannot find module 'src/pem/dev-private-key.pem'.
C:\Users\uv\dev\mono-js-boilerplate\node_modules\dts-bundle-generator\check-diagnostics-errors.js:20
    throw new Error(failMessage);
    ^

Error: Compiled with errors
    at checkDiagnosticsErrors (C:\Users\uv\dev\mono-js-boilerplate\node_modules\dts-bundle-generator\check-diagnostics-errors.js:20:11)
    at Object.checkProgramDiagnosticsErrors (C:\Users\uv\dev\mono-js-boilerplate\node_modules\dts-bundle-generator\check-diagnostics-errors.js:11:5)
    at getDeclarationFiles (C:\Users\uv\dev\mono-js-boilerplate\node_modules\dts-bundle-generator\compile-dts.js:67:32)
    at Object.compileDts (C:\Users\uv\dev\mono-js-boilerplate\node_modules\dts-bundle-generator\compile-dts.js:15:20)
    at generateDtsBundle (C:\Users\uv\dev\mono-js-boilerplate\node_modules\dts-bundle-generator\bundle-generator.js:33:33)
    at Object.<anonymous> (C:\Users\uv\dev\mono-js-boilerplate\run-dts-bundle-generator-on-server.js:4:13)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)

There is also a problem on the client (node ./run-dts-bundle-generator-on-client.js), same issue.

[timocov]

Ok, thank you! I will take a look to your repro at Monday.

For now, I can suggest you a workaround (I believe it should help to fix it) - you need to include your globals.d.ts file in the compilation process. You can do it, for example, by referencing the globals file where you use it via /// <reference path directive. Or you can create new tsconfig (for dts only for example) with force including the globals file via include property in tsconfig.

[timocov]

Hi @unimonkiez,

the reason of this error is that dts-bundle-generator does not compile the whole project defined in tsconfig (for performance reasons) - only input one and all descendant dependencies.

In your case it is similar to run the following:
mono-js-boilerplate/packages/server$ ../../node_modules/.bin/tsc --noEmit --lib es2015,dom,esnext --allowSyntheticDefaultImports src/schema/index.ts. If you run this, you'll get the same errors.

To fix this, as I said in #50 (comment), you need to reference to your globals.d.ts (and to pem-module.d.ts for server) in files which use they (/// <reference path="../path/to/globals.d.ts" />). But it seems that include does affect nothing in this case.

Also I do not think that we need to build the whole project before start generating dts bundle or even to have CLI/API's option for that.

[timocov]

If you have further questions/suggestions/thoughts - please tell me.

[drudv]

I have the same problem with a code that imports .scss files. Initially I had multiple errors like: error TS2307: Cannot find module './whatever.scss'. and then by your suggestion, I added /// <reference path="./lib.d.ts" /> that contains the following:

declare module '*.scss' {
	const content: any;
	export default content;
}

Now it compiles, but the result check fails with: 'export' modifier cannot be applied to ambient modules and module augmentations since they are always visible., because this d.ts file is added to the output with export modifier:

export declare module '*.scss' {
	const content: any;
	export default content;
}

Can I workaround it somehow?

[timocov]

Hey @drudv,

Can I workaround it somehow?

Yeah, you need to add your declaration of declare module '*.scss' via typeRoots compiler option, not via reference path.

[drudv]

Hey @timocov

Thanks for the help. I tried to add the directory containing scss type definitions to typeRoots, but still see these errors (error TS2307: Cannot find module ...). Looks like it's because typeRoots describes global types, but I import scss files from my project. Also according to this comment typeRoots is not recommended for use (it's preserved for compatibility with old typings).

Could you please suggest anything more? ;)

[timocov]

@drudv Sorry for long delay.

Looks like it's because typeRoots describes global types, but I import scss files from my project

I'm not sure that it's a reason of this error. I've used this approach in product I'm working on and it works fine for us. Is it your project private/not open-sourced?

It looks like @foxable already created an issue to fix it without applying typeRoots - #74.

[timocov]

Hey @drudv,

it seems that #74 is not actually about your problem. I just created another issue for that - #75. I'll fix it soon.

[igorpupkinable]

Still trying to figure this out.

I have packages/ui-core/types/import-svg.d.ts with

declare module '*.svg' {
  const value: string;

  export default value;
}

I import it in packages/ui-core/src/Input/Checkbox/Checkbox.tsx like this

/// <reference types="../../../types/import-svg" />

import iconSrc from './icon.svg';

I have added inlineDeclareGlobals: true and inlineDeclareExternals: true in DTS config as well as "include": ["./types"] and "typeRoots": ["./node_modules/@types", "./types"] in TS config.

I still do not see *.svg module inlined in the final output.

Could anyone provide a working example please?

[igorpupkinable]

@timocov I have looked through issues including closed ones for a possible solution as well as examples and tests. Unfortunately, none have worked for the issue above. Do you have a working example with *.svg or *.png or any other extension/module to look at?

[timocov]

@igorpupkinable can you create a repro please?

[igorpupkinable]

@timocov please find example repository here.
It does not contain any attempts or workarounds to include *.svg module, but you should get an error if you execute yarn clean && yarn emit:types from the root.

Is there anything else I can help you with?

[igorpupkinable]

@timocov could you give any hints for the above please? Unfortunately, this is blocking our team to publish a core package.

[timocov]

Hi @igorpupkinable, sorry for late reply.

First of all, please read #66 (comment) and #102 (comment) to see difference between how tsc and dts-bundle-generator work. So in your case tsc uses all .d.ts files rather than dts-bundle-generator uses the only entry point for performance reason. That's why you see an error while bundling dts. To fix it you need to add a module with a declaration of *.svg modules. For instance, you can add /// <reference path="../../../types/import-svg.d.ts" /> to packages/ui-core/src/Input/Checkbox/Checkbox.tsx file.

The other thing I don't really get from your messages is what do you expect to see in the bundle result. If you add the line above you'll get the following output:

import { FC } from 'react';

export declare type CheckboxProps = {
	label: string;
	onChange: (value: boolean) => void;
	value?: boolean;
};
export declare const Input: {
	Checkbox: FC<CheckboxProps>;
};

export {};

There is still no module declaration for *.svg module but I'm not sure do you want to have it here or not (based on your comment #50 (comment) "I still do not see *.svg module inlined in the final output."). Please let me know what you're trying to achieve in the end.

[igorpupkinable]

You are right. *.svg declaration should not be there after webpack has finished processing TS files. It just does not make sense for production version since no reference to SVG file will be in compiled code any more. Thank you for clarification.

[Rgnwld]

How can i work with images with this bundle?
Can i just pass by the file check?
error TS2307: Cannot find module 'UI/icons/logo.png' or its corresponding type declarations

[timocov]

@Rgnwld please read this comment #50 (comment)