Resolved the '.css' file before '.tsx'

[recover758126]

I got error like this:

✘ [ERROR] No matching export in "../../node_modules/@pddg/mobile-bg-download-ui/lib/common/components/ApproximateScaleText/index.css" for import "ApproximateScaleText"

    ../../node_modules/@pddg/mobile-bg-download-ui/lib/common/components/Price/index.tsx:3:9:
      3 │ import { ApproximateScaleText } from '../ApproximateScaleText'
        ╵          ~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "../../node_modules/@pddg/mobile-bg-download-ui/lib/common/components/ApproximateScaleText/index.css" for import "ApproximateScaleText"

    ../../node_modules/@pddg/mobile-bg-download-ui/lib/components/MobileDownloadUIInner/views/BannerLegacyContainer/index.tsx:12:9:
      12 │ import { ApproximateScaleText } from '../../../../common/components/ApproximateScaleText'

In ApproximateScaleText, has two files , index.css, index.tsx, esbuild resolved the file that extension is '.css'.

[hyrious]

This was because the 2 files are in node_modules. There's a simple heuristic resolution method to look for .js, .css files over .ts, .tsx files when the path contains node_modules. Because packages in node_modules should always be .js / .css files so that users without a TypeScript environment could use them.

[recover758126]

@hyrious But in my project, node_modules contain .tsx,.ts files, on my case, how can i do to solve this problem

[hyrious]

You can write a custom plugin to manually resolve imports in that folder to prefer .tsx files. Example:

var CustomResolvePlugin = {
  name: 'custom-resolve',
  setup({ onResolve }) {
    // manually resolve files in node_modules/@pddg/mobile-bg-download-ui to prefer use the .tsx file
    onResolve({ filter: /(?:)/ }, args => {
      if (args.resolveDir.includes('node_modules/@pddg/mobile-bg-download-ui')) {
        const p = path.join(args.resolveDir, args.path)
        if (!path.extname(p)) {
          for (const ext of ['.tsx', '.ts', '.js', '.css', '/index.tsx', '/index.ts', '/index.js', '/index.css']) {
            const full = p + ext
            if (fs.existsSync(full)) {
              return { path: full }
            }
          }
        }
      }
    })
  }
}

[evanw]

I think this might be the same as #3341.

Just so you are aware, putting .ts files in node_modules is not a recommended workflow and is probably a bad idea. This is because the behavior of the published code may not match the intended behavior, which is because the behavior of TypeScript code can depend on settings in tsconfig.json and tsconfig.json files in node_modules are ignored by esbuild (which is because most cases of tsconfig.json in node_modules are from people accidentally publishing it, where they don't expect the settings to apply to their published package). The reasons for all of this are long and complicated. You can read #3019 and v0.18.0 for more information.