Cannot find module '@fortawesome/react-fontawesome

Viewed 8228

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

Correct tsconfig.json

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

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".

Related