Mismatch between MIME types in Bootstrap and Scroll-out detected

I am currently working on a WordPress website and encountering two issues with loading bootstrap.js and ScrollOut.js: - Blocked resources due to MIME type mismatch

wp_enqueue_style('bootstrapjs', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array(), '4.4.1', 'all');
wp_enqueue_style('scrolloutjs', 'https://unpkg.com/scroll-out/dist/scroll-out.min.js', array(), '2.2.8', 'all');

All other JavaScript files, such as fancybox and my custom JavaScript, are loading without any problems.

Could you please provide some guidance on how I can resolve this issue?

Thank you in advance

Answer №1

Instead of using wp_enqueue_style, try implementing wp_enqueue_script. It's often the small details like this that can impact our code!

Answer №2

It seems like you are using the incorrect function for your task. Make sure to utilize wp_enqueue_script for handling JavaScript files and wp_enqueue_syles for CSS files.

Below is the corrected version of your code snippet:

wp_enqueue_script('bootstrapjs', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array(), '4.4.1', 'all');
wp_enqueue_script('scrolloutjs', 'https://unpkg.com/scroll-out/dist/scroll-out.min.js', array(), '2.2.8', 'all');

For more information, refer to the following resources: https://developer.wordpress.org/reference/functions/wp_enqueue_style/ https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to show pop-up upon clicking

My goal is to create a popup that appears when the 'Propose' button is clicked. TestPopUp.tsx const TestPopUp = () => { return ( <div> <p>TEST</p> </div> ); }; export default TestPopUp; CandidateActi ...

Navigating through jQuery and straightforward code?

Before I pose my question, let me clarify my objective: I aim to write code with maximum efficiency while still incorporating extensive functionality. In my eyes and those of my colleagues, this is what we refer to as 'beautiful code'. The issue ...

Unable to Modify TextField Component in React

Is it possible to attach variables to TextField and have those variables deleted as a whole and not editable? Check out the Codesandbox example HERE code <CardContent> <Autocomplete value={values.variable} options={variables} ...

Ways to position divs without causing them to collapse or override existing divs

I am currently developing a demonstration in which users can select jQuery areas to create square blocks. When a user selects an area and adds a comment with color, the entire block is displayed at a specific position. This feature is working perfectly as ...

Is there a way for me to display a different value outside of the method by setting the variable?

Hello my dear friends. I have a Vue data variable set up like this: var comp= { data() { return{ polygonString:"" } } } The issue I am facing is that when trying to update the 'polygonString' inside the & ...

Understanding Arrays in Angular JSIn this article, we

I am new to working with Angular JS. Currently, I am populating an array and attempting to showcase its contents on the HTML page using ng-repeat. $scope.groupedMedia = []; // Elements are being added through a for loop. $scope.groupedMedia[year].push(r ...

When using setState in the onRowSelection event with React's Material-ui tableRow, the selection cannot be properly controlled

Currently, I am working with a material-ui table https://i.stack.imgur.com/JIzLT.png and my goal is to pass selected rows to a function when the DELETE button is clicked. constructor(props) { super(props); this.state = { selecte ...

I am wondering about the proper method for deleting multiple records simultaneously in Ember Data

My current challenge involves managing a list of record IDs, such as [1, 20, 20]. The process of individually querying and deleting each item is proving to be quite inefficient. store.findRecord('post', 1).then(function(post) { post.deleteRec ...

The next and previous buttons on the JQuery UI datepicker are related to only one ancestor. When using $(e.target).parents(), it will only return a

Unfortunately, my reputation isn't high enough to post my own answer just yet. However, I wanted to share it before wasting more people's time: I finally figured out why I was not getting all the expected ancestors: The JQuery datepicker actuall ...

A guide on transferring CSS module generated classes to components in Vue

Looking to implement CSS Modules, however, it appears that vue does not have a built-in method to pass generated class names to child components. Consider the scenario with two components: Table.vue TableRow.vue With styles like this: .table { table ...

Utilizing Modal Popups in ASP.NET MVC for Button Clicks Embedded within a jQuery Datatable

For my current project, I am working on a page that includes a table with data. However, I want to implement a Bootstrap modal to display unique message content in the popup body when a button is clicked within each row of the table. The challenge I am fac ...

Is there a way to eliminate the legend symbol for just one legend in Highcharts?

Looking to customize a legend in Highcharts but facing limitations due to Plot Lines and Bands not having legends. To work around this, I have added an empty series that acts as a toggle for showing/hiding plot lines. Since my plot lines are vertical, I im ...

Adjust the iframe height when using slidetoggle

I currently have a menu positioned in the center of the screen, set to "show" by default. Beneath this menu, there is an iframe filling up the remaining space: <script type="text/javascript> $(document).ready(function() { var main_height = ($(d ...

Removing exclamation points from the routing of a state URL is a key aspect of mastering full stack development

Is there a way to remove exclamation marks from the url in state routing using mean.io? Currently, my url looks like http://localhost:3000/#!/auth/register I just want to get rid of the "!" marks after the "#" symbol. Is it possible? Here is the content ...

Can you explain the distinction between these two concepts in JavaScript?

I've come across an issue while assigning PHP values to JavaScript. var a = <?php echo 39; ?> JavaScript is throwing an error that says "Uncaught SyntaxError: Unexpected token ILLEGAL". However, when I assign PHP values in a slightly different ...

I'm searching for a way to create a JavaScript function that assigns values to radio buttons. Can anyone help?

I'm facing a small issue with retrieving values from radio buttons. I have used a foreach loop to generate radio buttons in HTML. These buttons are for Yes/No options, and each Yes/No pair needs to have a corresponding value. For example, question 1 ...

Changing an item in a refined list

Here is an array written in Typescript: [ { "size": "100.34 KB", "name": "Phone.jpg", "documentoContentType": "image/jpeg", "type": "object" }, { "size": "606.34 KB", "name": "Tulips.jpg", "documentoContentType": "image/jpeg", "type": "flower" }, ...

jQuery autocomplete feature fails to retrieve suggestions from local text file

I have implemented the code from a Plunker example in an attempt to minimize the number of ajax requests made to the database. The JSON data is being generated correctly and stored in a text file. However, when I try to display autocomplete options, only ...

Generating object with a specific CSS class

I'm having trouble with this code, is there a way to create a DOM element and add a class to it right away? var notes = document.createElement("div").addClass("notes card-content"); ...

Recursion functions seem to be not providing a return value

I wrote a recursive function that needs to return an object from an array of objects. Each object in the array includes a reference to a neighboring object, as shown below: { id: 5, neighbors: { north: 1, east: 6, south: 9, west: 4 ...