rails asset pipeline javascript "SyntaxError: Unexpected token export" - javascript

I've got the lovely topojson library working for me in a Rails app locally:
https://github.com/topojson/topojson
and it's allowing us to show some nice geoJSON in a google map like so:
I show it with the map.js file exposed, since that seems to be where the trouble is when we deploy to heroku. On heroku the map.js file gives an error on chrome:
maps-....js:27 Uncaught SyntaxError: Unexpected token export
and a similar error (although on a different line) on firefox:
SyntaxError: export declarations may only appear at top level of a module maps-...js:1
I've been in touch with heroku support who suggested locking down our npm version, as it seems like the minified js file is ending up with slightly different content locally than on heroku. I note that I've done everything I can to replicate production mode locally, clobbering and recompiling the static assets etc. and running like so:
RAILS_SERVE_STATIC_FILES=true DEVISE_SECRET_KEY=1234 AIRBRAKE_PROJECT_ID=1234 RAILS_ENV=production bundle exec rails s
but try as I might I cannot replicate the issue on my dev machine.
You can see all the gory details in this PR https://github.com/AgileVentures/LocalSupport/pull/1069 and I was wondering if anyone had any ideas about anything else that could be a difference between my dev machine and heroku that could be leading to the javascript files compiling differently? On heroku we have the following:
export*from"topojson-client";export*from"topojson-server";export*from"topojson-simplify
but there is no mention of the offending export keywords in the static assets compiled locally, but there they are in the files on the heroku server. I've been trying all sort of methods to ensure that I'm deleting cached files and that that the changes I am making are being reflected both locally and on heroku.
I've also been investigating ways to try and handle the export keyword (new in es6) but that seems like an even deeper rabbit hole, i.e. sprockets 4 or webpack or similar.
Anyhow, if anyone has any thoughts on other things that could cause heroku to be operating differently here I'd love to hear them, so I can either lock them down or work out how to replicate the bug locally.
Many thanks in advance

Heroku support are saying that the problem here is using npm with the asset pipeline and the better approach would be to use webpacker

Related

Not able to fork external JavaScript server file in Electron

so I am making an application that requires a backend API, and it uses certain node_modules which don't work when compiling with Electron. To fix this, I put the API code into a separate JavaScript file, which I am attempting to fork using child_process.
I have gotten this to work when compiling, but it immediately stops working after I move the "win-unpacked" folder or try to install the app using the compiled installer.
I have checked, and it is not the path that is wrong, it is correctly pointing to the file. From testing, it appears that the file actually does get forked, but immediately exits with the status code 1.
I can't use require(./filepath.js) because that will just include the code in the compiler, which doesn't work with the modules I am using.
I am hoping someone knows what is wrong and what I should do to fix it, or have any ideas for other ways to run the server code without including it in the compiler.
I am using Vue.js 3 and vue-cli-electron-builder version 2.1.1
The server I am attempting to run is a express server.

Can't profile Babel-transpiled Node.js app with Spy-js in WebStorm

So me and my team are currently in the process of profiling our Node.js app to try and improve performance on it as much as we can. After doing it with Chrome's DevTools for Node.js which was not excruciatingly hard to achieve, I thought of giving Jetbrains' Spy-js a try and so far I've had no luck.
The app is run from inside a Docker container, and the code is transpiled with babel-cli on the fly so this surely complicates things a bit. Even though I could probably get it working outside Docker and somehow connect it to the other containers, I could not go as far as to try that since I haven't managed to run the app with Spy-js.
Spy-js differs from DevTools in that it doesn't just connect with the app through the native inspector's debugging port, but rather requires the app to be run from the tool so that it can also intercept and modify script execution on the fly (as per their docs).
Since I'm using babel-node to run the app, I've tried creating a new Run/Debug configuration in WebStorm pointing to it (from a fresh global install of babel-cli) as the "Node interpreter" value in the options window. I've also already added all of the app's required environment variables to the options.
With the above setup, attempting to run the new Spy-js configuration results in the following errors:
Undefined handler Super
session (ak133): Error while instrumenting '<app directory here>/node_modules/p-locate/index.js'
(g is not a function)
session (ak133): Unexpected identifier
<app directory here>/node_modules/boom/lib/index.js:249
constructor(message, options undefined {}) {
^^^^^^^^^
Which looks like it's having trouble transpiling dependencies (boom). The original source for this was options = {} so I'm not sure why it would be converted to that either.
As much as I know this is not officially supported yet, I'd really appreciate being able to get it running somehow as Spy-js seems to do its own thing and isn't just another wrapper for the native v8 profiler, so any help would be appreciated.
Try using -r babel-register instead of babel-node - does it make things any better?
Of course, you need adding .babelrc to your project, like
{
"presets": ["env"]
}

Electron-builder with webpack

tl,dr:
Here's what I got:
Electron
React
Webpack
electron-builder
electron-edge
node-fibers
some static assets (.png, .svg etc.)
Here's what I want:
A crossplatform autoupdating installer for the software
The long version and the problems:
I can get Electron, React, Electron Edge, node-fibers, webpack and the static assets to run perfectly when I start the webpackserver in dev mode.
However, how can I integrate this into electron-builder?
I'm new to this whole build process and I just took this boilerplate to get started:
Github of the boilerplate
To me, the dev debug process seems to go like this:
Have webpack create a bundle.js and an index.html out of my src folder
Start a webpackserver with hot mode that serves these files
However, how should I tell electron-builder where to get the different files from? There is no package.json nor node_modules/ inside dist/ and node-fibers isn't getting bundled as well (because webpack seems to fck with __dirname or smth, so I excluded it).
Whenever I launch the generated .exe file (that's not the installer, just an exe file that's supposed to launch the program), a message appears that main.js can't be found in the app.asar file. I tried extracting it, but it fails before it gets to extract the whole package. Main.js is never needed anyway though, because that was the whole point of having webpack transpile it or am I missing something here?
I have searched all over the internet for hours now, but I don't get all the concepts ..
Could anyone here explain what's wrong with my setup and what I can do to fix that?
I recommend you to use https://github.com/chentsulin/electron-react-boilerplate
If you don't want to use boilerplate for react app, consider to use https://github.com/electron-userland/electron-webpack (but boilerplate is strongly recommended).
I ended up with this boilerplate:
https://github.com/szwacz/electron-boilerplate
I couldn't get HMR to work and had to fix some es6 stuff, but at least it's doing its job.

Javascript files working on Chrome when accessed through Node.js server, but not working when opened from folder

Yesterday I split my single Javascript file into multiple files. When I tried to export/import the additional files, I was getting an error ("Unexpected token export" and "Unexpected token import"). When I removed the export/import lines, the code worked fine through my basic Node.js server.
I was checking something else just now and opened the file in Chrome from the folder (i.e., not through the server but opening the HTML file directly) and got an error, which I tracked down to a lack of sharing between the multiple JS files. I added the export/import commands again and got the original error.
What's odd is that the code works on the server in Chrome, works on both the server and from the folder in Firefox, but does not work from the folder in Chrome.
Why might it be that (1) I was prevented from using the export/import commands, and (2) I'm getting a perplexing combination of success and failure by launching the file in these different ways?
Export and Import are keywords introduced by ECMA2016 Specs.
These are not yet supported by latest node out of box. If it worked then am pretty sure you're using babel to transpile the code on the fly. (check in your package.json)
Also modules are not yet supported in browser either.
Hence a bundling system like webpack or browserify needs to be in place to bundle all your javascript modules into one file to make them work on browser. Also, if you're using import and export in those files instead of CommonJS module style require('') , then you need to add babel transpilation as a plugin in your bundling tool as well.
http://blog.andrewray.me/how-to-use-es6-in-nodejs/
https://github.com/babel/babel-loader
Note: Babel6 has brought in a lot of changes which may not work in the traditional way .so make sure which babel version you're using.

Import MQTT NPM module into NativeScript

I'm trying to use MQTT npm package as part of a NativeScript application I'm building.
I'm running into a problem when I try to require it.
My code uses the var mqtt = require('mqtt'); as the example indicates, but when trying to compile the NativeScript application, I get the following error :
com.tns.NativeScriptException: Failed to find module: "mqtt", relative
to :/app/tns_modules.
I've verified that the mqtt folder is in my node_modules folder, and I tried creating a tns_modules folder and copying the mqtt folder there as well.
However I'm still getting the error. I tried loading the knock-knock-jokes package and that loads perfectly.
I'm using the latest versions of Node and NativeScript as 13 April 2016 (4.4.0 for Node and 1.7.1 for NativeScript).
Ok, I tried this out to see why this is happening.
The very first line of mqtt.js is
#!/bin/node...
Which is invalid JavaScript code. Node has been programmed to ignore it; but NativeScript does not. (Might be worth a enhancement request..)
So when it loads this file to parse it, it fails to parse and returns that it isn't available. (Not always the best error on parse issues)
HOWEVER, if you fix that error you will run into MORE issues. It will then complain about not finding the "net" library. NativeScript does not have a net library built in. To my knowledge no one has yet created a net replacement for NativeScript. So, in a lot of cases you can use node modules as is; but if they call anything that depends on a built in node library; they unfortunately will not currently work in NativeScript as their is no equivalent library existing.
Just looking at the dependencies of the mqtt library; your odds of getting this working on NativeScript looks at a glance pretty slim.

Categories