Repository: webpack/webpack (JavaScript)

Issue:
DefinePlugin process with object shorthand property incorrectly
<!-- Please don't delete this template because we'll close your issue -->
<!-- Before creating an issue please make sure you are using the latest version of webpack. -->

# Bug report

<!-- Please ask questions on StackOverflow or the webpack Gitter. -->
<!-- https://stackoverflow.com/questions/ask?tags=webpack -->
<!-- https://gitter.im/webpack/webpack -->
<!-- Issues which contain questions or support requests will be closed. -->

**What is the current behavior?**

- config
```js
module.exports = {
    plugins : [
        new webpack.DefinePlugin({foo : 'aFoo', bar : 'aBar', crash : 'other.prop'})
    ]
}
```
- source code
```js
console.log({foo : foo, bar : bar}); // correct
console.log({foo, bar}); // incorrect
console.log({crash}); // SyntaxError: Unexpected token '.'
```
- translated code
```js
console.log({foo : aFoo, bar : aBar}); // correct
console.log({aFoo, aBar}); // incorrect
console.log({other.prop}); // SyntaxError: Unexpected token '.'
```

**If the current behavior is a bug, please provide the steps to reproduce.**

<!-- A great way to do this is to provide your configuration via a GitHub repository -->
<!-- The most helpful is a minimal reproduction with instructions on how to reproduce -->
<!-- Repositories with too many files or large `webpack.config.js` files are not suitable -->
<!-- Please only add small code snippets directly into this issue -->
<!-- https://gist.github.com is a good place for longer code snippets -->
<!-- If your issue is caused by a plugin or loader, please create an issue on the loader/plugin repository instead -->

**What is the expected behavior?**

<!-- "It should work" is not a helpful explanation -->
<!-- Explain exactly how it should behave -->
the shorthand property should expand before translate with DefinePlugin,
and only property value can be translated

**Other relevant information:**
webpack version:  5.75.0
Node.js version: 19.6.1
Operating System: macOs 13.2.1 (22D68)
Additional tools:



Hints:
Yeah, thank you for an issue, duplicate of https://github.com/webpack/webpack/issues/14800, we have a PR, so let's close in favor https://github.com/webpack/webpack/issues/14800 and I will put a link on this PR to not lose your cases and add them to test cases
@alexander-akait I guess this is another issue, it affects only DefinePlugin

Patch:
diff --git a/lib/DefinePlugin.js b/lib/DefinePlugin.js
--- a/lib/DefinePlugin.js
+++ b/lib/DefinePlugin.js
@@ -463,7 +463,7 @@ class DefinePlugin {
 								});
 							parser.hooks.expression.for(key).tap(PLUGIN_NAME, expr => {
 								addValueDependency(originalKey);
-								const strCode = toCode(
+								let strCode = toCode(
 									code,
 									parser,
 									compilation.valueCacheVersions,
@@ -473,6 +473,11 @@ class DefinePlugin {
 									!parser.isAsiPosition(expr.range[0]),
 									parser.destructuringAssignmentPropertiesFor(expr)
 								);
+
+								if (parser.scope.inShorthand) {
+									strCode = parser.scope.inShorthand + ":" + strCode;
+								}
+
 								if (WEBPACK_REQUIRE_FUNCTION_REGEXP.test(strCode)) {
 									return toConstantDependency(parser, strCode, [
 										RuntimeGlobals.require
@@ -564,7 +569,7 @@ class DefinePlugin {
 							);
 						parser.hooks.expression.for(key).tap(PLUGIN_NAME, expr => {
 							addValueDependency(key);
-							const strCode = stringifyObj(
+							let strCode = stringifyObj(
 								obj,
 								parser,
 								compilation.valueCacheVersions,
@@ -575,6 +580,10 @@ class DefinePlugin {
 								parser.destructuringAssignmentPropertiesFor(expr)
 							);
 
+							if (parser.scope.inShorthand) {
+								strCode = parser.scope.inShorthand + ":" + strCode;
+							}
+
 							if (WEBPACK_REQUIRE_FUNCTION_REGEXP.test(strCode)) {
 								return toConstantDependency(parser, strCode, [
 									RuntimeGlobals.require


Test patch:
diff --git a/test/configCases/plugins/define-plugin/index.js b/test/configCases/plugins/define-plugin/index.js
--- a/test/configCases/plugins/define-plugin/index.js
+++ b/test/configCases/plugins/define-plugin/index.js
@@ -255,3 +255,43 @@ it("destructuring assignment", () => {
 	expect(used).toBe(used2);
 	expect(used).toBe(used3);
 });
+
+it('should allow shorthand property (issue #16764)', () => {
+	const simple = { ONE, TRUE, NULL, STRING, BIGINT, NEGATIVE_NUMBER };
+	expect(simple).toStrictEqual({ 
+		ONE: 1, 
+		TRUE: true,
+		NULL: null, 
+		STRING: "string", 
+		BIGINT: BigInt("9007199254740993"), 
+		NEGATIVE_NUMBER: -100.25 
+	})
+
+	const func = { FUNCTION };
+	expect(func.FUNCTION(3)).toBe(4);
+	expect(typeof func.FUNCTION).toBe("function");
+	
+	const code = { CODE };
+	expect(code.CODE).toBe(3);
+	expect(typeof code.CODE).toBe("number");
+	
+	
+	const regex = { REGEXP };
+	expect(regex.REGEXP.toString()).toBe("/abc/i");
+	expect(typeof regex.REGEXP).toBe("object");
+	
+	const nested = { OBJECT }
+	expect(nested.OBJECT.SUB.FUNCTION(7)).toBe(8);
+	expect(nested.OBJECT.SUB.CODE).toBe(3);
+	expect(nested.OBJECT.SUB.UNDEFINED).toBeUndefined();
+	expect(nested.OBJECT.SUB.REGEXP.toString()).toBe("/abc/i");
+	expect(nested.OBJECT.SUB.STRING).toBe("string");
+
+
+	const array = { ARRAY }
+	expect(array).toStrictEqual({ ARRAY: [2, ['six']] })
+})
+
+it("fails for unknown property", () => {
+	expect(() => ({ UNKNOWN })).toThrowError("UNKNOWN is not defined")
+})
\ No newline at end of file