import a module from node_modules with babel but failed

18
votes

I wrote a module with es6 and publish to the npm, I want to use it in another project, so I type like this:

import {ActionButton} from 'rcomponents'

But it didn't work:

D:\github\blog\node_modules\rcomponents\src\actionButton.jsx:1
(function (exports, require, module, __filename, __dirname) { import React fro
                                                              ^^^^^^
SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Module._extensions..js (module.js:478:10)
    at Object.require.extensions.(anonymous function) [as .jsx] (D:\github\blog\
node_modules\babel\node_modules\babel-core\lib\api\register\node.js:214:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at D:\github\blog\node_modules\rcomponents\src\index.js:3:19
    at Object.<anonymous> (D:\github\blog\node_modules\rcomponents\src\index.js:
7:3)

Here is my js loader configuration in webpack:

{ test: /\.jsx?$/, loader: `babel?cacheDirectory=${babelCache}` }

When I try to import a module which is not from node_modules, babel works good. But import a module from node_modules, babel seems not work?

3
reactjsbabeljs

3 Answers

25
votes

See the babel docs:

NOTE: By default all requires to node_modules will be ignored. You can override this by passing an ignore regex.

Generally the expectation is that modules in node_modules will already have been transpiled ahead of time, so they are not processed by Babel. If you will not be doing that, then you need to tell it what files it can process. ignore allows that.

require("babel/register")({
    // Ignore everything in node_modules except node_modules/rcomponents.
    ignore: /node_modules\/(?!rcomponents)/
});
4
votes

Generally, packages uploaded to npm should be precompiled, so users receive normal JS and don't require a build step. Use npm prepublish for this.

However, if you're using webpack, you can specify an exclude function in your webpack configuration (see the webpack docs):

module: {
  loaders: [{
    test: /.jsx?$/,
    loader: 'babel-loader',
    exclude(file) {
      if (file.startsWith(__dirname + '/node_modules/this-package-is-es6')) {
        return false;
      }
      return file.startsWith(__dirname + '/node_modules');
    },

If you're using babel directly, you can write a similar ignore function in the require hook.

1
votes

You can use https://www.npmjs.com/package/babel-node-modules for this case

npm install --save-dev babel-node-modules
require('babel-node-modules')([
  'helloworld' // add an array of module names here 
]);

and then it compiles listed modules as other files