Question 138768 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Can’t import path ending with ‘.tsx’? Try importing ‘./components/header.js’ instead?

I created my first typescript project with the command npx create-react-app myApp --template typescript, but I’m getting the error TS2691: An import path cannot end with a '.tsx' extension. Consider importing './components/header.js' instead.. I already looked for this error on the Internet, but I didn’t find anything.

I also got the error ERROR in src/components/header.tsx TS1208: 'header.tsx' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

App.tsx:

import './App.css';
import Header from './components/header.tsx';
import Main from './components/main.tsx';
import Footer from './components/footer.tsx';

function App() {
  return (
    <>
      <Header></Header>
      <Main></Main>
      <Footer></Footer>
  </>
  );
}

export default App;

footer.tsx:

function Footer(){
    return (
        <footer>
            <p>Desenvolvido por Priscila Alves, e-mail: [email protected]</p>
        </footer>
    );
}
export default Footer;

package.json:

{
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "tsc",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...
Tags:

2

Answers


  1. 0

    this config to your webpack config file:

    {
  resolve: {
    extensions: [".js", ".json", ".ts", ".tsx"],
  },
}

    these rules to your typescript-eslint

    module.exports = {
  settings: {
    'import/resolver': {
      'node': {
        'extensions': ['.js','.jsx','.ts','.tsx']
      }
    }
  }
};
    Login or Signup to reply.
  2. 0

    Hi first lets look into the error:

    The error message "TS2691: An import path cannot end with a ‘.tsx’ extension. Consider importing ‘file’ instead" is a TypeScript compiler error that occurs when you try to import a TypeScript file with a .tsx extension using an import statement that ends with .tsx.

    Possible way of resolving it:

    For example, if you have an import statement like this:

    import MyComponent from './MyComponent.tsx';

    You can change it to:

    import MyComponent from './MyComponent';

    I dont really know the circumstances but the answer from @Reza Hatami is a possible way to resolve the issue too.

    Hope this helped!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search