Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Filename needed in import in tsx

See original GitHub issue

When I import a component in a .js file I only need to specify the directory name, like this

import ProductCell from 'src/components/ProductCell'

If I rename that file to .tsx, I have to change that import to look like this, to include the filename as well

import ProductCell from 'src/components/ProductCell/ProductCell'

I expected the imports to behave the same in .tsx files as in .js files

This issue sounds kind of similar to #804 except that one is only about the api side

Issue Analytics

State:
Created 3 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

2reactions

thedavidpricecommented, Jul 14, 2020

Hi gents. This functionality will come with the conversion to first-class Typescript and was a reason for Peter re-writing the Named Directory macro as a Babel plugin. It was my understanding the Babel plugin was going to apply this convention to TS but apparently there’s another step required.

I’ll comment now on #804 that TS should also be taken into consideration for both API and Web when implemented.

And, for now, this isn’t so much a bug as unanticipated behavior when using TS vs JS – it would be nice to provide a heads up or document this for TS developers but I’m not sure where that could be stated effectively. Any thoughts?

0reactions

jtoarcommented, Dec 13, 2021

I tried to reproduce this one but I can’t; it seems like it’s been solved. Our TS support has come a long, long way! But if someone manages a reproduction please feel free to re-open.

Top Results From Across the Web

How to import .js file inside my .tsx file - Stack Overflow

You'll then need to import the file in the following way: import Samples from './sample-data';. You can read more on TypeScript modules in ......

How to Import another TypeScript Files ? - GeeksforGeeks

Code 1: This code file will be imported and save the file name as exportedFile.ts in a directory. // Exporting the class which...

Documentation - Modules - TypeScript

Modules are declarative; the relationships between modules are specified in terms of imports and exports at the file level. Modules import one another...

Content Types - ESBuild

#Imports follow ECMAScript module behavior. You might try to modify global state before importing a module which needs that global state and expect...

Imports - Astro Documentation

Import statements · JavaScript · TypeScript · JSX / TSX · NPM Packages · JSON · CSS · CSS Modules · Other Assets....