Use placeholder expression when replacing unused symbols (#8358)

packages/core/integration-tests/test/integration/scope-hoisting/es6/side-effects-re-exports-rename-var-unused/index.js

@@ -0,0 +1 @@
+output = import("./library").then(({ a }) => a);

packages/core/integration-tests/test/integration/scope-hoisting/es6/side-effects-re-exports-rename-var-unused/library/a.js

@@ -0,0 +1 @@
+export var foo = "foo";

packages/core/integration-tests/test/integration/scope-hoisting/es6/side-effects-re-exports-rename-var-unused/library/b.js

@@ -0,0 +1,3 @@
+class b {}
+
+export { b as default };

packages/core/integration-tests/test/integration/scope-hoisting/es6/side-effects-re-exports-rename-var-unused/library/index.js

@@ -0,0 +1,4 @@
+import * as a from "./a";
+import b from "./b";
+export { a, b };
+export var b2 = b;

packages/core/integration-tests/test/integration/scope-hoisting/es6/side-effects-re-exports-rename-var-unused/library/package.json

@@ -0,0 +1,3 @@
+{
+  "sideEffects": false
+}

packages/core/integration-tests/test/javascript.js

@@ -7025,6 +7025,19 @@ describe('javascript', function () {
         assert.deepEqual(res.output, 'bar');
       });
 
+      it('supports reexports via variable declaration (unused)', async function () {
+        let b = await bundle(
+          path.join(
+            __dirname,
+            '/integration/scope-hoisting/es6/side-effects-re-exports-rename-var-unused/index.js',
+          ),
+          options,
+        );
+
+        let res = await run(b, {}, {require: false});
+        assert.deepEqual((await res.output).foo, 'foo');
+      });
+
       it('supports named and renamed reexports of the same asset (named used)', async function () {
         let b = await bundle(
           path.join(

packages/packagers/js/src/ScopeHoistingPackager.js

@@ -763,10 +763,16 @@ ${code}
       exportSymbol,
       symbol,
     } = this.bundleGraph.getSymbolResolution(resolved, imported, this.bundle);
-    if (resolvedAsset.type !== 'js') {
-      // Graceful fallback for non-js imports
+
+    if (
+      resolvedAsset.type !== 'js' ||
+      (dep && this.bundleGraph.isDependencySkipped(dep))
+    ) {
+      // Graceful fallback for non-js imports or when trying to resolve a symbol
+      // that is actually unused but we still need a placeholder value.
       return '{}';
     }
+
     let isWrapped =
       !this.bundle.hasAsset(resolvedAsset) ||
       (this.wrappedAssets.has(resolvedAsset.id) &&