8

How do I import modules from outside src directory?

./src/App.js
Module not found: Can't resolve 'material-ui' in '/Users/suvo/GitHub/portfolio/src'

According to react-material-icons page, I was supposed to import as follows:

import mui from 'material-ui';

the error's strange. i got import $ from 'jquery'; just next to import mui... and it works fine. What's more, if i create a new project and add react-material-icons, the npm won't start, showing an error: 

> myapp@0.1.0 start /Users/suvo/GitHub/myapp
> react-scripts start

sh: react-scripts: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! myapp@0.1.0 start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the myapp@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/suvo/.npm/_logs/2017-09-11T11_40_15_791Z-debug.log
DuchSuvaa
  • 539
  • 1
  • 5
  • 22

1 Answers1

1

Just remove the . in front of the package name.

import mui from 'material-ui';

Packages you install using npm install or yarn install are saved to node_modules directory. You can import them by just specifying package name.

import React from 'react';
import mui from 'material-ui';

import AlarmIcon from 'react-material-icons/icons/action/alarm';

export default class Alarm extends React.Component {
  render() {
    return (
      <AlarmIcon/>
    );
  }
}
sudo bangbang
  • 27,127
  • 11
  • 75
  • 77
  • 1
    still i got error: Module not found: Can't resolve 'material-ui' in '/Users/suvo/GitHub/portfolio/src' – DuchSuvaa Sep 10 '17 at 17:38
  • got no idea where i had this dot from, i updated the question with actual error – DuchSuvaa Sep 10 '17 at 17:54
  • can you try doing `yarn install react-material-icons` or `npm install --save react-material-icons` again and try? – sudo bangbang Sep 11 '17 at 11:15
  • i tried, still the same error. And if i create a new project with create-react-app and install react-material-icons there, i get another error (see updated question) – DuchSuvaa Sep 11 '17 at 11:43
  • I'm facing this issue as well, I found a solution, unfortunately, it didn't work for me, but I heard that webpack needs to know where to look for the modules. To do this, edit `./App/webpack.config.js` with the following content: module.exports = { resolve: { modules: [ "../node_modules/" ] } }; Make sure of course that the module is installed in the `node_modules` folder. Hope this works for you. – J-Cake Feb 12 '19 at 09:47