how to install reactjs npm package correctly

Question

Hi I want to install this reactjs package called react-dropdown-input https://github.com/RacingTadpole/react-dropdown-input/

I ran this command

$npm install react-dropdown-input --save 

in my local folder in git bash. After that I checked my package.json, it says "react-dropdown-input": "^0.1.11" which means i have installed it correctly.

Then i tried to use it in my js file

    import React from 'react'
    import PropTypes from 'prop-types';

    var DocumentTitle = require('react-document-title');
    //var DropdownInput = require('react-dropdown-input'); 

When i added the fifth line, my page just could not load anymore (a blank page) I dont know how to fix this.

Here's my webpack.config.js

  process.env.NODE_ENV = process.env.NODE_ENV || 'development';

  const path = require('path');
const webpack = require('webpack');
const BaseFolder = 'static/'; //relative to html path
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractLess = new ExtractTextPlugin({
    filename: '[name].[contenthash].css',
    disable: process.env.NODE_ENV === 'development'
});

var loaders = ['babel-loader'];
var port = process.env.PORT || 3000;
var vendor = ['react', 'react-dom', 'react-router', 'whatwg-fetch', 'es6-promise'];
var outputDir = 'dist';
var entry = {
     filename: path.resolve(__dirname, 'src/app.js'),
}
var plugins = [
    new webpack.optimize.CommonsChunkPlugin({
        name:'vendor',
        minChunks: Infinity,
        filename: BaseFolder + 'js/[name].js',
}),
new HtmlWebpackPlugin({
    template: path.join(__dirname, '/src/index.html'),
    filename: 'index.html',
    inject: 'body'
}),
new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    'BaseFolder': JSON.stringify(BaseFolder)
}),
//new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1}),
extractLess,
new webpack.ProvidePlugin({
    Promise: 'es6-promise',
    fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
    React: 'react',
    jsSHA: 'jssha',
    wx: 'weixin-js-sdk'
}),
new CopyWebpackPlugin([
    {
        from: 'src/images',
        to: BaseFolder + 'images'
    }
])
];

if (process.env.NODE_ENV === 'development') {
    //devtool ='eval-source-map';
    loaders = ['react-hot-loader'].concat(loaders);
    plugins = plugins.concat([
        new webpack.HotModuleReplacementPlugin()
    ]);
    entry = Object.keys(entry).reduce(function (result, key) {
        result[key] = [
        'webpack-dev-server/client?http://0.0.0.0:' + port,
        'webpack/hot/only-dev-server',
        entry[key]
    ];
    return result;
}, {});
}

 entry.vendor = vendor;

module.exports = env => {
return {
    entry: entry,
    output: {
        filename: BaseFolder+'js/bundle.js',

        chunkFilename: BaseFolder+'js/[id].chunk.js',
        path: path.resolve(__dirname, outputDir),
        publicPath: '/'
    },
    externals: [

    ],
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: loaders,
                exclude: /node_modules/,
                include: __dirname
            },
            { test: /\.js$/, exclude: /node_modules/, loaders: loaders, include: __dirname},
            { test: /\.scss$/, exclude: /node_modules/, loader: 'style-loader!css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap&includePaths[]=node_modules/compass-mixins/lib'},
            { test: /\.css$/, loader: 'style-loader!css-loader', exclude: /\.useable\.css$/},
            {
                test: /\.useable\.css$/,
                use: [
                    {
                        loader: 'style-loader/useable'
                    },
                    { loader: 'css-loader' },
                ],
            },
            { test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=100000&name='+BaseFolder+'images/[name].[ext]' },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?name='+BaseFolder+'fonts/[name].[ext]' },
            { test: /\.(woff|woff2)$/, loader:'url-loader?prefix=font/&limit=5000&name='+BaseFolder+'fonts/[name].[ext]' },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream&name='+BaseFolder+'fonts/[name].[ext]' },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml&name='+BaseFolder+'images/[name].[ext]' },


        ]
    },

    plugins: plugins
}
};

Answer 1

I think that DropdownInput is named export from react-dropdown-input since in index.js file in the repository its exported as

module.exports = DropdownInput;

So need to import it like

import {DropdownInput} from 'react-dropdown-input'

Answer 2

Yes this must be included in your node_modules, but the point is that you have include that in your compiled js file or not, i.e.

you must have used webpack or gulp to compile all your dependencies of js to give one file and you must have forget to include that dependency file in webpack file or gulpfile, Please check or provide sample of your webpack or gulpfile.