8
Views
1
Comments
Using import to load the configuration files/package to reactive web app
Application Type
Reactive
Service Studio Version
11.8.9 (Build 30790)
Platform Version
11.9.0.21103

Hi,

I am trying to configure https://docs.amplify.aws/lib/analytics/getting-started/q/platform/js#configure-your-app in my reactive web app on Platform version 11. I have added a script under scripts folder and here is the code in the script:

import Amplify from 'aws-amplify';

import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

On my home screen I have added this script as the required script. When I try to run the app, I see below error on the console:

uncaught syntaxerror cannot use import statement outside a module react

Has anyone faced similar issue? Am I doing it the wrong way? 

Thanks in advance for any help or suggestions here.


Hi Akshay.

It seems like this error is coming from the type of tag <script> added to your code, when importing something the tag should have the type="module".

I don't know if there is a better way, but in the onInitialize of your page, you could add a JS script that create your own script tag, with the correct type, something like this.

var head1 = document.getElementsByTagName('head')[0];
var script_src1= "URL for your import script";
var new_script1 = document.createElement('script');
new_script1.type = 'module';
new_script1.src= script_src1;
head1.appendChild(new_script1);

The credit for this script goes to Fábio Fantato in this comment

Hope this helps.

Best regards.