Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
recover758126 opened this issue Jan 25, 2024 · 4 comments
Closed

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

recover758126 opened this issue Jan 25, 2024 · 4 comments

Comments

@recover758126
Copy link

recover758126 commented Jan 25, 2024

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
Copy link

hyrious commented Jan 25, 2024

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
Copy link
Author

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

@hyrious
Copy link

hyrious commented Jan 25, 2024

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
Copy link
Owner

evanw commented Jan 26, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants