javascript - 在反应组件中找不到模块
问题描述
当我尝试让我的图像反应组件时,我看到Cannot find module '../../assets/images/logo.png' or its corresponding type declarations.
. 我已添加declare module *.png
到 .d.ts 文件中,但它仍然无法正常工作。我从 webapack 开始,所以我的问题可能非常愚蠢,但我真的需要帮助。当我"include": ["src/**/*"]
从 tsconfig 中删除时,一切正常。有什么问题?
网页包:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')
module.exports = {
entry: '/src/index.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
devtool: 'cheap-module-source-map',
module: {
rules: [
{
test: /\.tsx?/,
loader: 'ts-loader'
},
{
test: /\.js/,
exclude: (/node_modules/),
loader: 'babel-loader'
},
{
test: /\.s[ac]ss$/i,
use: ["style-loader", "css-loader", "sass-loader",],
},
{
test: /\.(png$|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/',
publicPath: 'assets/'
}
}
]
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html'
}),
new webpack.HotModuleReplacementPlugin(),
new ErrorOverlayPlugin()
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 8080,
open: true,
historyApiFallback: true,
hot: true,
overlay: true,
}
}
tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": false,
"jsx": "react",
"esModuleInterop": true,
"baseUrl": "src",
"typeRoots" : ["node_modules/@types", "src/types"],
"allowSyntheticDefaultImports": true,
},
"include": ["src/**/*"],
"exclude": ["build"],
}
反应:
import React, { FC } from 'react'
import { NavLink } from 'react-router-dom'
import logo from '../../assets/images/logo.png'
const Header: FC = () => {
return (
<div className="header" id='header'>
<div className="logo">
<img src={logo} alt="logo"/>
<h1>Logo</h1>
</div>
</div>
);
}
export default Header;
我一直在页面上看到照片,但错误仍然存在。
解决方案
在里面创建一个declarations.d.ts
文件src/
并添加declare module '*.png';
到它。
这应该可以解决问题,因为默认情况下用户定义的声明应该放在里面src/
。
推荐阅读
- c# - 从网络摄像头录制视频的速度有问题
- angular - 空体发送文件列表
- ios - 应用程序重新启动/重建后,文件 URL 无法从书签中解析
- react-native - React Navigation 5.x 版:将状态和功能传递给所有屏幕
- google-cloud-platform - 什么是 Cloud Firestore 实体写入配额?
- angular - Angular + 动态加载的 Fontawesome 图标错误
- javascript - 为什么这段代码无法修改 MongoDB 用户?
- python - Python:Elasticsearch 中的通配符查询
- mysql - 从单列中选择数据作为多条记录
- c++ - 我的 VSCode 调试器不显示任何变量值(附图片)(c++)