[Bug] TypeScript error after upgrading react-map-gl from 5.2.8 to 7.0.21

[harurinn1]

Description

Hello,

I recently updated the react-map-gl library in my Create React App project from version 5 to version 7. After the upgrade, when I run npm start, I encounter a ERROR in node_modules/react-map-gl/src/components/layer.ts:34:22

Here is the error output:

ERROR in node_modules/react-map-gl/src/components/layer.ts:34:22 TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'BackgroundLayout'. No index signature with a parameter of type 'string' was found on type 'BackgroundLayout'. 32 | const prevLayout = prevProps.layout || {}; 33 | for (const key in layout) {

34 | if (!deepEqual(layout[key], prevLayout[key])) { | ^^^^^^^^^^^ 35 | map.setLayoutProperty(id, key, layout[key]); 36 | } 37 | } ..... ERROR in node_modules/react-map-gl/src/utils/style-utils.ts:45:11 TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ type: "background"; layout?: BackgroundLayout; paint?: BackgroundPaint; id: string; metadata?: any; ref?: string; source?: string | AnySourceData; ... 4 more ...; filter?: any[]; } | ... 9 more ... | { ...; }'. No index signature with a parameter of type 'string' was found on type '{ type: "background"; layout?: BackgroundLayout; paint?: BackgroundPaint; id: string; metadata?: any; ref?: string; source?: string | AnySourceData; ... 4 more ...; filter?: any[]; } | ... 9 more ... | { ...; }'. 43 | for (const propName of refProps) { 44 | if (propName in layerRef) { 45 | normalizedLayer[propName] = layerRef[propName]; | ^^^^^^^^^^^^^^^^^^^^^^^^^ 46 | } 47 | } 48 | }

I tried several workarounds, including downgrading the package, modifying my tsconfig.json to exclude the problematic file, and using a custom Webpack configuration to adjust the TypeScript loader options, but the issue persists.

I am using react-map-gl version 7.0.21 and TypeScript version 4.7.2.

Could you please help me resolve this issue or suggest a workaround? Thank you for your assistance.

Best regards

Expected Behavior

I expect to be able to use the react-map-gl library in my Create React App project without encountering any errors in the node_modules/react-map-gl/ directory.

Steps to Reproduce

maybe can try these steps

1. Create a new Create React App project with TypeScript template.
2. Install the latest version of react-map-gl
3. Add react-map-gl components to the project and use them in the code.
4. Run the application with npm start.
5. Observe the TypeScript error in the console output related to the react-map-gl package

Environment

• Framework version: react-map-gl@7.0.21
• Map library: mapbox-gl@2.13.0
• Browser: Chrome 107.0.5304.88
• OS: windows10

Logs

No response

[Pessimistress]

I cannot reproduce this. Please create a repo / Code Sandbox.

Your error suggests that TypeScript is checking node_modules/react-map-gl/src, which is not exported by the library. There seems to be an issue in your tsconfig.

[EthanSherr]

I'm also having the exact same ts errors - here is the output from pnpm tsc --showConfig

{
    "compilerOptions": {
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "types": [
            "vite/client",
            "node"
        ],
        "suppressImplicitAnyIndexErrors": false,
        "noEmit": true,
        "target": "esnext",
        "module": "esnext",
        "useDefineForClassFields": true,
        "isolatedModules": true,
        "jsx": "react-jsx",
        "skipLibCheck": true,
        "allowJs": false,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        "downlevelIteration": true,
        "moduleResolution": "node",
        "rootDir": "../..",
        "baseUrl": "./"
    },
    "files": [
        # REDACTED - everything under "./src" and some global d.ts files that have nothing to do with react-map-gl
    ],
    "include": [
        "src",
        "__generated__",
        "types",
        "../../types"
    ]
}

Do you know what may be causing the issue in my tsconfig?

[Pessimistress]

As I said in the last comment, if you need help, please create a repo that reproduce your issue.

[EthanSherr]

Thanks @Pessimistress I failed to come up with a repo but resolved my issue; In my case I realized that the issue was that I had accidentally auto-imported from 'react-map-gl/src/...' which gave typescript no choice but to try to compile it. My mistake! So my advice to someone encountering this issue would be - make sure you're importing from 'react-map-gl' !!!