search

weaveworks-experiments / flux-classic

Microservice routing
http://weaveworks.github.io/flux/
Apache License 2.0
82 stars 10 forks source link

babel/jsx/react woes #1

Closed dpw closed 8 years ago

dpw commented 8 years ago

I don't have lessc or babel installed. So rather than installing them locally, I put them in the build container and adapted display/local.mk to use that container (https://github.com/squaremo/ambergreen/commit/600f9fb69df692ef16a80ad1040167fcf6c2ef41). Which all seems to work fine, but:

docker run --rm  -v $PWD:/build -v $PWD/docker/build-wrapper.sh:/build-wrapper.sh --workdir=/build ambergreen/build sh /build-wrapper.sh "babel display/gen/logo.babel -o display/gen/logo.js"
SyntaxError: display/gen/logo.babel: Unexpected token (4:6)
  2 |   render: function() {
  3 |     return (
> 4 |       <div className="logo">
    |       ^
  5 |         <svg width="100%" height="100%" viewBox="0 0 1089 217">
  6 |           <path fill="#32324B" d="M114.937,118.165l75.419-67.366c-5.989-4.707-12.71-8.52-19.981-11.211l-55.438,49.52V118.165z"/>
  7 |           <path fill="#32324B" d="M93.265,108.465l-20.431,18.25c1.86,7.57,4.88,14.683,8.87,21.135l11.561-10.326V108.465z"/>
display/local.mk:11: recipe for target 'display/gen/logo.js' failed
make: *** [display/gen/logo.js] Error 1

So after I bit of digging, I've established that the wodge of inline xml is a react thing. Babel, at least in version 6, needs a plugin to support that (http://babeljs.io/docs/plugins/transform-react-jsx/). So I tried to add that plugin: https://github.com/squaremo/ambergreen/commit/88c4f638b2187e30d4d2f78a7fc0a135fb8108a0 . And now:

docker run --rm  -v $PWD:/build -v $PWD/docker/build-wrapper.sh:/build-wrapper.sh --workdir=/build ambergreen/build sh /build-wrapper.sh "babel display/gen/logo.babel --plugins transform-react-jsx -o display/gen/logo.js"
ReferenceError: Unknown plugin "transform-react-jsx" specified in "base" at 0
    at /usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (native)
    at Function.normalisePlugins (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:161:20)
    at OptionManager.mergeOptions (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:254:36)
    at OptionManager.init (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:396:10)
    at File.initOptions (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:191:75)
    at new File (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:122:22)
    at Pipeline.transform (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
    at transform (/usr/lib/node_modules/babel-cli/lib/babel/util.js:53:22)
    at Object.compile (/usr/lib/node_modules/babel-cli/lib/babel/util.js:62:12)
display/local.mk:11: recipe for target 'display/gen/logo.js' failed
make: *** [display/gen/logo.js] Error 1

Halp!

What do you have working locally @squaremo? Is it an old version of babel that has the jsx stuff built in? Or you do have the plugin installed, and listed in your .babelrc maybe?

squaremo commented 8 years ago

It's an old version of babel -- a whole week old. Babel 6 is no longer just a transpiler, it's a transpiler platform transpiler .. platform .. is that right? Transpiler.

I've pinned it to Babel v5, the one known to work without extra faff.

squaremo commented 8 years ago

Actually I think I'll make a webbuild image, so changing this stuff won't force all the other things to rebuild.