Module parse failed: Unexpected token error when using workspaces and JSX inside a module

[jansu76]

Build fails with "Module parse failed: Unexpected token" when project uses workspaces and has a module that contains JSX code.

Expected Behavior

Build should be successful

Current Behavior

When building e.g. the minimal working example, node-run-script fails with "Module parse failed: Unexpected token" as it does not like the HTML elements inside a module that is linked with workspaces.

Full output:

~/p/h/g/r/reactapp (unexpected-token-error-simple ☡=) ./build-buildpacks.sh
Building OCI container image using buildpacks. Building in /home/janne/projects/häti/git/react-problem/reactapp
base: Pulling from paketobuildpacks/builder
Digest: sha256:f59dca3a71563278db098a2d249e22866deb4e52ad756f223b74455e1bc2a3f6
Status: Image is up to date for paketobuildpacks/builder:base
base-cnb: Pulling from paketobuildpacks/run
Digest: sha256:f8dfc4b892edd3185d02e21d1145ebab0e713065837f7d42cbc9577c7489812e
Status: Image is up to date for paketobuildpacks/run:base-cnb
===> ANALYZING
Image with name "myapp/frontend-nginx" not found
===> DETECTING
6 of 10 buildpacks participating
paketo-buildpacks/ca-certificates 3.6.1
paketo-buildpacks/node-engine     1.5.0
paketo-buildpacks/npm-install     1.1.0
paketo-buildpacks/node-run-script 1.0.5
paketo-buildpacks/nginx           0.13.3
paketo-buildpacks/source-removal  0.2.0
===> RESTORING
Skipping buildpack layer analysis
===> BUILDING

Paketo Buildpack for CA Certificates 3.6.1
  https://github.com/paketo-buildpacks/ca-certificates
  Launch Helper: Contributing to layer
    Creating /layers/paketo-buildpacks_ca-certificates/helper/exec.d/ca-certificates-helper
Paketo Buildpack for Node Engine 1.5.0
  Resolving Node Engine version
    Candidate version sources (in priority order):
                -> ""
      <unknown> -> ""

    Selected Node Engine version (using ): 18.16.0

  Executing build process
    Installing Node Engine 18.16.0
      Completed in 24.578s

    Skipping SBOM generation for Node Engine

  Configuring build environment
    NODE_ENV     -> "production"
    NODE_HOME    -> "/layers/paketo-buildpacks_node-engine/node"
    NODE_OPTIONS -> "--use-openssl-ca"
    NODE_VERBOSE -> "false"

  Configuring launch environment
    NODE_ENV     -> "production"
    NODE_HOME    -> "/layers/paketo-buildpacks_node-engine/node"
    NODE_OPTIONS -> "--use-openssl-ca"
    NODE_VERBOSE -> "false"

    Writing exec.d/0-optimize-memory
      Calculates available memory based on container limits at launch time.
      Made available in the MEMORY_AVAILABLE environment variable.

Paketo Buildpack for NPM Install 1.1.0
  Resolving installation process
    Process inputs:
      node_modules      -> "Found"
      npm-cache         -> "Not found"
      package-lock.json -> "Found"

    Selected NPM build process: 'npm rebuild'

  Executing build environment install process
      [email protected] /workspace
      +-- @my-dummy-namespace/dummy-component@ -> ./src/packages/dummy-component
      +-- @testing-library/[email protected]
      +-- @testing-library/[email protected]
      +-- @testing-library/[email protected]
      +-- [email protected]
      +-- [email protected]
      +-- [email protected]
      `-- [email protected]
      
    Running 'npm run-script preinstall --if-present'
    Running 'npm rebuild --nodedir=/layers/paketo-buildpacks_node-engine/node'
      rebuilt dependencies successfully
    Running 'npm run-script postinstall --if-present'
      Completed in 5.685s

  Configuring build environment
    NODE_ENV -> "development"
    PATH     -> "$PATH:/layers/paketo-buildpacks_npm-install/build-modules/node_modules/.bin"

    Skipping SBOM generation for Node Install


Paketo Buildpack for Node Run Script 1.0.5
  Executing build process
    Running 'npm run build'
      
      > [email protected] build
      > react-scripts build
      
      Creating an optimized production build...
      Failed to compile.
      
      Module parse failed: Unexpected token (5:8)
      File was processed with these loaders:
       * ../layers/paketo-buildpacks_npm-install/build-modules/node_modules/source-map-loader/dist/cjs.js
      You may need an additional loader to handle the result of these loaders.
      | const DummyComponent = () => {
      |     return (
      >         <div>
      |             <button type="button">foobutton</button>
      |         </div>
      
      
      npm notice 
      npm notice New minor version of npm available! 9.5.1 -> 9.6.5
      npm notice Changelog: <https://github.com/npm/cli/releases/tag/v9.6.5>
      npm notice Run `npm install -g [email protected]` to update!
      npm notice 
exit status 1
ERROR: failed to build: exit status 1
ERROR: failed to build: executing lifecycle: failed with status code: 51

Possible Solution

Another problem https://github.com/paketo-buildpacks/node-run-script/issues/224 was fixed in npm-install 1.1.0. This may be related, or not.

Steps to Reproduce

Minimal working example is at https://github.com/jansu76/react-problem/tree/unexpected-token-error-simple
To reproduce the error:

1. checkout branch unexpected-token-error-simple
2. cd reactapp
3. /build-buildpacks.sh

Note that main branch contains version that results in successful build. The difference in unexpected-token-error-simple branch is mostly added use of HTML elements in JSX file.

Besides that, package-lock.json has been changed, there's a change to browserslist definition (suggested fix elsewhere) and build-buildpacks.sh has been simplified.

jansu76/react-problem@5b6dea7#diff-88ce4634df6eeb658a6dbcafeab2fa473aab214004c2a021520a3336437e8ea7

Motivations

We cannot build our project that uses similar constructs as the minimal working example.