Guide
Config
Plugin
API
Tutorials
Community
Guide
Config
Plugin
API
Tutorials
Community

security.checkSyntax

  • Type:
type CheckSyntax =
  | boolean
  | {
      targets?: string[];
      exclude?: RegExp | RegExp[];
      ecmaVersion?: EcmaVersion;
    };
  • Default: false

Used to analyze whether there is incompatible advanced syntax in the build artifacts under the current browser scope. If any incompatible syntax is found, detailed information will be printed to the terminal.

Enable Detection

You can set checkSyntax to true to enable syntax checking.

export default {
  security: {
    checkSyntax: true,
  },
};

When you enable checkSyntax, Modern.js will perform the detection during production builds. If any incompatible advanced syntax is detected in the build artifacts, error logs will be printed to the terminal, and the current build process will be terminated.

Error Logs

The format of the error logs is as follows, including the source file, artifact location, error reason, and source code:

error   [Syntax Checker] Find some syntax errors after production build:

  Error 1
  source:  /node_modules/foo/index.js:1:0
  output:  /dist/static/js/main.3f7a4d7e.js:2:39400
  reason:  Unexpected token (1:178)
  code:
     9 |
    10 | var b = 2;
    11 |
  > 12 | console.log(() => {
    13 |   return a + b;
    14 | });
    15 |
TIP

Currently, syntax checking is implemented based on AST parser. Each time it performs a check, it can only identify the first incompatible syntax found in the file. If there are multiple incompatible syntaxes in the file, you need to fix the detected syntax and re-run the check.output.disableMinimize to true and rebuild again.

If the corresponding source location is not shown in the log, try setting

Solutions

If a syntax error is detected, you can handle it in the following ways:

  • If you want to downgrade this syntax to ensure good code compatibility, you can compile the corresponding module through the source.include config.
  • If you don't want to downgrade the syntax, you can adjust the project's browserslist to match the syntax.
  • If you do not want to check the syntax of certain products, you can use the checkSyntax.exclude configuration to exclude the files to be checked.

Options

security.checkSyntax is implemented based on @rsbuild/plugin-check-syntax. For specific options, please refer to @rsbuild/plugin-check-syntax.