javascript - Cannot find module '@fortawesomereact-fontawesome - Stack Overflow

admin管理员组

文章数量:1221310

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 /

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

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/docs/web/use-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"
  ]
}

• javascript
• reactjs
• font-awesome

Share Improve this question Follow edited Jun 20, 2023 at 2:08 Mahesh Jamdade 20.2k1111 gold badges129129 silver badges147147 bronze badges asked Apr 11, 2021 at 16:32 mardukevichmardukevich 15011 gold badge22 silver badges1010 bronze badges 0

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 6

Correct tsconfig.json

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

Try this is

npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

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

本文标签： javascriptCannot find module 39fortawesomereactfontawesomeStack Overflow