@parcel/bundler-experimental: The expression evaluated to a falsy value

[liamqma]

🐛 bug report

When using @parcel/[email protected], I am getting the below error:

🚨 Build failed.

@parcel/bundler-experimental: The expression evaluated to a falsy value:

  (0, _assert().default)(bundle !== 'root' && bundle != null)

I've created a repo to reproduce this error. https://github.com/liamqma/reproduce-parcel-compiled-error

Steps to reproduce:

• clone the repo
• npm install
• ./node_modules/.bin/parcel index.html

Please be aware that the code is extremely simplified for demo purpose. If I use @parcel/bundler-default instead of @parcel/bundler-experimental, the build error goes away.

🤔 Expected Behavior

The bundler should bundle successfully.

😯 Current Behavior

Encounter a build error:

🚨 Build failed.

@parcel/bundler-experimental: The expression evaluated to a falsy value:

  (0, _assert().default)(bundle !== 'root' && bundle != null)

💁 Possible Solution

NA

💻 Code Sample

https://github.com/liamqma/reproduce-parcel-compiled-error

🌍 Your Environment

Software	Version(s)
Parcel	2.7.0
Node	16.15.0
npm	8.5.5
Operating System	MacOS

[liamqma]

I noticed the issue might be from Step Internalize async bundles.

  // Step Internalize async bundles - internalize Async bundles if and only if,
  // the bundle is synchronously available elsewhere.
  // We can query sync assets available via reachableRoots. If the parent has
  // the bundleRoot by reachableRoots AND ancestorAssets, internalize it.
  for (let [id, bundleRoot] of bundleRootGraph.nodes) {
    if (bundleRoot === 'root') continue;
    let parentRoots = bundleRootGraph
      .getNodeIdsConnectedTo(id, ALL_EDGE_TYPES)
      .map(id => nullthrows(bundleRootGraph.getNode(id)));
    let canDelete =
      getBundleFromBundleRoot(bundleRoot).bundleBehavior !== 'isolated';
    if (parentRoots.length === 0) continue;
    for (let parent of parentRoots) {
      if (parent === 'root') {
        canDelete = false;
        continue;
      }
      if (
        reachableRoots.hasEdge(
          reachableRoots.getNodeIdByContentKey(parent.id),
          reachableRoots.getNodeIdByContentKey(bundleRoot.id),
        ) ||
        ancestorAssets.get(parent)?.has(bundleRoot)
      ) {
        let parentBundle = bundleGraph.getNode(
          nullthrows(bundles.get(parent.id)),
        );
        invariant(parentBundle != null && parentBundle !== 'root');
        parentBundle.internalizedAssetIds.push(bundleRoot.id);
      } else {
        canDelete = false;
      }
    }
    if (canDelete) {
      deleteBundle(bundleRoot);
    }
  }

Considering that we have the below bundleGraph, Step Internalize async bundles assumes styled.js is synchronously loaded by index.js so it can be internalized and removed from bundleGraph. However, because styled.js imports foo.css, the error occurs once styled.js and its descendants are removed from bundleGraph.

graph TD;
    index.js-->async.js;
    index.js-->styled.js;
    async.js-->|async import|styled.js;
    styled.js-->foo.css;

Loading

[AGawrys]

Yep, I'm on this. I notice the same problem. I think we made a false assumption that internalized bundles (at this point in time) would not have any children, which is not the case. I've got a small reproduction & I'll link the PR once I fix it :)

[rsshilli]

For the next person, this can also happen if you use React.lazy () before future import statements. React.lazy() has to come after all import statements.