Cannot import .tsx file from .ts file (and vice versa)

When you write

import WriteEditor from './write_editor';

Webpack will automatically look for

• ./write_editor
• ./write_editor.js
• ./write_editor.json
• (And a few others)

Since you're using .ts and .tsx, you need to tell it to look for those too in your Webpack config using resolve.extensions:

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

In my case, I got same error when using typescript-eslint. It is an app created by create-react-app.

The way is by adding this code in .eslintrc.js.

module.exports = {
  // ...
  settings: {
    'import/resolver': {
      'node': {
        'extensions': ['.js','.jsx','.ts','.tsx']
      }
    }
  }
};