Id5 change breaks local build with webpack

[muuki88]

Type of issue

Build failure

Description

@dgirardi , @pkowalski-id5 we are having build errors and I guess it might be related to this export here.

This is the error we see

ERROR in ./node_modules/prebid.js/node_modules/@babel/runtime/regenerator/index.js 1:0
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> import _typeof from "@babel/runtime/helpers/typeof";
| // TODO(Babel 8): Remove this file.
| 
 @ ./node_modules/prebid.js/modules/id5IdSystem.js 7:0-61 271:53-77 273:15-39 324:57-81 326:11-35 352:50-74 354:11-35 382:52-76 384:11-35 419:56-80 421:11-35 464:51-75 466:11-35 569:56-80 570:11-35
 @ ./index.ts 23:0-39
 @ ./index.es5.ts 44:0-17

Steps to reproduce

This is our babelrc config

const babelConfig = {
  loader: 'babel-loader',
  options: {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            browsers: [
              'Chrome >= 61',
              'Firefox >= 57',
              'Safari >= 10.1',
              'iOS >= 10.3',
              'Edge >= 15'
            ]
          },
          useBuiltIns: 'entry',
          corejs: '3.24'
        }
      ]
    ],
    plugins: require('prebid.js/.babelrc.js').plugins
  }
};

And our webpack config

target: ['web', 'es5']

Expected results

No build failure

Platform details

• prebid 8.33.0

Other information

• Introduced in ID5 ID Module : ID5 will be able to optionally delegate its logic to an external module #10742

[patmmccann]

cc @smenzer

[dgirardi]

Can I have some more info on how to reproduce? I tried this webpack config:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    target: ['web', 'es2015'],
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    targets: {
                                        browsers: [
                                            'Chrome >= 61',
                                            'Firefox >= 57',
                                            'Safari >= 10.1',
                                            'iOS >= 10.3',
                                            'Edge >= 15'
                                        ]
                                    },
                                    useBuiltIns: 'entry',
                                    corejs: '3.24'
                                }
                            ]
                        ],
                        plugins: require('prebid.js/.babelrc.js').plugins
                    }
                }
            }
        ]
    }
};

and this src/index.js:

import pbjs from 'prebid.js';
import 'prebid.js/modules/id5IdSystem.js';

pbjs.processQueue();

but the build completes without error.

[muuki88]

Hi @dgirardi

I messed up the configs 🙈 It's the ES5 build that fails. Here's how to reproduce

package.json

{
  "name": "build-error",
  "version": "2.0.0",
  "description": "Oh no.. webpack",
  "main": "index.ts",
  "scripts": {
    "build": "webpack --config webpack.config.js --mode=production"
  },
  "dependencies": {
    "core-js": "3.24.1",
    "prebid.js": "8.33.0",
    "whatwg-fetch": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "babel-loader": "^9.1.2",
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.5",
    "webpack": "^5.79.0",
    "webpack-cli": "^5.0.1"
  }
}

webpack config

'use strict';

const path = require('path');

const prebidBabelConfig = require('prebid.js/.babelrc.js');
const babelPresetEnv = require('@babel/preset-env');
// presets and plugins for Prebid.js must be manually specified separate from your other babel rule.
// this can be accomplished by requiring prebid's .babelrc.js file (requires Babel 7 and Node v8.9.0+)
const babelConfig = {
  loader: 'babel-loader',
  options: {
    ...prebidBabelConfig,
    presets: [
      [
        babelPresetEnv,
        {
          useBuiltIns: 'entry',
          corejs: '3.24'
        }
      ]
    ]
  }
};

console.log(`>>>>>>>>>>>>>> COMPILE MODE: es5 <<<<<<<<<<<<<<`);

module.exports = (_, argv) => ({
  name: 'es5 bundle',
  mode: 'development',
  devtool: argv.mode === 'production' ? false : 'inline-source-map',
  target: ['web', 'es5'],
  entry: {
    moli_es5: './index.ts'
  },
  output: {
    filename: argv.mode === 'production' ? `[name]_[chunkhash].min.js` : `[name].min.js`,
    path: path.resolve(__dirname, 'dist'),
    publicPath: ''
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          babelConfig,
          {
            loader: 'ts-loader',
            options: { allowTsInNodeModules: false }
          }
        ]
      },
      // this separate rule is required to make sure that the Prebid.js files are babel-ified. this rule will
      // override the regular exclusion from above (for being inside node_modules).
      {
        test: /.js$/,
        include: [/@highfivve/, new RegExp(`\\${path.sep}prebid\.js`)],
        use: [babelConfig]
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.json']
  }
});

index.ts

import 'core-js/features/object/from-entries';

import 'whatwg-fetch';
import 'core-js/es/promise';
import 'core-js/es/string/starts-with';
import 'core-js/es/object/assign';
import 'core-js/features/array/find';
import 'core-js/features/array/find-index';
import 'core-js/features/array/from';
import 'core-js/features/array/includes';
import 'core-js/features/object/from-entries';
import 'core-js/features/set';
import 'core-js/features/weak-set';
import 'core-js/features/string/includes';
import 'core-js/features/number/is-integer';

import prebid from 'prebid.js';

import 'prebid.js/modules/userId/index';
import 'prebid.js/modules/id5IdSystem';

prebid.processQueue();

[dgirardi]

Still unable to reproduce:

>>>>>>>>>>>>>> COMPILE MODE: es5 <<<<<<<<<<<<<<
asset moli_es5.min.js 1.51 KiB [emitted] (name: moli_es5)
./index.ts 39 bytes [built] [code generated] [2 errors]

ERROR in ./index.ts 
[tsl] ERROR
      TS18002: The 'files' list in config file 'tsconfig.json' is empty.
ts-loader-default_f3beb3bf51246d53
ERROR in ./index.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: error while parsing tsconfig.json
    at Object.loader (/home/demetrio/src/webpack-demo/node_modules/ts-loader/dist/index.js:18:18)

es5 bundle (webpack 5.90.0) compiled with 2 errors in 202 ms

Here I assumed this tsconfig:

{
  "files": ["index.ts"]
}

Then:

>>>>>>>>>>>>>> COMPILE MODE: es5 <<<<<<<<<<<<<<
asset moli_es5.min.js 2.52 MiB [emitted] (name: moli_es5)
runtime modules 1.19 KiB 5 modules
modules by path ./node_modules/core-js/ 162 KiB
  modules by path ./node_modules/core-js/internals/*.js 112 KiB 148 modules
  modules by path ./node_modules/core-js/modules/*.js 49.5 KiB 51 modules
modules by path ./node_modules/prebid.js/ 514 KiB
  modules by path ./node_modules/prebid.js/src/ 434 KiB 51 modules
  modules by path ./node_modules/prebid.js/modules/ 75.2 KiB 3 modules
  modules by path ./node_modules/prebid.js/libraries/creativeRender/*.js 4.27 KiB 3 modules
modules by path ./node_modules/@babel/runtime/ 20.6 KiB
  modules by path ./node_modules/@babel/runtime/helpers/esm/*.js 8.86 KiB 27 modules
  modules by path ./node_modules/@babel/runtime/helpers/*.js 11.3 KiB 2 modules
  + 1 module
+ 6 modules
es5 bundle (webpack 5.90.0) compiled successfully in 2630 ms

[muuki88]

I once again made the mistake to trust yarn.lock ( same for package-lock.json) and assumed that the versions would lock. Nope. Deleting the lock file and running it again works. This is why the minimal example works, because some babel dependency is upgraded, which fixes the issue 😭

Thanks for taking the time to look into this @dgirardi 🙏