在我的反应应用程序中导入新安装的模块答案

【问题标题】：importing a new installed module in my react app在我的反应应用程序中导入新安装的模块
【发布时间】：2020-04-18 10:07:04
【问题描述】：

我在我的 react 项目中使用 npm install 安装了一个模块

npm install mdbreact --save

然后我检查了 nodemodules 文件夹以确保 lib 安装正确，是的。现在我正在尝试从新库中导入一些组件，例如 Input 和 Button 我正在尝试

import * as MDB from 'mdbreact';

import Input from 'mdbreact';

我总是收到错误error TS2307: Cannot find module 'mdbreact' 任何帮助如何解决这个问题？谢谢！

【问题讨论】：

应该是import {Input} from 'mdbreact'。但无论如何，我看到你正在使用打字稿。您是否尝试从 node_modules 中删除该文件夹并重新安装。然后在运行npm install mdbreact 时观察是否有任何错误
输入在 mdbreact 中默认导出，我尝试了 {Input}，但它不起作用
我试试删除重装看看
我尝试重新安装 mdbreact 并没有给出错误但给出了警告。无论如何它仍然给出相同的错误，找不到模块'mdbreact'。
我对此进行了测试并且工作正常。使用 create-react-app-typescript。在我的 tsconfig.json 我有"noImplicitAny": false。运行解决方案时，您是否在控制台中看到任何错误？ import {Input} from 'mdbreact' 对我有用，但 import Input from 'mdbreact' 对我来说是未定义的。

标签： reactjs npm mdbreact

【解决方案1】：

查看函数和变量的导出方式可能会有所帮助，以便您了解它们是如何导入的。

我会进一步解释，但这里是文档：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

要从文件中导出default 变量/函数，您可以使用export default 短语。

var testObj = { 'hello' : 'world' };
export default testObj;

要从文件中导入 default 变量/函数，您可以这样做：

import testObj from './testFile';

要从文件中导出标准变量/函数，您可以使用标准 export 关键字。

var testObj = { 'hello' : 'world' };
var testObj2 = { 'hello' : 'again' };
export { testObj, testObj2 }; 
// or if you just want to export testObj - notice the default keyword is missing
export testObj;

要从文件中导入标准变量/函数，您必须将导入的变量/函数包裹在大括号内。

TL;DR;

只有从文件中导出的默认变量/函数可以不带大括号导入，其他任何内容都必须从大括号内导入。 Input 不是 mdbreact 的默认导出，因此必须像这样导入：

import { Input } from 'mdbreact';

* 将从文件中导入所有可用的导出，这就是允许导入工作的原因。但是您不想在每个使用 mdbreact 的文件中从 mdbreact 导入所有组件，否则您的项目会很快变得臃肿。

【讨论】：