Cannot include @nuxt/babel-preset-app in nuxt.config.js

[pimlie]

Version

v2.4.0

Reproduction link

https://codesandbox.io/s/q91mz897jq

Steps to reproduce

Include nuxt babel preset as described in docs: https://nuxtjs.org/api/configuration-build#babel

What is expected ?

Page loads correctly

What is actually happening?

Page doesnt load and shows a regeneratorRuntime is not defined error

Additional comments?

Related: #4873 (comment)

_{This bug report is available on Nuxt community (#c8574)}

[LuXDAmore]

I've a project created with the @vue/cli, it includes a babel.config.js file with presets: [ '@vue/app' ].
Later i've added Nuxt, with (as described in documentation) babelrc: false in nuxt.config.js.

What is expected?
That the babel.config.js configuration file is ignored and loads the default @nuxt/babel-preset-app.

Reproduction link
DEMO

What is actually happening?
Page doesn't load and shows a regeneratorRuntime is not defined error.

Additional comments?

• I tried to add presets: [ '@nuxt/babel-preset-app' ] after babelrc: false;
• I tried to add presets: [ '@vue/app', '@nuxt/babel-preset-app' ] (and inverted too) in babel.config.js;
• No issues in v2.3.4

Same results.

[LuXDAmore]

Maybe babelrc property in nuxt.config.js should be renamed in something clearer, due to multiple possibile configuration files for babel's (can be in package.json too).

[mauxtin]

FWIW, I also mentioned the same problem here #4873 (comment)

For now, I just removed this dependency completely (but ofc that's not a solution)

[clarkdo]

This issue is due to @nuxt/babel-preset-app is specified without any target.

presets: ["@nuxt/babel-preset-app"] is the default preset with specified target in nuxt.

But what happened in #4873 (comment) mentioned by @mauxtin is a different issue that nuxt doesn't support different babel config in server and client.

For now, I suggest using default babel preset provided by Nuxt, you can still add other configs(like: build.babel.plugins).

Or you can use functional preset:

build: {
  babel: {
    presets({ isServer }) {
      const targets = isServer ? { node: 'current' } : { ie: 11 }
      return [
        [ require.resolve('@nuxt/babel-preset-app'), { targets } ]
      ]
    }
  }
}

The server and client babel config can be a new feature request, I think we can introduce build.babel.client and build.babel.server with same config as build.babel, like:

build: {
  babel: {
    client: {
      presets: [...],
      plugins: [...]
    }
    server: {
      presets: [...]
    }
  }
}

How do you think @pimlie @LuXDAmore @mauxtin ? If you have any proposal, please comment here.

[alanaasmaa]

Can server even use any other target than node?

Maybe we should force node as a target on server side?

[clarkdo]

@abalabahaha User may specify different node verisons for server preset.

[mauxtin]

@clarkdo If I understood correctly, simply adding this will include the default nuxt configuration, right?

 babel: {
    presets: ['@nuxt/babel-preset-app'],
    plugins: (...)
  }

However I am still getting the error regeneratorRuntime is not defined with the above config.

[manniL]

@mauxtin No, because you don't set the targets.

Nuxt's default preset is set up by default as the name suggests 😋

[pimlie]

@clarkdo I wasnt aware that presets could be a function as well, the docs doesnt reflect that feature (or that the target is required). Btw, should it be targets (plural) or target (singular)? I think it should be plural as when I use target it doesnt seem to do anything?

For me the functional approach would be enough as I am only interested in changing the target as @mauxtin was.

Unfortunately that still doesnt work me, my exact code is as follows but when I open the page I get a Unknown browser query 'node' error. Did I do something wrong?

    babel: {
      presets({ isServer }) {
        console.log('HERE', isServer)
        return [
          [ require.resolve('@nuxt/babel-preset-app'), {
            targets: isServer ? 'node' : {browsers}
          }]
        ]
      }

(it indeed prints both HERE false as HERE true)

[clarkdo]

@pimlie Sorry, it's my typo, should be targets, I've updated the comment.

Indeed, I'll update the doc for function preset part

[pimlie]

@clarkdo Yeah, that works. Thanks!

[LuXDAmore]

@clarkdo Sounds good !

This issue is due to @nuxt/babel-preset-app is specified without any target.

presets: ["@nuxt/babel-preset-app"] is the default preset with specified target in nuxt.

But what happened in #4873 (comment) mentioned by @mauxtin is a different issue that nuxt doesn't support different babel config in server and client.

For now, I suggest using default babel preset provided by Nuxt, you can still add other configs(like: build.babel.plugins).

Or you can use functional preset:

build: {
  babel: {
    presets({ isServer }) {
      const targets = isServer ? { node: 'current' } : { ie: 11 }
      return [
        [ require.resolve('@nuxt/babel-preset-app'), { targets } ]
      ]
    }
  }
}

The server and client babel config can be a new feature request, I think we can introduce build.babel.client and build.babel.server with same config as build.babel, like:

build: {
  babel: {
    client: {
      presets: [...],
      plugins: [...]
    }
    server: {
      presets: [...]
    }
  }
}

How do you think @pimlie @LuXDAmore @mauxtin ? If you have any proposal, please comment here.

However I am still getting the error regeneratorRuntime is not defined with the above config (and the babel.config.js present).

[shanlh]

I think the "buildTarget" is missing.

build: {
  babel: {
    presets({ isServer }) {
      const targets = isServer ? { node: 'current' } : { ie: 11 }
      return [
        [
          require.resolve('@nuxt/babel-preset-app'),
          {
            buildTarget: isServer ? 'server' : 'client',
            targets
          }
        ]
      ]
    }
  }
}

It works.

[pimlie]

@manniL Although the issue is fixed, the docs have not yet been updated (that presets can be a fn). Maybe keep this open until the docs have been added (or at least a docs PR has been created)?

[manniL]

@pimlie Good point! Will link the PR here as soon as it's there. I'll do some doc work today ;)

[clarkdo]

Doc PR: nuxt/docs#1154