Legacy Knowledge Base
Published Jun. 30, 2025

Uncaught SyntaxErrors in browser console when rendering custom fields

Written By

Cristina Rodriguez

How To articles are not official guidelines or officially supported documentation. They are community-contributed content and may not always reflect the latest updates to Liferay DXP. We welcome your feedback to improve How To articles!

While we make every effort to ensure this Knowledge Base is accurate, it may not always reflect the most recent updates or official guidelines.We appreciate your understanding and encourage you to reach out with any feedback or concerns.

Legacy Article

You are viewing an article from our legacy "FastTrack" publication program, made available for informational purposes. Articles in this program were published without a requirement for independent editing or verification and are provided"as is" without guarantee.

Before using any information from this article, independently verify its suitability for your situation and project.

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

 

 

Did this article resolve your issue ?

Legacy Knowledge Base