cross-inpage-provider

Handling Syntax Compatibility Issues with Third-Party Libraries

When introducing or upgrading third-party libraries, you may encounter syntax compatibility check failures. This is because our project uses syntax-compatibility.eslint.config.cjs to restrict newer JavaScript language features in order to ensure better browser compatibility.

Symptoms

1. ESLint reports errors such as:
   • Logical OR assignment (||=) is not allowed
   • String.prototype.replaceAll is not allowed
   • Other syntax restrictions defined in syntax-compatibility.eslint.config.cjs

Resolution Steps

1. Identify the source of the error

   • Check the ESLint error message to locate which third-party library is using incompatible syntax
   • These errors usually appear in files under node_modules

2. Add the library to the webpack configuration

   • Open webpack.config.cjs
   • Add the package name to the includeModules array:

   const includeModules = [
     // Existing libraries
     '@solana/web3.js',
     // Add your new library here
     'your-new-package'
   ];

3. Verify the fix • Re-run the build or development command • Confirm that the ESLint errors are resolved

Notes

1. Adding a library to includeModules means that its code will be processed and transformed by webpack, which may: • Increase the final bundle size • Impact build performance • So make sure the library really needs to be added
2. Alternative approaches: • Consider using an older version of the library (if available) • Look for an alternative library that uses older syntax • If feasible, consider implementing the required functionality yourself
3. Regular review: • Periodically review the includeModules list • Evaluate whether all listed libraries still need to be included • Consider removing libraries that are no longer necessary

Related Files • syntax-compatibility.eslint.config.cjs: Defines the syntax restriction rules • webpack.config.cjs: Configures which third-party modules need to be processed