CODEWITHSUNDEEP
javascriptreactjsgruntjsbrowserify
Ruslan Alekseyev
Ruslan Alekseyev

Reputation: 63

Browserify can't find local module

I have same issue but with local component.

That's my tree:

app
|
 - assets
  |
   - js
    |
     - app.jsx
    |
     - MainComponent.jsx

But when I run command:

macpro:app user$ browserify assets/js/app.jsx > tesapp.js

It response error :

Error: Cannot find module 'MainComponent' from '/Users/user/WebstormProjects/gowithme/app/assets/js'

That is code of app.jsx file : 

var React = require('react');
var ReactDOM =  require('react-dom');
var  MainComponent  = require('MainComponent');
console.log("Test",MainComponent);

Upvotes: 1

Views: 896

Answers (2)

Firanolfind
Firanolfind

Reputation: 1603

It happens because you are using .jsx extension. By default browserify cannot recognize unknown extension. Add browserifyOptions to you grunt config, it might help:

options: {
    transform: [['babelify', {presets: ['es2015', 'react']}]],
    browserifyOptions: {
        debug: true,
        extensions: ['.jsx']
    }
}

Also I suggest to omit usage of .jsx. No .jsx extension?

Upvotes: 1

Sergeon
Sergeon

Reputation: 6788

You need to give the relative path when you're loading a local module (i.e. a .js file of your own) with require:

var React = require('react');
var ReactDOM =  require('react-dom');
var  MainComponent  = require('./MainComponent'); //added ./ so now the path is relative
console.log("Test",MainComponent);

When using an absolute path (like require('fs') or require('react')) node will try to load native modules (like fs, path etc) or modules inside node_modules.

https://nodejs.org/api/modules.html#modules_modules

Upvotes: 0

Related Questions