![](/img/trans.png)
[英]export 'default' (imported as 'FontAwesomeIcon') was not found in '@fortawesome/react-fontawesome' (possible exports: FontAwesomeIcon)
[英]Cannot find module '@fortawesome/react-fontawesome
當我構建我的項目時出現錯誤:找不到模塊'@fortawesome/react-fontawesome'。 您的意思是將“moduleResolution”選項設置為“node”,還是將別名添加到“paths”選項?
包是用紗線安裝的,如下所示https://fontawesome.com/how-to-use/on-the-web/using-with/react
在腳本中導入:
import * as React from 'react';
import Select from 'react-select';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: {
task_creator: "./src/service.tsx"
},
output: {
filename: '[name].js'
},
resolve: {
modules:[
path.resolve(__dirname, 'src'),
'node_modules',
],
extensions: ['.ts', '.tsx', '.js'],
},
module: {
rules: [
{
test: /\.tsx$/, loader: 'ts-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'service',
filename: 'service.html',
template: 'templates/service.html'
})
]
};
package.json
{
"name": "service",
"version": "0.1.0",
"private": true,
"description": "Task assistant service web UI",
"scripts": {
"dev": "webpack",
"dev:watch": "webpack --watch",
"dist": "webpack --mode production",
"lint": "node node_modules/eslint/bin/eslint src --ext ts,tsx"
},
"dependencies": {
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"@fortawesome/fontawesome-svg-core": "1.2.35",
"@fortawesome/free-solid-svg-icons": "5.15.3",
"@fortawesome/react-fontawesome": "0.1.14",
"@types/react": "17.0.3",
"@types/react-dom": "17.0.3",
"@types/react-select": "4.0.14",
"@typescript-eslint/eslint-plugin": "4.21.0",
"@typescript-eslint/parser": "4.21.0",
"css-loader": "5.2.0",
"eslint": "7.23.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-promise": "4.3.1",
"eslint-plugin-react": "7.23.1",
"html-webpack-plugin": "5.3.1",
"normalize.css": "8.0.1",
"react-select": "4.3.0",
"style-loader": "2.0.0",
"ts-loader": "8.1.0",
"typescript": "4.2.3",
"url-loader": "^4.1.1",
"webpack": "5.30.0",
"webpack-cli": "4.6.0"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es6",
"removeComments": false,
"jsx": "react"
},
"include": [
"src"
]
}
該錯誤提供了提示。
您需要在 tsconfig.json 文件中將moduleResolution
設置為"node"
,以便解析范圍內的模塊。
此屬性默認為"classic"
,除非module
設置為"commonjs"
。
正確 tsconfig.json
{
"compilerOptions": {
"target": "es6",
"removeComments": false,
"jsx": "react",
"moduleResolution": "node"
},
"include": [
"src"
]
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.