Search code examples
reactjsamdcommonjsbabeljses6-module-loader

Integrating React to a build flow with module transpilation with Babel


I am currently having trouble with module transpilation with babel.

when I am transpiling code to AMD modules with babel, I can make it work in browser by including requirejs library. But when I try to introduce react to this equation we are experiencing some troubles, as react does not play nice with AMD. we are having mismatch errors (http://requirejs.org/docs/errors.html#mismatch) cause react is loaded synchronously in a vendor.js file.

if I tried the other way around, using commonjs as it is the default module spec that babel uses, I have no idea how to make it work in the browser. without a library like requirejs in the former example, browser is giving errors like "exports not defined". tried to include some stuff like es6-module-loader or babel browerser polyfill, but without much success.

ps: build flow is using broccolijs.


Solution

  • it seems like the answer is in the webpack. after using babel to transpile code to es5 in broccoli, I used broccoli webpack plugin to make transpiled code browser ready.