CODEWITHSUNDEEP
gulpbrowserifybabeljsbabelify
Ajm113
Ajm113

Reputation: 320

Error: Cannot find module using browserify + babelify

I seem to have React and ReactDOM working perfectly fine with Browserify, but when ever I attempt to import/require my own modules in the same directory, apparently can't find it!

Error

events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: Cannot find module './test' from '/var/www/resources/assets/js'
    at /var/www/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
    at load (/var/www/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/var/www/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /var/www/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:123:15)

entry.jsx

import ReactDOM from 'react-dom';
const browser = require('./test');    // <<< Can't find the file in the same dir?

ReactDOM.render(browser, document.getelementbyid('store-page'));

test.jsx

import React from 'react';

export default class test extends React.Component {
    render() {
        return <h1>Hello, React!</h1>
    }
}

gulpfile.js

gulp.task('babel', function() {

    let b = browserify({                                            // Get API access to Browserify for transformations.
        entries: config.babel.input,                                // Our entry.js file.
        debug: isDebug                                              // Used for sourcemaps.
    });

    b.transform('babelify');                                        // Convert our Babel code to JavaScript.

    return b.bundle()                                               // Bundle all our converneted JavaScript into one source.
        .pipe(source('bundle.js'))                                  // Tells the filename of the stream we want to write to.
        .pipe(buffer())                                             // Bundle our converted JavaScript code into a stream for pipeline.
        .pipe(gulpif(isDebug, sourcemaps.init({loadMaps: true})))   // Generate a sourcemap file for better analysis and debugging.
            .pipe(gulpif(isProduction, uglify()))                   // Convert our code into minification for better performance and bandwidth.
            .on('error', gutil.log)                                 // Routes any error messages to the console and continues our task manager like normal.
        .pipe(gulpif(isDebug, sourcemaps.write('./')))              // Write a sourcemap file in the same destination.
        .pipe(gulp.dest(config.babel.output));                      // Write the compiled JavaScript to the destination for our browser.
});

From what I'm gathering my gulpfile.js should be setup correctly. So maybe I'm simply in a beginner trap I'm not seeing? -- I would appreciate any help.

Upvotes: 1

Views: 1670

Answers (2)

David Yue
David Yue

Reputation: 725

I know this is an incredibly late answer. But I found a solution. If you are using the Browserify api, try setting the extensions to the file extensions you can possibly import:

browserify({
                extensions: ['.ts', '.tsx', '.js', '.jsx']
          }).add(...).bundle(...)

Upvotes: 1

dave
dave

Reputation: 2936

One solution is to specify the file extension.

const browser = require('./test.jsx');

I found this question when trying to solve the same problem myself. Would like to be able to allow babel/browserify to find jsx files without specifying.

Upvotes: 2

Related Questions