Unable to transpile ES6 to ES5 for IE11

Bug report

Describe the bug

As per my knowledge next/babel in presets should transpile the code for non ES6 supporting browsers. But I can still find arrow functions, class, etc, in my /out folder. Also when I try to deploy this build it only works for chrome but not for IE or older versions of firefox.

To Reproduce

Repo Link: Steps to reproduce the behavior, please provide code snippets or a repository: `

1. git clone https://github.com/mdvkmd/nextTranspileIssue.git nextTranspileIssue
2. cd nextTranspileIssue
3. npm install
4. npm run start `

Expected behavior

It should produce ES5 transpiled code in out folder and should work on IE 11, Firefox 30, etc

System information

• OS: macOS
• Browser : [IE11, mozilla 30]
• Version of Next.js: [^9.1.6]

Additional context

I’ve also tried the below babel.config (Will also attach more babel.configs that I have tried)

module.exports = function (api) {
  api.cache(true);

  const presets = [
    [
      'next/babel',
      {
        'preset-env': {
          targets: {
            browsers: ['last 2 versions', 'ie > 9']
          },
          corejs: '2',
          useBuiltIns: 'usage',
          loose: true
        },
        'transform-runtime': {
          useESModules: false
        }
      }
    ]
  ];

  const plugins = [
    'inline-dotenv',
    ['module-resolver', { root: ['./src'] }],
    ['import', { libraryName: 'antd', style: 'css' }],
    ['emotion']
  ];

  const env = {
    test: { presets: [['next/babel']] },
    production: { presets: [['next/babel', { 'preset-env': { modules: false } }]] }
  };

  return {
    presets,
    plugins,
    env
  };
};

But the above results in Error occurred prerendering page "/recharge" https://err.sh/zeit/next.js/prerender-error: TypeError: Class constructor App cannot be invoked without 'new'

Related Links: #7914 #9000

[belgattitude]

@abhinavnigam2207

In my experience it’s not related to nextjs… as @jamesmosier mentioned this too often comes with npm thirdparty. So here’s something that might help :

Locate problems with es-check

yarn add es-check --dev

Add scripts in your package.json

{
    "clean": "rimraf --no-glob ./.next ./out",
    "check:es:build": "es-check es5 './.next/static/**/*.js' -v",
    "check:es:export": "es-check es5 './out/**/*.js' -v",
}

Then run yarn clean && yarn check:es:build for example

You’ll probably end up with an error message. The tricky part is now to locate the incriminated package in the file (I generally open it, then format in webstorm, and guess the culprit).

Transpile the package with next-transpile-modules

yarn add next-transpile-modules --dev

Activate it in your next.config.js

const withTM = require('next-transpile-modules')([
  // Those packages needs to be transpiled to be sure they pass `es-check es5`
  'ky',
  '@sindresorhus/is',
]);

module.export = withXX?(
  withZZ?(
    withTM({
      // your next config
    })
 )
)

Then retry a build and a check.

Notes

• Good to put the es5 checks in your CI
• I’m often too lazy, but would be awesome to open P/R for corresponding package

Hope it helps

[claudijo]

For anyone coming here and finding the the answer from @belgattitude as helpful as I did… Here is a small node script for creating a CLI that might help you figure out where in the third party scripts the culprit is.

Note that you have to install the source-map and yargs dependencies from NPM.

#!/usr/bin/env node

const sourceMap = require('source-map');
const yargs = require('yargs');
const fs = require('fs');

const options = yargs
  .option('source', { alias: 's', describe: 'Path to js source map file', type: 'string', demandOption: true })
  .option('position', { alias: 'p', describe: 'Position in source map `line:column`', type: 'string', demandOption: true })
  .argv;

const [ line, column ] =  options.position.split(':');
const { source } = options;

const consumer = new sourceMap.SourceMapConsumer(fs.readFileSync(source, 'utf8'));

consumer.then(c => {
  console.log(c.originalPositionFor({
    line: parseInt(line, 10),
    column: column ? parseInt(column, 10) : 0
  }));
});