Next.js: Custom babel config

[rauchg]

Perhaps directly take babel in package.json, unless next.babel is set.

[rauchg]

If we move forward with this, we can document in the README how to for example add decorators support to next.

[timoxley]

Note that this appears to work out of the box already if you simply configure plugins and transforms in your package.json or .babelrc

e.g. in package.json

{
  "name": "my-app",
  …
  "babel": {
    "presets": [
      "latest",
      "react"
    ],
    "plugins": [
      "babel-plugin-istanbul",
      "transform-runtime"
    ]
  }
}

This works because by default babel will merge any configurations it finds in parent directories.

Users will need to set these up anyway if they're going to test code that runs outside next.

However, I did not have any luck using next with mobx + babel-plugin-transform-decorators-legacy. The code compiled just fine and it appears to run on the server, but none of the decorators seem to function correctly. Didn't look into it very deeply, but it may be something to do with the order of the babel plugins.

[reflog]

@timoxley - great tip, did you figure out why mobx observers didn't fire?

[vdanchenkov]

@timoxley It didn't work for my case. Looks like plugin added this way got lowest priority. Even lower then presets. Am I right? Is it how it's intended to work?

I guess I need to fix my plugin to make it work regardless of priority.

P.S. Hmm... It might be the source of problem with mobx

[timoxley]

@reflog NFI.
@vdanchenkov yeah the problem is almost definitely because of the plugin order, not sure if solvable without some hackery by next.

[rauchg]

@timoxley thanks a lot for that report. Very happy that it already partially works!

[rauchg]

As far as potential solutions, one could be that we consider the set of transformations performed by next the "next bundle", and you're able to override the entire configuration, specifying yourself where that next bundle falls.

This is just a quick conjecture I just thought of, not sure if it's an actual solution.