React Library doesn't build in watch mode

[qdozaq]

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

{
  "name": "parcel-react-lib-repro",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "scripts": {
    "watch": "parcel watch",
    "build": "parcel build"
  },
  "dependencies": {
    "@parcel/transformer-react-refresh-wrap": "2.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@parcel/packager-ts": "^2.0.1",
    "parcel": "2.0.1"
  }
}

🤔 Expected Behavior

The react library should build in watch mode

😯 Current Behavior

Throws

🚨 Build failed.

@parcel/packager-js: Asset was skipped or not found.

  AssertionError [ERR_ASSERTION]: Asset was skipped or not found.
  at ScopeHoistingPackager.getSymbolResolution (/Users/paul.mendoza/git/parcel-react-lib/node_modules/@parcel/packager-js/lib/ScopeHoistingPackager.js:716:29)
  at /Users/paul.mendoza/git/parcel-react-lib/node_modules/@parcel/packager-js/lib/ScopeHoistingPackager.js:820:31
  at Array.map (<anonymous>)
  at ScopeHoistingPackager.buildAssetPrelude (/Users/paul.mendoza/git/parcel-react-lib/node_modules/@parcel/packager-js/lib/ScopeHoistingPackager.js:819:37)
  at ScopeHoistingPackager.buildAsset (/Users/paul.mendoza/git/parcel-react-lib/node_modules/@parcel/packager-js/lib/ScopeHoistingPackager.js:382:48)
  at ScopeHoistingPackager.visitAsset (/Users/paul.mendoza/git/parcel-react-lib/node_modules/@parcel/packager-js/lib/ScopeHoistingPackager.js:341:17)
  at /Users/paul.mendoza/git/parcel-react-lib/node_modules/@parcel/packager-js/lib/ScopeHoistingPackager.js:440:56
  at String.replace (<anonymous>)
  at ScopeHoistingPackager.buildAsset (/Users/paul.mendoza/git/parcel-react-lib/node_modules/@parcel/packager-js/lib/ScopeHoistingPackager.js:404:19)
  at ScopeHoistingPackager.visitAsset (/Users/paul.mendoza/git/parcel-react-lib/node_modules/@parcel/packager-js/lib/ScopeHoistingPackager.js:341:17)

💁 Possible Solution

🔦 Context

Trying to create a react library with parcel.
yarn build works fine and as expected, but yarn watch throws the above error.

I can create a non react library (just js / ts) and it builds in watch mode just fine

💻 Code Sample

minimal reproduction repo: https://github.com/qdozaq/parcel-react-lib-repro

🌍 Your Environment

Software	Version(s)
Parcel	2.0.1
Node	v12.22.0
npm/Yarn	yarn
Operating System	mac/osx

[kciter]

I found way to run. Change index.js the below code:

import { Component } from "./Component";
export { Component };

I don't know why it works.

[qdozaq]

@kciter hmm thanks! Confirming that works on my end.

This also works:

export { Component } from "./Component"

So for some reason parcel has trouble watching wild card exports for React components.

[qdozaq]

So I've identified that the following change fixes the problem: qdozaq@7090413

I'd be happy to make a PR for this given someone can provide me some more context around this code.
The issue I'm seeing is that dependencies that get found = true during the getSymbolResolution call return null if all checks for the symbol fall through to the last step in the control flow.

https://github.com/parcel-bundler/parcel/blob/v2/packages/core/core/src/BundleGraph.js#L1435-L1443:

      return {
        asset,
        exportSymbol: symbol,
        symbol: skipped
          ? false
          : found
          ? null
          : identifier ?? (asset.symbols?.has('*') ? null : undefined),
        loc: asset.symbols?.get(symbol)?.loc,
      };

The symbol here gets returned and checked by ScopeHoistingPackager here which will always throw this error if found is set to true

What is the intended purpose of found here? and why do we return null for symbol?

My change fixes my specific case, but wondering if it's this return logic that should be changed instead.

edit*:
I'll also add that the reason this happens for react components and not other js files is that for some reason the resolved Assets for react files don't return anything for Asset.dependencies[<dependency-key>].symbols. called here

[ommeirelles]

Any update on this or how could we fix that issue?

[srosset81]

I still reproduce this with v2.3.2 of Parcel.

As mentionned by @qdozaq, it only occurs for React components, and more particularly components using JSX.

[stu039]

+1 on this - is there any update on whether a fix for this is being looked at?

[schmuecker]

I also experience this with parcel@2.3.2. Hopefully there will be a fix available soon, as I'm trying to migrate a component library from Webpack to Parcel.