#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 |

#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.