minifier: `toplevel = false` should prevent operations related to `unused` #4386

morriq · 2022-04-20T22:26:06Z

Describe the bug

I'm using webpack 5.65.0 with such part:

    output: {
      filename: '[name].[contenthash].bundle.js',
      library: 'application',
      publicPath: 'auto',
    },

before 1.2.169 it works well calling window.application in index.html but in 1.2.169 it prints

application is not defined

window has content of application var but in ... a variable. so it stopped respecting library: 'application', and keep content of it in window.a

Input code

No response

Config

{
  "jsc": {
    "parser": {
      "tsx": true,
      "syntax": "typescript",
      "dynamicImport": true
    },
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    }
  }
}

Playground link

No response

Expected behavior

swc/core respects webpack's library: 'application',

Actual behavior

1.2.169 stopped respecting library: 'application', and keep content of it in window.a

Version

1.2.169

Additional context

No response

The text was updated successfully, but these errors were encountered:

kdy1 · 2022-04-21T01:36:57Z

Can you some basic information which can be used to reproduce?

kdy1 · 2022-04-21T11:11:06Z

FYI, swc has nothing to do with library: 'application'
I didn't know the option before looking at the issue

morriq · 2022-04-21T19:13:18Z

@kdy1

https://github.com/morriq/swc-4386

this way is fine? I put instruction in README

RiESAEX · 2022-04-30T08:08:44Z

try

// webpack.config.js
        new TerserPlugin({
          minify: TerserPlugin.swcMinify,
          terserOptions: {
            compress: {
              arrows: false,
              conditionals: false,
              evaluate: false,
            },
            mangle: {
              topLevel: false
            },
          },
        }),

I think is caused by #4366, which we make mangle.toplevel defaults to true (and didn't update doc).

import { minify } from "@swc/core";
minify(
  `
var application;
/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	// The require scope
/******/ 	var __webpack_require__ = {};
/******/ 	
/************************************************************************/
/******/ 	/* webpack/runtime/define property getters */
/******/ 	(() => {
/******/ 		// define getter functions for harmony exports
/******/ 		__webpack_require__.d = (exports, definition) => {
/******/ 			for(var key in definition) {
/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ 				}
/******/ 			}
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
/******/ 	(() => {
/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/make namespace object */
/******/ 	(() => {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = (exports) => {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	})();
/******/ 	
/************************************************************************/
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "bootstrap": () => (/* binding */ bootstrap)
/* harmony export */ });
function bootstrap() {
    alert();
}

application = __webpack_exports__;
/******/ })()
;
`,
  {
    compress: {
      arrows: false,
      conditionals: false,
      evaluate: false,
    },
    ecma: 2015,
    mangle: true,
    module: false,
    sourceMap: undefined,
  }
).then((o) => console.log(o));

in 1.2.168, it output

 var application;(()=>{"use strict";var a={};a.d=(d,c)=>{for(var b in c)a.o(c,b)&&!a.o(d,b)&&Object.defineProperty(d,b,{enumerable:!0,get:c[b]})},a.o=(a,b)=>Object.prototype.hasOwnProperty.call(a,b),a.r=a=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(a,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(a,"__esModule",{value:!0})};var b={};function c(){alert()}a.r(b),a.d(b,{bootstrap:()=>c}),application=b})()

in 1.2.169

var a;(()=>{"use strict";var b={};b.d=(d,c)=>{for(var a in c)b.o(c,a)&&!b.o(d,a)&&Object.defineProperty(d,a,{enumerable:!0,get:c[a]})},b.o=(a,b)=>Object.prototype.hasOwnProperty.call(a,b),b.r=a=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(a,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(a,"__esModule",{value:!0})};var c={};function d(){alert()}b.r(c),b.d(c,{bootstrap:()=>d}),a=c})()

kdy1 · 2022-04-30T12:14:14Z

Sounds reasonable
I'll update the doc

morriq · 2022-05-06T17:56:59Z

thanks @RiESAEX . this is it.

morriq · 2022-09-05T19:45:14Z

Hello :),

In 247 it's the same issue. I was using 246 so it's caused between two patches.
but checking commit history I'm not sure what's causing it.

v1.2.246...v1.2.247

morriq · 2022-09-05T19:51:47Z

@kdy1 @RiESAEX I bumped PoC repo: https://github.com/morriq/swc-4386

RiESAEX · 2022-09-06T02:26:00Z

make compress.unused = false, can solve the problem,
But I don't think it is correct answer.

import { minify } from "@swc/core";
minify(
  `var application;
/******/ (() => { // webpackBootstrap/******/ 	"use strict";
/******/ 	// The require scope
/******/ 	var __webpack_require__ = {};
/******/ 	
/************************************************************************/
/******/ 	/* webpack/runtime/define property getters */
/******/ 	(() => {
/******/ 		// define getter functions for harmony exports
/******/ 		__webpack_require__.d = (exports, definition) => {
/******/ 			for(var key in definition) {
/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ 				}
/******/ 			}
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
/******/ 	(() => {
/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/make namespace object */
/******/ 	(() => {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = (exports) => {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	})();
/******/ 	
/************************************************************************/
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "bootstrap": () => (/* binding */ bootstrap)
/* harmony export */ });
function bootstrap() {
    alert();
}

application = __webpack_exports__;
/******/ })()
;` 
  ,
    {
      compress: {
        arrows: false,
        conditionals: false,
        evaluate: false,
      },
      ecma: 2015,
      mangle: false,
      module: false,
      sourceMap: undefined,
    }
  ).then((o) => console.log(o.code));

output

var application;
(() => {
  "use strict";
  var __webpack_require__ = {};
  (__webpack_require__.d = (exports, definition) => {
    for (var key in definition)
      __webpack_require__.o(definition, key) &&
        !__webpack_require__.o(exports, key) &&
        Object.defineProperty(exports, key, {
          enumerable: !0,
          get: definition[key],
        });
  }),
    (__webpack_require__.o = (obj, prop) =>
      Object.prototype.hasOwnProperty.call(obj, prop)),
    (__webpack_require__.r = (exports) => {
      "undefined" != typeof Symbol &&
        Symbol.toStringTag &&
        Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" }),
        Object.defineProperty(exports, "__esModule", { value: !0 });
    });
  var __webpack_exports__ = {};
  function bootstrap() {
    alert();
  }
  __webpack_require__.r(__webpack_exports__),
    __webpack_require__.d(__webpack_exports__, { bootstrap: () => bootstrap });
})();

application = __webpack_exports__; is removed, I think we should keep it if compress.toplevel = false.

kdy1 · 2022-09-06T02:30:58Z

Yeah I agree, so this is a bug of minifier?

RiESAEX · 2022-10-01T13:22:00Z

I reread the docs. Since all files are treated as module, I think the var application; and application = __webpack_exports__;should be dropped. terser will drop them if module: true.

**Related issue:** - Closes #4386.

swc-bot · 2023-02-10T12:08:23Z

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

morriq added the C-bug label Apr 20, 2022

kdy1 added this to the Waiting for the author milestone Apr 21, 2022

kdy1 removed this from the Waiting for the author milestone Apr 21, 2022

kdy1 added this to the Planned milestone Sep 6, 2022

kdy1 changed the title ~~1.2.169 causes webpack output.library not working correctly~~ minifier: toplevel = false should prevent operations related to unused Sep 6, 2022

kdy1 added the A: ES minifier label Sep 6, 2022

kdy1 self-assigned this Dec 22, 2022

This was referenced Jan 10, 2023

fix(es/minifier): Make name mangler respect toplevel #6774

Merged

fix(es/minifier): Make AST compressor respect toplevel #6775

Merged

kdy1 closed this as completed in #6775 Jan 11, 2023

kdy1 added a commit that referenced this issue Jan 11, 2023

fix(es/minifier): Make AST compressor respect toplevel (#6775)

06770cf

**Related issue:** - Closes #4386.

kdy1 modified the milestones: Planned, v1.3.26 Jan 11, 2023

swc-project locked as resolved and limited conversation to collaborators Feb 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

minifier: `toplevel = false` should prevent operations related to `unused` #4386

minifier: `toplevel = false` should prevent operations related to `unused` #4386

morriq commented Apr 20, 2022

kdy1 commented Apr 21, 2022

kdy1 commented Apr 21, 2022 •

edited

morriq commented Apr 21, 2022

RiESAEX commented Apr 30, 2022 •

edited

kdy1 commented Apr 30, 2022

morriq commented May 6, 2022

morriq commented Sep 5, 2022

morriq commented Sep 5, 2022

RiESAEX commented Sep 6, 2022

kdy1 commented Sep 6, 2022

RiESAEX commented Oct 1, 2022

swc-bot commented Feb 10, 2023

minifier: toplevel = false should prevent operations related to unused #4386

minifier: toplevel = false should prevent operations related to unused #4386

Comments

morriq commented Apr 20, 2022

Describe the bug

Input code

Config

Playground link

Expected behavior

Actual behavior

Version

Additional context

kdy1 commented Apr 21, 2022

kdy1 commented Apr 21, 2022 • edited

morriq commented Apr 21, 2022

RiESAEX commented Apr 30, 2022 • edited

kdy1 commented Apr 30, 2022

morriq commented May 6, 2022

morriq commented Sep 5, 2022

morriq commented Sep 5, 2022

RiESAEX commented Sep 6, 2022

kdy1 commented Sep 6, 2022

RiESAEX commented Oct 1, 2022

swc-bot commented Feb 10, 2023

minifier: `toplevel = false` should prevent operations related to `unused` #4386

minifier: `toplevel = false` should prevent operations related to `unused` #4386

kdy1 commented Apr 21, 2022 •

edited

RiESAEX commented Apr 30, 2022 •

edited