Browserify 找不到本地模块

Question

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

Answer 1

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?

Answer 2

You need to give the relative path when you're loading a local module (ie 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