[Bug]: import statement outside of module (get-info-on-pdf)

[zaxbux]

Installation Method

Docker

The Problem

8b16ed84d0a631ba1ff3a6dc689c4d7925ed2d0c introduced an import statement in the HTML for get-info-on-pdf

Version of Stirling-PDF

0.31.0

Last Working Version of Stirling-PDF

0.30.0

Page Where the Problem Occurred

http://localhost/get-info-on-pdf

Docker Configuration

No response

Relevant Log Output

Uncaught SyntaxError: Cannot use import statement outside a module (at get-info-on-pdf:940:17)

Additional Information

No response

Browsers Affected

No response

No Duplicate of the Issue

• [X] I have verified that there are no existing issues raised related to my problem.

[dosubot[bot]]

Hey @zaxbux! I'm here to help you with any bugs, questions, or contributions you might have regarding Stirling-PDF. Let's squash this bug together!

The error "Cannot use import statement outside a module" typically occurs when an import statement is used in a script that is not recognized as a JavaScript module. In the context of the 'get-info-on-pdf' page, the import statement is:

import { fetchWithCsrf } from 'js/fetch-utils.js';

To resolve this issue, ensure that the <script> tag containing the import statement is marked as a module by adding the type="module" attribute:

<script type="module">
  import { fetchWithCsrf } from 'js/fetch-utils.js';
  // other code
</script>

This change tells the browser to treat the script as a module, allowing the use of import statements.

To continue talking to Dosu, mention @dosu.

[Frooodle]

I cant reproduce this issue

[Frooodle]

Do you see the same on https://stirlingpdf.io/show-javascript

[zaxbux]

https://stirlingpdf.io/show-javascript does not have this issue since js/fetch-utils.js isn't imported as a module, it is loaded using a regular script tag:

              <script src="/js/fetch-utils.js"></script>
              <script>
                document.querySelector('#pdfInfoForm').addEventListener('submit', function(event){
                  event.preventDefault();

                  // Fetch the formData
                  const formData = new FormData(event.target);

                  fetchWithCsrf('api/v1/misc/show-javascript', {
                    method: 'POST',
                    body: formData
                  }).then(response => response.text())
                  .then(data => {
                    // ...
                  })
                  .catch(error => {
                    console.error('Error:', error);
                  });
                });
              </script>

https://stirlingpdf.io/get-info-on-pdf is affected because js/fetch-utils.js is imported inside a script tag that is missing type="module":

              <script>
              
                import { fetchWithCsrf } from 'js/fetch-utils.js';


                document.getElementById("pdfInfoForm").addEventListener("submit", function(event) {
                  event.preventDefault();

                  const formData = new FormData(event.target);

                  fetchWithCsrf('api/v1/security/get-info-on-pdf', {
                    method: 'POST',
                    body: formData
                  }).then(response => response.json()).then(data => {
                    displayJsonData(data);
                    setDownloadLink(data);
                    document.getElementById("downloadJson").style.display = "block";
                  }).catch(error => console.error('Error:', error));
                });

                // ...
              </script>

[zaxbux]

Importing js/fetch-utils.js as a module wouldn't work since it doesn't export the fetchWithCsrf() method.

[Frooodle]

Sorry yes was looking at wrong thing, working on many tickets at once 😞