1234904 - Test and fix NPM Babel module upgrade to latest version

Status: RESOLVED FIXED

(Hello (Loop) :: Client, defect, P2)

Comment 1

[Chris Rafuse :crafuse]

Testing "make build" for:
"babel": "5.8.34" > "6.3.13"

makeFile usage examples:
BABEL := $(NODE_LOCAL_BIN)/babel --extensions '.jsx'

	$(BABEL) $@ --out-dir $(BUILT)/$@
	$(BABEL) shared --out-dir $(BUILT)/$@/shared

add-on
	$(BABEL) $@/panels --out-dir $(BUILT)/$@/chrome/content/panels
	$(BABEL) shared --out-dir $(BUILT)/$@/chrome/content/shared


SHELL OUTPUT:
chrafuse@ubuntu:~/Documents/mozilla/loop$ make build
npm install
babel@6.3.13 node_modules/babel
mkdir -p ./built/add-on
rsync --archive --exclude='*.jsx' add-on/chrome.manifest add-on/chrome/bootstrap.js ./built/add-on
sed "s/@FIREFOX_VERSION@/45.0/g" add-on/install.rdf.in | \
		grep -v "#filter substitution" > ./built/add-on/install.rdf
mkdir -p ./built/add-on/chrome/content/panels
rsync --archive --exclude='*.jsx' add-on/panels ./built/add-on/chrome/content
./node_modules/.bin/babel --extensions '.jsx' add-on/panels --out-dir ./built/add-on/chrome/content/panels
The CLI has been moved into the package `babel-cli`.

$ npm install -g babel-cli

make: *** [add-on] Error 1

=============END

Not sure where an error would show.
npm install -g might have issue on Linux as it may need to use ~/npm instead.

Any suggestion on where to find the error description or what to try next?

Comment 2

[Mark Banner (:standard8)]

Ok, so according to http://babeljs.io/blog/2015/10/31/setting-up-babel-6/ it looks like they've changed their package setup.

From what I can tell, try doing babel -> babel-cli in the package.json ("babel" as such doesn't really exist now).

We then need to add the react options - which are now a separate module - see http://babeljs.io/docs/plugins/transform-react-jsx/ - I'm guessing we'll need both the installation and usage sections (although, obviously, we we'll just add the new package to packages.json).

Comment 3

[Chris Rafuse :crafuse]

Add this to the package.json:

...
"devDependencies": {
    "babel-cli": "6.3.17",
    "babel-plugin-transform-react-jsx": "6.3.13",
...


npm install babel-cli
npm WARN optional dep failed, continuing fsevents@1.0.6
npm WARN engine hawk@3.1.2: wanted: {"node":">=0.10.32"} (current: {"node":"0.10.25","npm":"2.1.14"})
npm WARN engine hoek@2.16.3: wanted: {"node":">=0.10.40"} (current: {"node":"0.10.25","npm":"2.1.14"})
npm WARN engine cryptiles@2.0.5: wanted: {"node":">=0.10.40"} (current: {"node":"0.10.25","npm":"2.1.14"})
npm WARN engine boom@2.10.1: wanted: {"node":">=0.10.40"} (current: {"node":"0.10.25","npm":"2.1.14"})
babel-cli@6.3.17 node_modules/babel-cli
├── slash@1.0.0
├── path-is-absolute@1.0.0
├── path-exists@1.0.0
├── fs-readdir-recursive@0.1.2
├── log-symbols@1.0.2
├── convert-source-map@1.1.2
├── v8flags@2.0.11 (user-home@1.1.1)
├── commander@2.9.0 (graceful-readlink@1.0.1)
├── chalk@1.1.1 (supports-color@2.0.0, ansi-styles@2.1.0, escape-string-regexp@1.0.4, strip-ansi@3.0.0, has-ansi@2.0.0)
├── output-file-sync@1.1.1 (xtend@4.0.1, mkdirp@0.5.1)
├── glob@5.0.15 (inherits@2.0.1, once@1.3.3, inflight@1.0.4, minimatch@3.0.0)
├── source-map@0.5.3
├── chokidar@1.4.1 (inherits@2.0.1, glob-parent@2.0.0, async-each@0.1.6, is-binary-path@1.0.1, is-glob@2.0.1, readdirp@2.0.0, anymatch@1.3.0)
├── request@2.67.0 (is-typedarray@1.0.0, aws-sign2@0.6.0, forever-agent@0.6.1, caseless@0.11.0, stringstream@0.0.5, oauth-sign@0.8.0, tunnel-agent@0.4.2, isstream@0.1.2, json-stringify-safe@5.0.1, extend@3.0.0, node-uuid@1.4.7, combined-stream@1.0.5, qs@5.2.0, tough-cookie@2.2.1, mime-types@2.1.8, form-data@1.0.0-rc3, bl@1.0.0, http-signature@1.1.0, har-validator@2.0.3, hawk@3.1.2)
├── bin-version-check@2.1.0 (minimist@1.2.0, semver-truncate@1.1.0, semver@4.3.6, bin-version@1.0.4)
├── babel-core@6.3.26 (shebang-regex@1.0.0, babel-template@6.3.13, babel-messages@6.3.18, babel-helpers@6.3.13, private@0.1.6, minimatch@2.0.10, debug@2.2.0, babel-code-frame@6.3.13, babylon@6.3.26, babel-types@6.3.24, babel-generator@6.3.26, babel-traverse@6.3.26, json5@0.4.0, lodash@3.10.1)
├── babel-register@6.3.13 (home-or-tmp@1.0.0, source-map-support@0.2.10, lodash@3.10.1, core-js@1.2.6)
├── babel-polyfill@6.3.14 (babel-regenerator-runtime@6.3.13, core-js@1.2.6)
└── babel-runtime@5.8.34 (core-js@1.2.6)


chrafuse@ubuntu:~/Documents/mozilla/loop$npm install babel-plugin-transform-react-jsx
babel-plugin-transform-react-jsx@6.3.13 node_modules/babel-plugin-transform-react-jsx
├── babel-plugin-syntax-jsx@6.3.13
├── babel-helper-builder-react-jsx@6.3.13 (esutils@2.0.2, lodash@3.10.1, babel-types@6.3.24)
└── babel-runtime@5.8.34 (core-js@1.2.6)
chrafuse@ubuntu:~/Documents/mozilla/loop$ 


Ran tests on the install:

make karma
npm install
mkdir -p ./built/add-on
rsync --archive --exclude='*.jsx' add-on/chrome.manifest add-on/chrome/bootstrap.js ./built/add-on
sed "s/@FIREFOX_VERSION@/45.0/g" add-on/install.rdf.in | \
		grep -v "#filter substitution" > ./built/add-on/install.rdf
mkdir -p ./built/add-on/chrome/content/panels
rsync --archive --exclude='*.jsx' add-on/panels ./built/add-on/chrome/content
./node_modules/.bin/babel --extensions '.jsx' add-on/panels --out-dir ./built/add-on/chrome/content/panels
SyntaxError: add-on/panels/js/conversation.jsx: Unexpected token (41:14)
  39 |       this.setTitle(mozL10n.get("conversation_has_ended"));
  40 | 
> 41 |       return (<FeedbackView
     |               ^
  42 |         onAfterFeedbackReceived={this.closeWindow} />);
  43 |     },
  44 | 
make: *** [add-on] Error 1


I will look into what the syntax error is now.
Any suggestions on if this is wide spread example or is new to Babel 6?

Comment 4

[Mark Banner (:standard8)]

I vaguely remember looking at this... I think you need to create a .babelrc file that specifies react as a plug in or something... if you look in the docs you should be able to find something about it.

Comment 5

[Mark Banner (:standard8)]

(In reply to Mark Banner (:standard8) from comment #4)
> I vaguely remember looking at this... I think you need to create a .babelrc
> file that specifies react as a plug in or something... if you look in the
> docs you should be able to find something about it.

Here it is: http://babeljs.io/docs/usage/babelrc/

Comment 6

[GitHub Autolander Bot]

Attachment: [loop] Standard8:bug-1234904-babel > mozilla:master

Comment 7

[Mark Banner (:standard8)]

Taking, as agreed with Chris.

Comment 8

[Chris Rafuse :crafuse]

Comment on attachment 8704699 [details] [review]
[loop] Standard8:bug-1234904-babel > mozilla:master

Looks good.

Comment 9

[Mark Banner (:standard8)]

https://github.com/mozilla/loop/commit/f94035c2fecaa79159836512ec52457409b14a00