[英]Why IDE shows me error when I import SVG file to use as React component?
I am try to using SVG Icon as React component with svgr
我正在尝试使用 SVG 图标作为带有
svgr
的 React 组件
everything works well.一切正常。 I can imoport SVG and svgr convert it to ReactComponents perfectly.
我可以将 SVG 和 svgr 完美地转换为 ReactComponents。
but, My IDE webstorm still shows me error when I import svg like below但是,当我像下面这样导入 svg 时,我的 IDE webstorm 仍然显示错误
I am using typescript and nextjs as well.我也在使用 typescript 和 nextjs。
what is real problem?什么是真正的问题? is it only caused by IDE?
是否仅由 IDE 引起? or Should I setup additional options?
或者我应该设置其他选项吗?
here is my config files这是我的配置文件
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"baseUrl": "src/"
},
"exclude": [
"node_modules"
],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"**/*.svg"
]
}
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
config.module.rules.push({
test: /\.svg$/,
use: [{
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: {
removeViewBox: false
}
}
}
}],
})
return config
},
webpackDevMiddleware: (config) => {
// Perform customizations to webpack dev middleware config
// Important: return the modified config
return config
},
}
and no babelrc because I am using default babel setting given by nextjs.并且没有 babelrc,因为我使用的是 nextjs 给出的默认 babel 设置。
Thanks in advance提前致谢
I find by my self.我自己找的。 It is caused by typescript.
它是由 typescript 引起的。 i had to declare type for
.svg
我必须为
.svg
声明类型
I made typing.d.ts file on the root我在根目录下创建了 typing.d.ts 文件
declare module '*.svg' {
import * as React from 'react';
export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
The IDE does not show error any more IDE 不再显示错误
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.