Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Import module from node_modules (create-react-app)

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:

> [email protected] 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! [email protected] start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] 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
like image 988
DuchSuvaa Avatar asked Sep 07 '17 20:09

DuchSuvaa


People also ask

How do I import a Node module into React?

Load the NPM Module Using the GitHub Repository Along with the CLI command, add the required GitHub repository URL of the module that you want to install. A folder gets created inside the directory node_modules by providing the GitHub URL along with the install command. And the package gets mentioned in package. json .

How do I import a library into React?

Installation: Open a terminal inside your ReactJS project folder and write the following code to install react-script-tag Package. Import 'ScriptTag' component: Import the built-in 'ScriptTag' component from the react-script-tag library at the top of the file where we want to add the script tag.

Is create-React-app a module?

The create-react-app module takes care of all your Webpack, Babel & ESLint configuration and setup. The funny thing is: you don't see it. Under the hood there is one main dependency: the react-scripts Node module. This module is like your personal front-end engineer.

Do I need to import Reactdom?

You need to import the default, and you need to name it React . This is because anytime you write JSX code like <MyComponent /> or <App /> , this JSX code is transpiled and uses React. createElement() . So, you need to have access to the React object as it is named.


1 Answers

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/>
    );
  }
}
like image 154
sudo bangbang Avatar answered Sep 28 '22 08:09

sudo bangbang