React-snap fails during predeploy with "SyntaxError: Unexpected token '.'"

[anh0001]

Description

When running npm run predeploy, the build process completes successfully but react-snap encounters an error during page rendering:

🔥  pageerror at /: SyntaxError: Unexpected token '.'
✅  crawled 1 out of 1 (/)

This appears to be related to modern JavaScript features (likely optional chaining ?. or nullish coalescing ??) that aren't supported in the environment react-snap is using.

Steps to Reproduce

1. Run npm run predeploy
2. Observe successful build completion
3. See react-snap error with "Unexpected token '.'"

Current Behavior

The predeploy process fails due to react-snap not supporting modern JavaScript syntax.

Expected Behavior

React-snap should successfully prerender the HTML pages for static deployment.

Workaround

As a temporary solution, you can bypass react-snap by running:

npm run build

This creates the /build folder with all static assets ready for deployment, though without pre-rendered HTML pages.

Environment

• Package: [email protected]
• Build system: react-scripts
• Static generation: react-snap
• OS: macOS Sequoia 15.3.1
• Node.js: v22.12.0

[dosubot[bot]]

To resolve the "SyntaxError: Unexpected token '.'" error in react-snap during the predeploy process, you need to ensure that your code is transpiled to a version of JavaScript that react-snap can understand. This can be done by configuring Babel to transpile modern JavaScript features like optional chaining and nullish coalescing.

Here's how you can adjust your Babel configuration:

1. Ensure that you have @babel/preset-env in your devDependencies.

2. Create or update your Babel configuration file (e.g., .babelrc or babel.config.json) to include the necessary presets:

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "targets": {
             "browsers": ">0.2%, not dead, not op_mini all"
           }
         }
       ],
       "@babel/preset-react"
     ]
   }
   

3. Make sure your browserslist configuration in package.json is set correctly, which it already is, to target environments that support the features you are using ^[1].

By ensuring that Babel is configured to transpile these modern JavaScript features, react-snap should be able to process your code without encountering syntax errors.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[mldangelo]

Closing: react-snap has been removed from the project; prerendering via react-snap is no longer part of the build pipeline. Pull the latest version and use next!