<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<ul dir="auto">
<li>config</li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
    plugins : [
        new webpack.DefinePlugin({foo : 'aFoo', bar : 'aBar', crash : 'other.prop'})
    ]
}"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">plugins</span> : <span class="pl-kos">[</span>
        <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">DefinePlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">foo</span> : <span class="pl-s">'aFoo'</span><span class="pl-kos">,</span> <span class="pl-c1">bar</span> : <span class="pl-s">'aBar'</span><span class="pl-kos">,</span> <span class="pl-c1">crash</span> : <span class="pl-s">'other.prop'</span><span class="pl-kos">}</span><span class="pl-kos">)</span>
    <span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<ul dir="auto">
<li>source code</li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="console.log({foo : foo, bar : bar}); // correct
console.log({foo, bar}); // incorrect
console.log({crash}); // SyntaxError: Unexpected token '.'"><pre class="notranslate"><span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">foo</span> : <span class="pl-s1">foo</span><span class="pl-kos">,</span> <span class="pl-c1">bar</span> : <span class="pl-s1">bar</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// correct</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">{</span>foo<span class="pl-kos">,</span> bar<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// incorrect</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">{</span>crash<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// SyntaxError: Unexpected token '.'</span></pre></div>
<ul dir="auto">
<li>translated code</li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="console.log({foo : aFoo, bar : aBar}); // correct
console.log({aFoo, aBar}); // incorrect
console.log({other.prop}); // SyntaxError: Unexpected token '.'"><pre class="notranslate"><span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">foo</span> : <span class="pl-s1">aFoo</span><span class="pl-kos">,</span> <span class="pl-c1">bar</span> : <span class="pl-s1">aBar</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// correct</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">{</span>aFoo<span class="pl-kos">,</span> aBar<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// incorrect</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-s1">other</span><span class="pl-kos">.</span>prop<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// SyntaxError: Unexpected token '.'</span></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>


<p dir="auto">the shorthand property should expand before translate with DefinePlugin,<br>
and only property value can be translated</p>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.75.0<br>
Node.js version: 19.6.1<br>
Operating System: macOs 13.2.1 (22D68)<br>
Additional tools:</p>
<h2 dir="auto">Feature request</h2>
<p dir="auto">support destructuring in:</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> EnvironmentPlugin, DefinePlugin, ImportMetaPlugin (partial support?), other plugins?</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1642370813" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/16872" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/16872/hovercard" href="https://github.com/webpack/webpack/issues/16872">#16872</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1659123801" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/16941" data-hovercard-type="pull_request" data-hovercard-url="/webpack/webpack/pull/16941/hovercard" href="https://github.com/webpack/webpack/pull/16941">#16941</a> treeshaking when using namespace object, e.g. <code class="notranslate">import * as b from 'b';const {a} = b;</code></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> json treeshaking, e.g. <code class="notranslate">import b from '1.json'; const {a} = b;</code></li>
</ul>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Webpack should support destructuring on parser level</p>
<p dir="auto"><strong>What is motivation or use case for adding/changing the behavior?</strong></p>
<p dir="auto">Modern versions of runtime environments (browsers, Node.js, Deno) support destructuring</p>
<p dir="auto"><strong>How should this be implemented in your opinion?</strong></p>
<p dir="auto"><code class="notranslate">JavascriptParser</code> should be improved</p>
<p dir="auto"><strong>Are you willing to work on this yourself?</strong><br>
yes</p>