Browserify cannot find npm module

Question

I'm trying to create an NPM module with great pain: react-smallgrid

import React from 'react';
import _ from 'lodash';


export default class SmallGrid extends React.Component{

Compiled with:

browserify: {
    options: {
        transform: [
            ['babelify', {
                presets: ['react', 'es2015']
            }]
        ]
    },

    jsx: {
        files: {
            './dist/js/smallgrid.js': [
                './src/smallgrid.jsx',
            ]
        }
    },

When I import the js file in another project/jsx and try to browserify that, it gives the error:

Error: Cannot find module './ReactMount' from '/Users/me/code/react-smallgrid/dist/js'

I thought it's already compiled for use? I don't understand this.

Meanwhile

I've tried building it with webpack, which gives the following output:

> webpack -p

Hash: 00fd87c95d39230bd485
Version: webpack 1.12.11
Time: 14002ms
       Asset    Size  Chunks             Chunk Names
smallgrid.js  248 kB       0  [emitted]  smallgrid
    + 160 hidden modules

WARNING in smallgrid.js from UglifyJs
Condition always true [./~/react/lib/ReactMount.js:764,0]
Condition always true [./~/react/lib/findDOMNode.js:46,0]
Condition always true [./~/react/lib/instantiateReactComponent.js:80,0]

Still does not work.

What does your package.json look like? Is React included in your compiled lib? — Henrik Andersson
– Henrik Andersson, Commented Jan 25, 2016 at 10:32
@Tjorriemorrie can you paste how the consuming project is attempting to import the SmallGrid please? — David Pine
– David Pine, Commented Jan 28, 2016 at 13:31
@DavidPine import SmallGrid from 'react-smallgrid';. It might be easier to npm run kitchen_sink on the webpack branch where I'm trying to replicate the problem using an example file — Tjorriemorrie
– Tjorriemorrie, Commented Jan 28, 2016 at 15:21
@Tjorriemorrie all of your examples are working now. Please check the answer and the PR I sent you. — Inanc Gumus
– Inanc Gumus, Commented Mar 18, 2017 at 16:40

Inanc Gumus · Accepted Answer · 2017-03-18 16:47:39Z

2

You need to make React libs available to your code.

Run this to add browserify-shim:

npm i browserify-shim -D

Add this to your package.json:

"browserify": {
  "transform": [
    "browserify-shim"
  ]
},
"browser": {
  "react": "./node_modules/react/dist/react.js",
  "react-dom": "./node_modules/react-dom/dist/react-dom.js",
  "lodash": "./node_modules/lodash"
},
"browserify-shim": {
  "./node_modules/react/dist/react.js": "React",
  "./node_modules/react-dom/dist/react-dom.js": "ReactDOM",
  "./node_modules/lodash": "lodash"
}

By the way, you can also use browserify externals in your config to further reduce the resulting package. It's best to not include for example: React in your bundle.

Note:

I also sent you a PR in Github for the solution.

edited Mar 18, 2017 at 16:47

answered Mar 18, 2017 at 10:10

Inanc Gumus

28.3k10 gold badges89 silver badges104 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:10:25Z

0

Your problem appears to be that you are providing the transpiled code as your library. The transpiled code includes ReactMount internally. You should be providing the source code for use as a library. Then it will transpile correctly with browserify. Look at any other npm libraries and I think you will see they provide the source to use in your imports.

As you indicated in your comment. @madox2 in Cannot import ES2015 module replied with;

"scripts": {
    "compile": "babel --presets es2015,stage-0 -d dist/js/ src/"
}

So, npm install -g babel babel-preset-es2015 babel-preset-stage-0. Then npm run compile. That should put your transpiled code into dist/js.

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Jan 28, 2016 at 22:32

J. Mark Stevens

4,9452 gold badges15 silver badges18 bronze badges

3 Comments

Tjorriemorrie Over a year ago

Now I'm really getting ocnfused; can you read this and please adjust your answer

J. Mark Stevens Over a year ago

Ok, I think the important point there is just using babel and not the whole browserify build. He gave the example of just using command line babel and applying that to your source.

Tjorriemorrie Over a year ago

Can you add an example repo to your answer?

Collectives™ on Stack Overflow

Browserify cannot find npm module

2 Answers 2

Note:

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Note:

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related