The custom express with es6

[youhosi]

Is there any way to optimally translate the code of a custom server through babel? I also need the server-side es6 syntax. I've seen all topics about this problem, but none of them satisfy me.

[lfades]

Next.js doesn't handle this scenario, we provide the API for the server to start the Next.js app, but we don't have any control over what happens on your custom server.

[mattcarlotta]

You can use @babel/node or @babel/register to transpile/compile ES6 syntax, although it comes with its own caveats: Slower development boot up, it may require another babel configuration (one specifically for node), and will require that you manually compile ES6 code to its own build/dist folder (otherwise, you'll be transpiling/compiling code in production, which is not very optimal).

If Vercel would like an example repo, I can provide one; although, I feel it won't be very beginning-junior developer-friendly.

On that note, newer versions of Node (14.x) already natively (experimentally!) support ES6 modules, which includes import/export syntax.

[youhosi]

@mattcarlotta

I've already used babel-node, but the fact is not the best solution in terms of optimization. Unless I actually use babel-plugin-transform-runtime and transpose the code. If you can share the configuration then I would be grateful. She would definitely lead me on the right way.

[mattcarlotta]

@youhosi Any reason why you need babel (other than the import and export syntax)?

Therein lies one of the problems I've mentioned above, where you may need a custom babel config to reduce the build size and compile it to ES5 syntax. There's no way around it, especially if you need the runtime regenerator.

Another issue you'll run into is if you don't compile a particular file/folder that is imported from a compiled file, unless you alias them in babel, their relative paths will no be valid (since all compiled files are moved into a parent build folder).

On that note, another alternative might be to use a custom webpack/rollup configuration for the server-side files which can be compiled to a single minified JS file (although this approach seems kind of overkill).