javascript - TSLint `import-name` complains about import React from 'react' and turns it lowercase
问题描述
I'm currently using React with TypeScript and TSLint and up until now I was importing React as:
import * as React from 'react';
I'd like to switch that to:
import React from 'react';
So that I don't need an additional line and const
declaration to destructure hooks like useCallback
, useEffect
or useRef
:
import React, { useCallback, useEffect, useRef } from 'react';
But I get the following error from TSLint:
Misnamed import. Import should be named 'react' but found 'React' (
import-name
)tslint(1)
When running with fix: true
, that will automatically be converted to:
import react from 'react';
The error will go away, but I'd like to keep it as React
.
I'm using TypeScript 3.5.1
and TSLint 5.17.0
.
解决方案
To make that error go away you need to add this rule
into tslint.json
:
"import-name": [true, { "react": "React" }],
As stated in the docs:
Since version
2.0.9
it is possible to configure this rule with a list of exceptions.For example, to allow underscore to be imported as
_
, add this configuration:'import-name': [ true, { 'underscore': '_' }]
Then, in tsconfig.json
you need to add:
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
While "esModuleInterop": true
should set "allowSyntheticDefaultImports": true
automatically (so there's no need to define both), there was an issue with that and some tools might be checking the value of those flags, so you might need to set both if using an pre-fix TypeScript version.
For more on that, see Do I ever need explicit allowSyntheticDefaultImports if esModuleInterop is true configuring TypeScript transpilation?.
From the docs:
--allowSyntheticDefaultImports
: Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
--esModuleInterop
: Emit__importStar
and__importDefault
helpers for runtime babel ecosystem compatibility and enable--allowSyntheticDefaultImports
for typesystem compatibility.
Also, allowSyntheticDefaultImports
was added in TypeScript 1.8
while esModuleInterop
was added in TypeScript 2.7
, so depending on the version you are using you would have to stick to allowSyntheticDefaultImports
. For more on that, see https://devblogs.microsoft.com/typescript/announcing-typescript-2-7/
If you don't set them, you will get the following error:
Module '".../node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag
If you are still getting errors when setting one or the two of them to true
, it might be worth taking a look at: https://github.com/microsoft/TypeScript/issues/27329.
推荐阅读
- typescript - 在打字稿函数中传播数组:错误 TS2556
- android - Android 蓝牙 RFCOMM 连接失败,getUUIDS() 没有返回 SPP UUID
- c# - 从 UpdatePanel Asp.Net 中排除控件
- python - 如何使用opencv python添加多个摄像头
- automation - R Markdown:如何为日常执行做准备
- ios - pkpass:JSON 格式的未知编码(iOS 钱包通行证文件)
- python - Python:为神经网络定义网格搜索参数的问题
- google-bigquery - BigQuery 将百分位结构嵌套到具有列的表中
- python - 数组的Python模板化公式
- swift - SwiftUI ScrollView 滚动到上一个 TextField