Babel: Weird optimization...

Created on 22 Dec 2017 · 3Comments · Source: babel/babel

Choose one: is this a bug report or feature request? Bug

Just recently, the output from a build of server code isn't working as expected... It's using webpack + babel... the relevant babel configuration is below

Input Code

doesn't work...

input

import fn from 'foo';
...
    ctx.body = fn(ctx, ctx.body, null);
...

output

var _wrapResponse = _interopRequireDefault(__webpack_require__(52));
...
function _initializerDefineProperty(target, property, descriptor, context) { if (!descriptor) return; Object.defineProperty(target, property, { enumerable: descriptor.enumerable, configurable: descriptor.configurable, writable: descriptor.writable, value: descriptor.initializer ? descriptor.initializer.call(context) : void 0 }); }
...
    _initializerDefineProperty(ctx, "body", ctx, ctx.body);

There's no reference to _wrapResponse.default ...

works...

input

    const body = fn(ctx, ctx.body, null);
    ctx.body = body;
...

outputs

    const body = (0, _wrapResponse.default)(ctx, ctx.body, undefined);
    ctx.body = body; // ctx.body = wrapResponse(ctx, ctx.body, undefined);

Babel/Babylon Configuration (.babelrc, package.json, cli command)

package.json

{
  "name": "design-view",
  "version": "0.0.2",
  "build": "DEVELOPMENT",
  "description": "designView by Berkadia",
  "author": "Kevin Phillips <[email protected]>",
  "dependencies": {
    "cookie-parser": "^1.4.3",
    "core-decorators": "^0.20.0",
    "cross-env": "^5.0.5",
    "deep-freeze": "0.0.1",
    "ejs": "^2.5.7",
    "express": "^4.16.1",
    "extendscript-es5-shim": "^0.1.3",
    "fclone": "^1.0.11",
    "findup-sync": "^2.0.0",
    "glob": "^7.1.2",
    "http-server": "^0.10.0",
    "jsforce": "^1.8.0",
    "json-stable-stringify": "^1.0.1",
    "keygrip": "^1.0.2",
    "koa": "^2.4.1",
    "koa-bodyparser": "^4.2.0",
    "koa-ejs": "^4.1.0",
    "koa-mount": "^3.0.0",
    "koa-router": "^7.3.0",
    "koa-static": "^4.0.2",
    "mysql2": "^1.5.0",
    "mz": "^2.7.0",
    "nodemon": "^1.12.1",
    "soap": "^0.22.0",
    "sql-template-strings": "^2.2.2",
    "uuid": "^3.1.0"
  },
  "devDependencies": {
    "@angular-redux/router": "^6.4.1",
    "@angular-redux/store": "^6.6.0",
    "@angular/animations": "^4.4.4",
    "@angular/common": "^4.4.4",
    "@angular/compiler": "^4.4.4",
    "@angular/compiler-cli": "^4.4.4",
    "@angular/core": "^4.4.4",
    "@angular/forms": "^4.4.4",
    "@angular/http": "^4.4.4",
    "@angular/platform-browser": "^4.4.4",
    "@angular/platform-browser-dynamic": "^4.4.4",
    "@angular/platform-server": "^4.4.4",
    "@angular/router": "^4.4.4",
    "@angularclass/hmr": "^2.1.3",
    "@angularclass/hmr-loader": "^3.0.4",
    "@babel/cli": "^7.0.0-beta.33",
    "@babel/core": "^7.0.0-beta.33",
    "@babel/node": "^7.0.0-beta.33",
    "@babel/preset-env": "^7.0.0-beta.33",
    "@babel/preset-stage-0": "^7.0.0-beta.33",
    "@types/jasmine": "^2.6.0",
    "@types/node": "^8.0.32",
    "@types/selenium-webdriver": "^3.0.7",
    "@types/source-map": "^0.5.1",
    "@types/uglify-js": "^2.6.29",
    "@webcomponents/custom-elements": "^1.0.4",
    "add-asset-html-webpack-plugin": "^2.1.2",
    "angular-sortablejs": "^2.0.6",
    "angular2-template-loader": "^0.6.2",
    "angular2-uuid": "^1.1.1",
    "assets-webpack-plugin": "^3.5.1",
    "awesome-typescript-loader": "^3.4.0",
    "babel-eslint": "^8.0.1",
    "babel-loader": "^8.0.0-beta.0",
    "body-parser": "^1.18.2",
    "clarity-angular": "^0.10.8",
    "clarity-icons": "^0.10.8",
    "clarity-ui": "^0.10.8",
    "codelyzer": "^3.2.0",
    "color": "^2.0.1",
    "copy-webpack-plugin": "^4.1.1",
    "core-js": "^2.5.1",
    "css-loader": "^0.28.7",
    "deep-equal": "^1.0.1",
    "eslint": "^4.12.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-prettier": "^2.3.1",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^1.1.5",
    "find-root": "^1.1.0",
    "font-awesome": "^4.7.0",
    "format-util": "^1.0.3",
    "gh-pages": "^1.0.0",
    "html-webpack-plugin": "^2.30.1",
    "husky": "^0.14.3",
    "ie-shim": "^0.1.0",
    "jasmine-core": "^2.8.0",
    "jshint": "^2.9.5",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.1.0",
    "karma-mocha-reporter": "^2.2.4",
    "karma-remap-coverage": "^0.1.4",
    "lint-staged": "^4.2.3",
    "mutationobserver-shim": "^0.3.2",
    "ng-router-loader": "^2.1.0",
    "ngc-webpack": "^3.2.2",
    "node-sass": "^4.5.3",
    "npm-run-all": "^4.1.1",
    "optimize-js-plugin": "0.0.4",
    "parse5": "^3.0.2",
    "prettier": "^1.7.4",
    "protractor": "^5.1.2",
    "raw-loader": "^0.5.1",
    "redux": "^3.7.2",
    "reflect-metadata": "^0.1.10",
    "rimraf": "^2.6.2",
    "rxjs": "5.5.2",
    "sass-lint": "^1.12.0",
    "sass-loader": "^6.0.6",
    "script-ext-html-webpack-plugin": "^1.8.5",
    "shelljs": "^0.7.8",
    "sortablejs": "^1.6.1",
    "source-map-support": "^0.5.0",
    "style-loader": "^0.19.0",
    "to-string-loader": "^1.1.5",
    "ts-node": "^3.3.0",
    "tslib": "^1.7.1",
    "tslint": "^5.7.0",
    "tslint-config-prettier": "^1.5.0",
    "tslint-eslint-rules": "^4.1.1",
    "tslint-loader": "^3.5.3",
    "typedoc": "^0.8.0",
    "typescript": "^2.5.3",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.6.2",
    "util": "^0.10.3",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-merge": "^4.1.0",
    "zone.js": "^0.8.18"
  },
  "repository": {
    "type": "git",
    "url": "https://tfs.berkadia.com/tfs/Enterprise/Production/_git/designView-angular/"
  },
  "license": "ISC",
  "lint-staged": {
    "*.{ts,js}": [
      "prettier --write --config .prettierrc",
      "git add"
    ]
  },
  "scripts": {
    "clean": "rimraf dist",
    "build": "npm run clean && npm run build:client && npm run build:server && npm run build:config",
    "prebuild:client": "rimraf dist/client",
    "build:client": "cross-env NODE_ENV=production webpack --verbose --config config/webpack/webpack.prod.js",
    "build:server": "cross-env NODE_ENV=production webpack --config config/webpack/webpack.server.config.babel.js",
    "build:config": "babel-node scripts/build-config.js",
    "format": "prettier --write --config .prettierrc ./**/*.js ./**/*.ts",
    "lint": "eslint ./server && tslint --project ./",
    "start": "nodemon --config ./config/nodemon.dev.json server2/server-dev.js -V",
    "watch": "cross-env NODE_ENV=development webpack --config config/webpack/webpack.dev.js --watch",
    "test": "npm run lint && echo TODO: Setup Test Environment",
    "precommit": "lint-staged"
  }
}

.babelrc

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        loose: true,
        targets: {
          node: 'current',
        },
      },
    ],
    '@babel/preset-stage-0',
  ],
};

config/webpack/webpack.server.config.babel.js

import path from 'path';
import fs from 'fs';
import webpack from 'webpack';
import fclone from 'fclone';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import babelOptions from '../../.babelrc';

var nodeModules = {};
fs
  .readdirSync('node_modules')
  .filter(x => ['.bin'].indexOf(x) === -1)
  .forEach(mod => {
    nodeModules[mod] = `commonjs ${mod}`;
  });

module.exports = {
  entry: {
    server: ['source-map-support/register', './server2/server.js'],
  },
  target: 'node',
  output: {
    path: path.join(__dirname, '../../dist'),
    filename: 'server.js',
  },
  node: {
    __filename: false,
    __dirname: false,
  },
  externals: nodeModules,
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          ...babelOptions,
          cacheDirectory: true,
        },
      },
    ],
  },
  plugins: [
    new webpack.IgnorePlugin(/\.(css|less)$/),
    new webpack.BannerPlugin({
      banner: 'require("source-map-support").install();\r\n',
      raw: true,
      entryOnly: false,
    }),
    new CopyWebpackPlugin([
      {
        from: 'server2/meta',
      },
      {
        from: 'templates',
        to: 'templates',
      },
    ]),
  ],
  devtool: 'source-map',
  stats: {
    colors: true,
  },
  watchOptions: {
    aggregateTimeout: 1000,
    poll: 1000,
  },
};

Expected Behavior

I Expect the referenced function to be called.

Current Behavior

The output isn't correct

Possible Solution

Frankly, I didn't dig in too far to figure out exactly where the bug was happening... I spent literally a full work day digging down before it occurred to me to wipe/reload my node_modules and package-lock since it was only presenting on the server via iisnode. (will avert my rant here).

Context

As said above, the issue came up via build/deploy on the servers, wasn't happening locally, so was somewhat weird in general. We have developers on windows and mac, and build/deploy in windows currently (ugh, don't want to get started there)... And package-lock differences between mac/windows causes problems, or would be using that.

Your Environment

presents in mac and windows.

| software | version(s)
| ---------------- | -------
| Babel | @babel/[email protected]
| node | 8.8.1
| npm | 5.4.2
| Operating System | Windows 10, Windows Server 2016, MacOS High Sierra

bug duplicate outdated

Source

tracker1

Most helpful comment

This bug is fixed by https://github.com/babel/babel/pull/7032. Until the next beta is released, I suggest using 7.0.0-beta.34.

Also, it is discouraged to use ^ on Babel beta versions in package.json since there could be breaking changes between betas.

nicolo-ribaudo on 22 Dec 2017

👍3

All 3 comments

Hey @tracker1! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.