0

I installed a module using npm install into my react project

npm install mdbreact --save

I checked then the nodemodules folder to make sure the lib was installed correctly and yes. Now I am trying to import some components from the new lib like Input and Button I am trying 

import * as MDB from 'mdbreact';

import Input from 'mdbreact';

and I always get the error error TS2307: Cannot find module 'mdbreact' Any help how to solve this? Thank you!

Jee Mok
  • 6,157
  • 8
  • 47
  • 80
Rodwan Bakkar
  • 474
  • 3
  • 17
  • should be `import {Input} from 'mdbreact'`. But anyway I see you are using typescript. Have you tried deleting the folder from node_modules and install again. Then observe for any errors when you run `npm install mdbreact` – Kunukn Jan 31 '18 at 14:45
  • Input is exported as default in mdbreact, I tried {Input} and it did not work – Rodwan Bakkar Jan 31 '18 at 15:13
  • I will try deleting and reinstalling and see – Rodwan Bakkar Jan 31 '18 at 15:13
  • I tried reinstalling mdbreact and gave no errors but gave warnings. Anyway it is still giving the same erros, can not find module 'mdbreact'. – Rodwan Bakkar Jan 31 '18 at 15:20
  • I tested this and works. With create-react-app-typescript. In my tsconfig.json I have `"noImplicitAny": false`. Do you see any errors in the console when you run your solution? `import {Input} from 'mdbreact'` works for me but `import Input from 'mdbreact'` is undefined for me. – Kunukn Jan 31 '18 at 16:33
  • Thank you @Kunukn ! I will try it and report. – Rodwan Bakkar Feb 01 '18 at 10:36

1 Answers1

0

It might be helpful to look at how functions and variables are exported, so that you can see how they are imported.

I will explain further, but here are the docs:

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

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

To export the default variable/function from a file you would use the export default phrase. 

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

To import the default variable/function from a file you would do it like so:

import testObj from './testFile';

To export a standard variable/function from a file you would use the standard export keyword.

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;

To import a standard variable/function from a file you must wrap the imported variable/function inside braces.

TL;DR;

Only the default exported variable/function from a file can be imported without braces, anything else must be imported from within braces. Input is not the default export from mdbreact which is why it must be imported like so:

import { Input } from 'mdbreact';

* will import all available exports from the file, which is why that allowed your import to work. but you don't want to import all components from mdbreact on every file use mdbreact in or your project would become bloated very quickly.

domdambrogia
  • 2,054
  • 24
  • 31