javascript Cannot find module '无法找到该模块

5fjcxozz  于 2023-06-20  发布在  Java
关注(0)|答案(3)|浏览(505)

当我构建我的项目时,我得到了错误:无法找到模块“Cannot find”。您是想将"moduleResolution"选项设置为"node",还是想将别名添加到"paths"选项?
软件包是用yarn安装的,如下所示https://fontawesome.com/docs/web/use-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"
  ]
}
llmtgqce

llmtgqce1#

更正tsconfig.json

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

ars1skjm2#

试试这个

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

r55awzrz3#

错误提供提示。
您需要在tsconfig.json文件中将moduleResolution设置为"node",以便可以解析作用域模块。
除非将module设置为"commonjs",否则此属性默认为"classic"

相关问题