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
}
};

Are you bundling it with Webpack and have the right loaders? Because "require" isn't valid JS in the browser, it needs to be transpiled to vanilla js :) — cbll
– cbll, Commented Jun 19, 2017 at 8:28
@dogui No. It just went blank after i refreshed the page. Im testing it on localhost:3000 — Dorinaaaa
– Dorinaaaa, Commented Jun 19, 2017 at 8:29
What did you use to set up your React app? Was it create-react-app or a custom solution? In any case, try import DropdownInput from 'react-dropdown-input'. — glhrmv
– glhrmv, Commented Jun 19, 2017 at 8:30
@cbll Document Title package worked fine so i think its probably not because of that? — Dorinaaaa
– Dorinaaaa, Commented Jun 19, 2017 at 8:31

Lalit Sachdeva · Accepted Answer · 2017-06-19 08:32:59Z

1

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.

answered Jun 19, 2017 at 8:32

Lalit Sachdeva

6,6612 gold badges22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubham Khatri · Accepted Answer · 2017-06-19 08:35:05Z

0

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'

answered Jun 19, 2017 at 8:35

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

2 Comments

Dorinaaaa Over a year ago

Didnt work :( The page went blank after i refreshed it

Shubham Khatri Over a year ago

Are you using webpack

Collectives™ on Stack Overflow

how to install reactjs npm package correctly

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related