Fixing SyntaxError: Unexpected Token . in React Builds with Node.js Upgrade

In the ever-evolving landscape of web development, maintaining consistency across environments is crucial to ensure seamless builds and deployments. Recently, I encountered a challenging error during a React application build that required upgrading Node.js to resolve. This article delves into the problem, the steps taken to troubleshoot it, and the solution that ultimately led to a successful build.

Understanding the Problem

During the postbuild process of a React application using react-snap for static site generation, I encountered a persistent error:

🔥  pageerror at /404.html: SyntaxError: Unexpected token '.'


🔥  pageerror at /careers: SyntaxError: Unexpected token '.'


🔥  pageerror at /: SyntaxError: Unexpected token '.'


🔥  pageerror at /services: SyntaxError: Unexpected token '.'

These errors were occurring across multiple pages, effectively halting the deployment process. The error message SyntaxError: Unexpected token '.' indicated a potential issue with JavaScript syntax, but the cause wasn't immediately clear.

Initial Troubleshooting

To diagnose the problem, I first ensured that all JavaScript files in the project were free of syntax errors. This involved:

• Checking for Typos: Reviewing the code for any obvious syntax mistakes.
• Linting the Codebase: Using ESLint to identify potential issues.
• Testing Locally: Running the build process on my local machine to see if the error could be reproduced outside the CI environment.

Interestingly, the code executed without errors locally, and the build process completed successfully. This pointed to an environment-specific issue, possibly linked to the Node.js version used in the GitHub Actions workflow.

Investigating Node.js Versioning

Initially, the project was set up with Node.js version 14 in the CI workflow, while my local development environment utilized Node.js version 18.15.0. This discrepancy suggested a possible compatibility issue:

1. Node.js Features: Newer versions of Node.js support more advanced JavaScript features, which might not be recognized by older versions.
2. Package Compatibility: Some npm packages may have dependencies requiring more recent versions of Node.js.

Resolving Dependency Conflicts

In addition to the version mismatch, several dependency conflicts needed addressing. These included issues with ajv versions and React version mismatches with react-google-login. Here's how they were resolved:

• Upgraded ajv: Updated ajv to version 8 to satisfy peer dependencies.
• Replaced react-google-login: Switched to an alternative package, @react-oauth/google, compatible with React 18.

The Solution: Upgrading Node.js

After attempting various approaches, including clearing caches, adjusting dependencies, and experimenting with npm flags, the solution was to upgrade the Node.js version in the GitHub Actions workflow to match my local development environment:

- name: Set up Node.js
  uses: actions/setup-node@v2
  with:
    node-version: '18.15.0'

This change aligned the CI environment with my local setup, enabling modern JavaScript features to be parsed correctly and resolving the SyntaxError: Unexpected token '.'.

Conclusion

This experience underscored the importance of maintaining consistent environments across development, testing, and production. Upgrading Node.js not only resolved the immediate issue but also prepared the project for future compatibility challenges.

Spending a day troubleshooting this issue was a valuable reminder that even minor version mismatches can have significant impacts. By documenting and sharing this process, I hope to provide insights that can help others facing similar challenges in their development workflows.