Nuxt.js: @nuxt/babel-preset-app ignores .browserlistrc

[williamchong]

Version

v2.4.3

Reproduction link

https://codesandbox.io/s/qqwx3175kq

Steps to reproduce

create file .browserslistrc with valid browserlist query, say ie 11

in nuxt.config.js enable babel debug mode

      presets: ({ isServer }) => [
        [
          '@nuxt/babel-preset-app',
          {
            debug: true,
          },
        ],
      ],

to observe babel config

What is expected ?

babel runs with target "ie 11"

What is actually happening?

babel run with default config "ie 9"

Additional comments?

https://github.com/nuxt/nuxt.js/blob/dev/packages/babel-preset-app/src/index.js#L53
probably due to "ie 9" would be used when target is not defined, despite browserlist exists

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

[manniL]

Not sure whether it's intended to respect the a .browserlistrc or not.
🤔

cc @clarkdo

[clarkdo]

@williamchong007
Since nuxt will set ie9(client) and node: current(server) as default targets, so if you want to use browserlist, please try this for enabling browserslist in client building:

Note: .browserslistrc under configPath (starting point of searching)

  build: {
    babel: {
      presets: ({ isServer }) => {
        return [[
          '@nuxt/babel-preset-app',
          {
            buildTarget: isServer ? 'server' : 'client', // for auto import polyfill
            targets: isServer ? { node: 'current' } : {},
            configPath: __dirname // if cwd is same as dir of .browserslistrc, no need to specify
          }
        ]]
      }
    }
  }

[williamchong]

Thanks for the reply
Should I treat this as a temp fix or a long term solution?

[clarkdo]

@williamchong007

Now, You can use it for sure, and I'll just close this issue 😄

About some more appropriate solution, I'll think about it, if you have any suggestions, feel free to comment here.