2

I know I'm not the first person to ask about this, but I have yet to find a solution to fix it.

Problem: I'm receiving a 404 error (file not found) when trying to load a lightning web component via javascript on my personal website.

enter image description here

Background Info:

1) I'm using a publicly available community that has been activated (from my developer edition org)

2) All of the lightning web components that I want to show are contained in a lightning app that includes 'access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess' in the header.

3) The URL of my website has been added as a resource to the list of CORS options in my org. I also included the 'https://*.mywebsite.com' URL so that all subdomains are valid.

Currently in the script that calls the Lightning Out from my public community endpoint, the URL is set to: https:/[my-domain].na174.force.com/[community-endpoint]/ ...

Notice the '/' at the end of the URL. When I leave out that slash, I get a 404 error stating that the file is not found. But when I leave it in, I receive the CORS error. I believe this is happening because the URL being created is formatted incorrectly, which means that the App that implements lightning out isn't found.

The URL ends up looking like this: 'https://[my-domain].na174.force.com/[community-endpoint]//c/[app-name].app?aura.format=JSON&aura.formatAdapter=LIGHTNING_OUT' (notice the double //)

If you simply take out one of the '/' in between the community endpoint and app name, the JSON info is returned from the link. So the question is, does anyone know how to properly format the community endpoint in when loading the component from a script?

<script src="https://[domain].na174.force.com/[community-name]/lightning/lightning.out.js"></script>
<script>
            $Lightning.use("c:[app-name]", function(){
                $Lightning.createComponent(
                    "c:[lwc-name]",
                    {},
                    "training",
                    function(comp){
                    }
                );
            },
                'https://[domain].na174.force.com/[community-name]/'
            );
        </script>

If anyone else has experience this issue or may be able to point me in the right direction, I'd greatly appreciate it. Thanks!

0

Figured this one out by trial and error.

The aura application which contained all of the lightning web components I wanted to display via lightning out had about 10 components overall. I removed a few of the lightning web components from the app, and put them in a new, separate aura application. After doing that, the lightning web components magically load on the page (for both on desktop and mobile).

The only setback is, the only browser that really seems to support lightning out for lightning web components is Google chrome. Safari works on desktop, but not on mobile. I haven't even tried Internet Explorer or other browsers.

So in summary, if you're receiving a CORS error or file not found error, try reducing the number of components that are sitting in the your lightning-out application. Hopefully this helps someone out down the road.

I'll be sure to update this post if I find out more information later on.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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