找不到模块'@fortawesome/react-fontawesome

Question

When i build my project i got error: Cannot find module '@fortawesome/react-fontawesome'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

Packages was installed with yarn as shown here https://fontawesome.com/how-to-use/on-the-web/using-with/react

Import in script:

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"
  ]
}

Answer 1

The error provides a hint.

You need to set moduleResolution to "node" in your tsconfig.json file so that the scoped modules can be resolved.

This property defaults to "classic" unless module is set to "commonjs" .

Answer 2

Correct tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "removeComments": false,
    "jsx": "react",
    "moduleResolution": "node"
  },
  "include": [
    "src"
  ]
}