Cannot find module *.png on bit tag of typescript

[rap0so]

Describe the bug

I'm trying to tag a component by running bit tag but the command cannot find the current compiler, it returns the error: Cannot find module [image path] The url doc with example is broken, so...

Steps to Reproduce

1. Add an image to folder component
2. Import this image on a ts file
3. Bit tag the component

Expected Behavior

Tagged component with imported images

Screenshots, exceptions and logs

Specifications

• Bit version: 14.7.1
• Node version: v10.16.3
• npm / yarn version: 1.19.1
• Platform: Windows 10 Pro
• Compiler / Tester (include version): bit.envs/compilers/typescript@3.1.28

[qballer]

can you please share your bitmap file and bit.json file (or bit entry in package.json).

[rap0so]

bit.json

{
    "env": {
        "compiler": "bit.envs/compilers/typescript@3.1.28",
        "tester": "bit.envs/testers/jest@22.4.3"
    },
    "componentsDefaultDirectory": "src/components/{name}",
    "packageManager": "yarn"
}

.bitmap

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */

{
    "empty-state@0.0.1": {
        "files": [
            {
                "relativePath": "src/components/EmptyState/EmptyState.tsx",
                "test": false,
                "name": "EmptyState.tsx"
            },
            {
                "relativePath": "src/components/EmptyState/assets/images/404.png",
                "test": false,
                "name": "404.png"
            },
            {
                "relativePath": "src/components/EmptyState/assets/images/505.png",
                "test": false,
                "name": "505.png"
            },
            {
                "relativePath": "src/components/EmptyState/assets/images/default.png",
                "test": false,
                "name": "default.png"
            },
            {
                "relativePath": "src/components/EmptyState/imageMapper.tsx",
                "test": false,
                "name": "imageMapper.tsx"
            },
            {
                "relativePath": "src/components/EmptyState/index.d.ts",
                "test": false,
                "name": "index.d.ts"
            },
            {
                "relativePath": "src/components/EmptyState/index.ts",
                "test": false,
                "name": "index.ts"
            },
            {
                "relativePath": "src/components/EmptyState/tsconfig.json",
                "test": false,
                "name": "tsconfig.json"
            },
            {
                "relativePath": "src/components/EmptyState/types.ts",
                "test": false,
                "name": "types.ts"
            },
            {
                "relativePath": "src/components/EmptyState/typings/index.d.ts",
                "test": false,
                "name": "index.d.ts"
            }
        ],
        "mainFile": "src/components/EmptyState/index.ts",
        "trackDir": "src/components/EmptyState",
        "origin": "AUTHORED",
        "exported": false
    },
    "version": "14.7.1"
}

[JoshK2]

Hey @rap0so, I found the source of the problem and I work on this. The problem is with the generateTypes function, the output of the file is not wrapped with declare module, for example, the output for JPG file is:

const image: string;
export default image;

and it needs to be:

declare module "*.jpg" {
    const image: string;
    export default image;
}

or

    declare const image: string;
    export default image;

@qballer

[JoshK2]

@rap0so I published a new version of the compiler that solved the problem: https://bit.dev/bit/envs/compilers/react-typescript?version=3.1.31