Uncaught SyntaxErrors in browser console when rendering custom fields

Issue

• Custom fields are not rendering correctly when added to a form. 
• Exceptions such as the following ones can be seen in the browser's console:
  

  • Uncaught SyntaxError: import declarations may only appear at top level of a module

  • Uncaught SyntaxError: Cannot use import statement outside a module

Environment

• Quarterly Release 2024.Q2, 2024.Q3

Resolution

• Make sure your custom fields code follows the guidelines explained and updated in the official documentation.
• As you can see the imports should be in the following format:
  

  import {ReactFieldBase as FieldBase} from 'dynamic-data-mapping-form-field-type';
  import React, {useState} from 'react';

• The old format used useSyncValue instead of useState. This is a typical mistake that could cause the error describe above.

Additional Information

• Writing a custom form field type
• Modify OOTB react component