无法将模块导入反应项目答案

【问题标题】：can't import module into react project无法将模块导入反应项目
【发布时间】：2019-07-16 16:12:17
【问题描述】：

我是新手，我正在尝试从在线导入一个 npm 模块。我使用npm install --save flag-icon-css 安装包。它似乎已正确安装，我现在在 node_modules 文件夹中有一个模块文件夹。但是我收到以下错误./src/index.js Module not found: Can't resolve 'flag-icon-css' in 'C:\Users\Sean\OneDrive\Web Development\React\Projects\clock\src'。谁能向我解释我哪里出错了？

我的导入语句

  import React from 'react';
  import ReactDOM from 'react-dom';
  import ButtonClick from './Components/UserInputs.js';
  import Flags from 'flag-icon-css'

我在安装模块时也收到了这些警告

[npm WARN @typescript-eslint/eslint-plugin@1.6.0 requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/parser@1.6.0 requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/typescript-estree@1.6.0 requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN ts-pnp@1.1.2 requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.14.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.0.6 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.0.6: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})][1]

考虑到模块与 react 和 react-dom 位于同一文件夹中，我假设我可以使用相同的方法来导入它

这就是我找到包裹https://github.com/lipis/flag-icon-css的地方

这是我的 json 文件

{
  "name": "clock",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "create-react-app": "^3.0.1",
    "flag-icon-css": "^3.3.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

【问题讨论】：

尝试再次删除你的 node_modules 和 package-json 和 npm i

标签： javascript reactjs npm import npm-install

【解决方案1】：

试试import Flags from 'flag-icon-css'/flag-icon.min.css

【讨论】：

【解决方案2】：

删除你的 package-lock.js 和 node_modules 文件夹，然后运行npm install

通常您在执行此操作时会小心，因为这将安装您可能没有设计系统的软件包的任何新版本。但由于这是一个新项目，这对你来说应该没问题。

【讨论】：

package-lock.json*
Module not found 是一个 webpack/babel 错误。这只会帮助清除安装中的警告，但不幸的是不能解决问题。
好点。 @seanBaker，你在使用 webpack/babel 吗？我想一个更好的问题是，您使用的是 ES6 及更高版本吗？
我正在使用 babel 是的
你能提供你的package.json吗