SPFx webpart breaks javascript frameworks (jQuery and Bootstrap)

[Brank]

Category

• Bug

Describe the bug

We have a publishing site using a custom master page to load some Javascripts and frameworks such as JQuery and Bootstrap, we have some custom webparts using SPFx that render HTML for bootstrap components such as a carousel. One day bootstrap components just stop working as expected. We have seen that the bootstrap component just stop working even if it is in a content editor webpart when a SPFx webpart is added to the page.

In the console we have the following errors:

Steps to reproduce

1. Create a site publishing site
2. Add a script editor with the following code (This is just for load the javascript and css for get bootstrap working, just in case you don't want to do it in your custom master page)

<script type="text/javascript" charset="utf-8">
var script = document.createElement('link');
script.onload = function() {
    var script2 = document.createElement('script');
    script2.onload = function() {
		var script2 = document.createElement('script');
		script2.onload = function() {
			var script2 = document.createElement('script');
			script2.src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js";
			script2.onload = function() {
							//He terminado de cargar scripts
			};
			document.head.appendChild(script2); //or something of the likes
		};
        script2.src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js";

		document.head.appendChild(script2); //or something of the likes
    };
    script2.src = "https://code.jquery.com/jquery-3.5.1.slim.min.js";

    document.head.appendChild(script2); //or something of the likes
};


script.href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css";
script.type="text/css"
script.rel="stylesheet"
document.head.appendChild(script); //or something of the likes

</script>

3. Add a content webpart with the following code (this is the bootstrap carousel):

<div class="carousel slide" id="carouselExampleIndicators" data-ride="carousel">
   <ol class="carousel-indicators">
      <li data-slide-to="0" data-target="#carouselExampleIndicators">​<br/></li>
      <li class="active" data-slide-to="1" data-target="#carouselExampleIndicators">
      </li>
      <li data-slide-to="2" data-target="#carouselExampleIndicators">
      </li>
   </ol>
   <div class="carousel-inner">
      <div class="carousel-item"> 
         <img class="d-block w-100" alt="First slide" src="/sites/IntranetR4/test/Paginas/..."/> &#160;
      </div>
      <div class="carousel-item active"> 
         <img class="d-block w-100" alt="Second slide" src="/sites/IntranetR4/test/Paginas/..."/> &#160;
      </div>
      <div class="carousel-item"> 
         <img class="d-block w-100" alt="Third slide" src="/sites/IntranetR4/test/Paginas/..."/> &#160;
      </div>
      &#160;
   </div>
   <a class="carousel-control-prev" role="button" href="#carouselExampleIndicators" data-slide="prev"> 
   <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
   <span class="sr-only">Previous</span> </a> 
   <a class="carousel-control-next" role="button" href="#carouselExampleIndicators" data-slide="next"> 
   <span class="carousel-control-next-icon" aria-hidden="true"></span> 
   <span class="sr-only">Next</span> </a> 
</div>

4. Check if carousel is working (it should be expected to be working)
5. Edit the page and add a SPFX webpart (it could be the one created by yeoman with ReactJS without doing any other modifications)
6. See that carousel stop working.

Expected behavior

Carousel shouldn't stop working, the correct behavior was doing it some weeks ago.

Environment details (development & target environment)

Tooling: SPFx v1.10.0
Target Environment: SharePoint Online

Additional context

Few weeks ago we have an intranet made with SPFx webparts that renders HTML to get some bootstrap components, one day withtout doing any code modification or loading new javascript these components just stop working as expected.

Thanks in advance.

Best regards,

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[andrewconnell]

Can't tell what the error is from the screenshot... too small. You can get SPFx to load on the page without adding a web part by adding the URL parameter loadSPFX=true.

I think I can read define in the error... that may be an issue related to the module loader. Can you verify using the network tab on the browser dev tools that bootstrap & jquery are being loaded.

[msft-github-bot]

The more context details you can provide, the easier it is to help assist on issues. Any code you can provide and/or screenshots of the issue also help. The easier you can make it to reproduce the issue, the easier and quicker it is for someone to help you. Please refer to How to Create Good Issues, specifically How to Create Good Issues: Include context, in our wiki for more details.

[Brank]

Can't tell what the error is from the screenshot... too small. You can get SPFx to load on the page without adding a web part by adding the URL parameter loadSPFX=true.

I think I can read define in the error... that may be an issue related to the module loader. Can you verify using the network tab on the browser dev tools that bootstrap & jquery are being loaded.

Hi Andrew,
Thanks for your feedback. You can see the error's image bigger if you click on it.

About Bootstrap and JQuery the files are loading correctly we are able to see them in the network and source tabs.

Also I have to say that we fixed the issue by loading JQuery and Bootstrap javascripts by using <SharePoint:Scriptlink> tag in the custom master page instead of using <script src="">, so it seems there is a conflict in the loading files, like if SPFx is using something that doesn't like with bootstrap and/or jquery, which is pretty rare cause as I mentioned in the OP this was working perfectly few weeks ago with the same code.

Best regards,

[andrewconnell]

SPFx isn't loaded on the page unless it's used, like when an client-side web part is added. That's why I suggested the URL parameter as that's a way to force SPFx to load on a page regardless (good testing trick).

The screenshot was too hard to read as-is... clicking on it just made it fuzzy. Can't copy/paste/search for error code in an image ;)

At any rate, the reason I mentioned define is because that's a common module syntax. SPFx contains a module loader (system.js) that gets loaded in the <HEAD> before content (like the repro in your OP did), whereas the ScriptLink control loaded it int he head as well.

At any rate, it sounds like you're customizing the master page. Beware of that... esp if you're using SPFx. That's not supported.