Transpiling third-party modules with create-react-app build

Question

I'm developing a recently-ejected create-react-app application and need to use an outside module.

I did npm install --save-dev starparam and am importing the module like this: import starparam from 'starparam';.

When I run my code in NodeJS with my unit-tests (npm test) everything works as expected.

But, when I run in the browser (using npm start) I get syntax errors.

This seems to be because the module I'm using uses ES6 features like arrow functions.

What webpack changes do I need to make so this third-party module is included in the transpile?

Usually `node_modules` is excluded in the `webpack.config.js`, you could change it like in this ticket. https://github.com/babel/babel-loader/issues/171 — Xotic750, Jun 28 '17 at 14:38
I wouldn't recommend running `node_modules` through Babel. It's not always safe (things can break) and makes builds significantly slower. — Dan Abramov, Jun 28 '17 at 18:51
I was able to accomplish my goal by adding a loader in my webpack config but I'm not quite clear if my approach is following a good practice. I added an answer describing what I did here: https://stackoverflow.com/a/44814538/2295034 — Jonathan.Brink, Jun 29 '17 at 00:33

score 3 · Accepted Answer · answered Jun 29 '17 at 00:30

I was able to accomplish my goal by:

adding a new path in config/paths.js to the third-party module folder
adding a new loader in the loaders array in the module object in config/webpack.config.dev.js
a similar change in config/webpack.config.prod.js

--

Adding a new path in config/paths.js;

starparamSrc: resolveApp('node_modules/starparam'),

Adding a new loader in config/webpack.config.dev.js:

{
  test: /\.(js|jsx)$/,
  include: paths.starparamSrc,
  loader: 'babel',
  query: {
   cacheDirectory: true
  }
},

1 Answers1