导入文件而不添加.jsx 最后不起作用

Question

I am working on a react project in which I have imported .jsx files without adding the extension .jsx at the end. But while I was trying to incorporate typescript files. It stopped identifying files unless the extension is added at the import statement.

import Item from "./Item"
//not working

import Item from "./Item.jsx"
//working

How can I fix this? where could the problem be? I use create-react-app

Answer 1

First of all, you have to add typescript into your project if you want to incorporate it. Now for the extension problem, you can add a webpack.config.js file and include the following in it:

{
    module.exports = {
        entry: './index.tsx',
        resolve: {
            extensions: ['', '.js', '.jsx', '.tsx']
        }
    }
}

this will enable you to import files without extensions.