Babelify config for Browserify does not work with rc10

[khalillechelt]

I use the following Browserify config:

"browserify": {
	"transform": [
		[
			"babelify",
			{
				"presets": [
					"env"
				]
			}
		]
	]
}

And Bankai can't parse the import syntax:

Failed while processing 'scripts'.

 --> index.js:2:1
  |
2 | import { html, render } from 'lit-html';
  | ^ Syntax Error

Hmmm. We're having trouble parsing a file.

The necessary modules are installed.

[yoshuawuyts]

Oh, that's odd. I would've expected shama/yo-yoify#58 by @goto-bus-stop to have solved our final compat issues. My guess is there's probably some parser in the tree that's operating on an outdated version.

Also, on a side note we're going to be baking in Babel support for stable language features sometime in the next 2 weeks. Hopefully that'll fix this issue in the long run C:

[khalillechelt]

👍 for baking Babel in! Still this simple Browserify config should still work, right?

[yoshuawuyts]

Yeah, I would've expected it to! Not sure why it isn't parsing the import syntax. Here's a project where we're using browserify transforms too. So I don't think it's being glossed over, ghmmm. I'm still suspecting a transform using an outdated parser somewhere.

Could you perhaps run bankai build to see if it crashes with a different error? Thanks!

[khalillechelt]

This is the output on bankai build:

❯ npx bankai build
14:30:28 ✨  Compiling & compressing files

14:30:28 ✨  created: dist
14:30:28 🚨  bankai.asset: could not find a file for 
14:30:28 ✨  created: dist/manifest.json
14:30:28 ✨  created: dist/manifest.json.gz
14:30:28 ✨  created: dist/manifest.json.deflate
14:30:28 ✨  created: dist/manifest.json.br
14:30:28 🚨  Failed while processing 'scripts'.

 --> index.js:2:1
  |
2 | import { html, render } from 'lit-html';
  | ^ Syntax Error

Hmmm. We're having trouble parsing a file.

[yoshuawuyts]

Ugh; looks like we did too good of a job on prettifying errors >.>

Let me try and repro this. Be back with you in a bit!

[khalillechelt]

Thanks!

[yoshuawuyts]

Okay, looks like brfs is the culprit here. For a quick fix, apply the following patch to bankai:

diff --git a/lib/graph-script.js b/lib/graph-script.js
index 86d345a..2e4d083 100644
--- a/lib/graph-script.js
+++ b/lib/graph-script.js
@@ -37,7 +37,7 @@ function node (state, createEdge) {
 
   b.ignore('sheetify/insert')
   b.transform(sheetify)
-  b.transform(brfs)
+  // b.transform(brfs)
   b.transform(glslify)
   b.transform(yoyoify, { global: true })
 
@@ -51,6 +51,7 @@ function node (state, createEdge) {
     self.emit('progress', 'scripts', 30)
 
     b.bundle(function (err, bundle) {
+      console.log('error', err)
       if (err) {
         delete err.stream
         err = ttyError('scripts', 'browserify.bundle', err)

Recommended to run without switching buffers through the -q flag.

$ bankai start -q

It seems after this patch is applied there's still some errors related to importing source type module style modules from within Node. So there may be a few more hurdles, ugh. Let me dig a little further on how to solve this, ghmmm.

edit: note that this may just be an issue with lit-html, because they don't have the .mjs syntax, and Node doesn't like that. We should find a way past that.

[khalillechelt]

Thanks Yosh.

[yoshuawuyts]

Oh, no yeah think I figured it out — I think the transform needs to be global because lit-html uses the export keyword, and locally defined transforms don't operate globally. Alright, let's get Babel support into core! @Kahlil any presets you generally use?

[goto-bus-stop]

Passing `"global": true` to the babelify transform options should also make it run globally, im 80% sure

…

On 14 November 2017 14:58:06 CET, Yoshua Wuyts ***@***.***> wrote: Oh, no yeah think I figured it out — I think the transform needs to be _global_ because `lit-html` uses the `export` keyword, and locally defined transforms don't operate globally. Alright, let's get Babel support into core! @Kahlil any presets you generally use? -- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: #329 (comment)

-- Sent from mobile. Please excuse my brevity.

[khalillechelt]

oh yeah yeah that's not an issue I just added the same config into the lit-html package.json to make that work. A global transform is not advisable I think.

My problem was just that the transform did not apply to my file.

When it comes to presets I am just interested in the default env presets.
I think what would be interesting as well would be rollup support :)

[yoshuawuyts]

Waiting for brfs & static-module to be moved to the Browserify org. Related patches:

• Update falafel browserify/static-module#29
• deps(package): Update static-eval to 2.0 browserify/static-module#35
• patch to bump brfs to use the new parser

---

I think what would be interesting as well would be rollup support :)

@Kahlil Oh cool! — what would you like to see from Rollup? We have tree shaking, bundle flattening, and soon code splitting too (in #266). Would we be missing anything? (:

[khalillechelt]

We have tree shaking, bundle flattening, and soon code splitting too (in #266). Would we be missing anything? (:

Oh, well don't mind me then, that sounds perfect 😄 .

[yoshuawuyts]

Added a PR to add Babelify into Bankai directly here #332 🎉 — If this doesn't land straight away, we should at least be publishing the brfs patch within the next 24 hours. Thanks!