0

We mentioned jquery library file in template.html in PWA Venia setup as below :

  <script async src="//asset.fwcdn3.com/js/embed-feed.js" type="text/javascript" ></script>

We are using that library file in below path

src/components/Homepage/components - FireWork.js

import React from "react";
import HeadTitle from './HeadTitle';

const FireWork = () => {
return(
<div class="">
<HeadTitle title={'Shop By Look'} textAlign={'center'} />

<fw-embed-feed
channel="glow"
autoplay="true">
</fw-embed-feed>
<br/>


</div>
);
}

export default FireWork;

Issue :

It's working fine. but is it wrong to insert a jquery library file directly in a template.html file? do we need use import ? so i tried as below :

I created new file : initialize-fire.js

const initializeFire = () => {
    let script = document.createElement('script');
    script.src = "//asset.fwcdn3.com/js/embed-feed.js";
    script.async = true;
    script.onload = scriptOnLoad;
    document.body.append(script);
};

and inserted the below line in firework.js :

import { initializeFire } from '../../initialize-fire.js';

but it giving error : module not found

Firework.js : https://pastebin.com/utfXgFLc

6

1 Answer 1

1

I have checked your FierWork.js file please add the external js code like this into the file, here do not import another file for only one js script.

please replace your FierWork.js file code with this code.

import React from "react";
import HeadTitle from './HeadTitle';

// Create the function
export function AddLibrary(urlOfTheLibrary) {
    const script = document.createElement("script");
    script.src = urlOfTheLibrary;
    script.async = true;
    document.body.appendChild(script);
}

const FireWork = () => {

    return(
        <div class="">
            <HeadTitle title={'Shop By Look'} textAlign={'center'} />
            {AddLibrary(
                "https://asset.fwcdn3.com/js/storyblock.js"
            )}
          
            <fw-storyblock
             channel="glow"
             playlist="oBRmRo"
             autoplay="true">
            </fw-storyblock>
            <br/>
         </div>
    );
}

export default FireWork;

Please accept my answer if this is work for you. Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.