Webpack BannerPlugin with raw option should put use strict on the very first line

[anothertempore]

Bug report

What is the current behavior?

1. When using BannerPlugin with raw option, it appends the code before "use strict", this will cause strict mode to not function properly.
2. When set minimize to true, TerserPlugin will remove "use strict" in between.

Context: Before #13842, webpack add "use strict" inside each function, so we don't have this issue. But after this, webpack seems like shift all "use strict" to the top, that's the root cause of this issue.

If the current behavior is a bug, please provide the steps to reproduce.

Repo to reproduce the bug: https://github.com/anothertempore/webpack-banner-use-strict

Steps:

1. clone the repo
2. run pnpm install
3. run pnpm build, then check dist/async file, "use strict" is not in the very first line, which is incorrect.
4. change this line to true, then check dist/async, "use strict" will be removed.

What is the expected behavior?

"use strict" statement should always in the very first line.

Other relevant information:
webpack version: 5.90.3
Node.js version: 18
Operating System: MacOS
Additional tools:

[alexander-akait]

When the output code is ESM, it will have "use strict" in the very first line, this is expected.

You don't need "use strict" when your output is ESM...

[anothertempore]

@alexander-akait Sorry I just updated to Non-ESM code, seems like get the same behaviour. Could you please check it again, Thanks!

https://github.com/anothertempore/webpack-banner-use-strict/tree/main

[ak47me]

hey I cloned the code and tried out the steps and I see that "use strict" is infact on the 2 nd line , could you please elaborate more as to what is the main bug. Thank you . I am a student wanting to help contribute as part of the google summer of code

[alexander-akait]

I want to say it is not a bug, because BannerPlugin is not for including acustom code, but yes, you can use this for it and in some cases it will work, #13842 is not related to your problem, we don't remove/generate "use strict", it is from your source code, I recommend to use:

new webpack.BannerPlugin({
  banner: "const hello = 'fromBannerPlugin';",
  footer: true,
  raw: true,
  include: /\.js$/,
}),

for code

[anothertempore]

@alexander-akait Thanks for your suggestion. I want to double check if I understand this correctly.

I tried webpack v5.46.0, which is before #13842, the bundled code is:

const hello = 'fromBannerPlugin';
(self["webpackChunkwebpack_banner_use_strict"] = self["webpackChunkwebpack_banner_use_strict"] || []).push([[931],{

/***/ 463:
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "all": () => (/* binding */ every$1),
...

The use strict is inside of function block.

---

However the webpack after v.5.47.0, which is after #13842, the bundled code changed to:

const hello = 'fromBannerPlugin';
"use strict";
(self["webpackChunkwebpack_banner_use_strict"] = self["webpackChunkwebpack_banner_use_strict"] || []).push([[931],{

/***/ 463:
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "all": () => (/* binding */ every$1),

The use strict is at the top of the file.

---

No need to modify any source code can notice the difference, so I am wondering which part is related to the source code?

[alexander-akait]

@anothertempore This change was due another things, but yes, it affected your code, but BannerPlugin was not design for such purposes like code injection (but yes, it is possible, that is why I reccomend to use footre for such purposes), we can't rollback use strict changed, because it will return some problems again

[aman8218]

hey @anothertempore there is an issue while cloning this repository can you help me with this:

[urizennnn]

hey @anothertempore there is an issue while cloning this repository can you help me with this:

that is a network issue consider downloading it as a zip file

[alexander-akait]

Anyway, maybe we can implement options.afterDirectives, but it will cost perfomance because we will need recalculate source maps

[aman8218]

On Wed, 27 Mar 2024 at 10:23 PM, Alexander Akait ***@***.***> wrote: Anyway, maybe we can implement options.afterDirectives, but it will cost perfomance because we will need recalculate source maps — Reply to this email directly, view it on GitHub <#18202 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BBXMGA2SRJ7WTFYYH2WPMRLY2L2PZAVCNFSM6AAAAABEYBSPTWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMRTGMYDCOJSHA> . You are receiving this because you commented.Message ID: ***@***.***>

Thank you for considering my issue.