Magento 2 - The BASE_URL is missing from the product details page

Recently updated my Magento version from 2.2.3 to 2.3.7 and encountered a peculiar issue. On the product details page, I am seeing an error message in the console related to add-home-breadcrumb.js:

BASE_URL is not defined.

https://i.sstatic.net/Nikep.png

Seeking assistance to resolve this issue.

Investigating Further :

The error seems to be originating from the file:

vendor/magento/module-theme/view/frontend/web/js/view/add-home-breadcrumb.js

Refer to the screenshot below; console.log is not providing any output here. https://i.sstatic.net/YlpPG.png

I have attempted to search for a solution without luck so far. One observation is that breadcrumb functionality was not present in the previous version 2.2.3 but is now included in 2.3.7.

The path to the file causing the issue is:

vendor/magento/module-theme/view/frontend/requirejs-config.js

Please refer to the screenshot below; the comparison between the new version (2.3.7) on the left and the previous version (2.2.3) on the right. https://i.sstatic.net/ShJHL.png

javascriptmagento2upgradebreadcrumbsvendor

Answer №1

BASE_URL is a crucial constant located in the vendor/magento/module-theme/view/frontend/templates/page/js/require_js.phtml file view screenshot 1

If you encounter this error, it may be due to your theme overriding the aforementioned file and missing the line with the declaration of this important constant. Alternatively, the issue could arise if you are rearranging all script tags to the bottom of the page using a Magento 2 module like Amasty Google Page Optimizer. In such cases, you must configure the behavior to ignore scripts containing baseUrl view screenshot 2

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

What is the process for saving the selected value from a radio button into the database?

Below is an example of code I am working with: <label style="cursor:pointer;"><input type="radio" name="rads" value="'.$correct.'" id = "radio">'.$answer.'</label> <button onclick="myFunction()">Value</butto ...

javascriptphpjqueryhtmlmysql

How can I prevent list items in jQuery Mobile from being truncated with ellipses?

Here is the list I am working with: <ul id="linksList" data-role="listview" data-inset="true" data-filter="true"> <!-- Dynamic contents! --> </ul> This list pulls its data from a local XML file (RSS feed). I am looking f ...

javascriptjquerycssjquery-mobile

JS problem with decreasing

Within a React component, I have implemented the following method: addWidget = (index) => { let endX = this.state.widgets.reduce((endX, w) => endX.w + w.w, 0) console.log(endX); if (endX === 12) endX = 0 this.setState({ wi ...

javascriptreactjsecmascript-6

Alternate. (individually)

Issue with Running Program I've been struggling to get my program to run correctly. The task at hand is to have the program display only one question at a time. But no matter what I try, clicking on all questions displays all the answers simultaneous ...

javascripthtmlcss

Transferring values with jQuery

I attempted to customize the appearance of the select dropdown options, but unfortunately, the value of the options is not being transferred to the new jQuery-created class. Due to this issue, I am unable to achieve the desired outcome. The expected behavi ...

javascriptjquery

Displaying MySQL data on an HTML page with Node.js

Hello there, I recently started delving into Node.js for the first time. My current project involves fetching data from MySQL and displaying it on my HTML page. However, when I try to access my website at http://localhost:3000/index.html, I encounter an er ...

javascripthtmlmysqlnode.js

Closing the menu on image click in Ionic 2

If you're using Ionic 2, you have the ability to include the menuClose directive on a button to automatically close the side menu when the button is clicked. However, what if you want to close the menu when an image is clicked instead of a button ...

javascripthtmlionic2

What is the process for identifying errors using promises?

Given a client request with parameters, I need to make two API calls. To handle this, I utilized Promise.all in order to execute both promises concurrently. However, I am puzzled about how to catch an error on the first promise if the second one encounters ...

javascriptnode.jspromiseaxios

Leverage Async/Await in React.js with the Axios Library

Recently, I came across an interesting article on Medium titled How to use async/await with axios in react The article discussed making a simple GET request to a server using Async/Await in a React.js App. The server returned a JSON object at /data with t ...

javascriptjsonreactjsasynchronousecmascript-2017

Ensure that the modal remains open in the event of a triggered keydown action, preventing it from automatically closing

I am currently toggling the visibility of some modals by adjusting their CSS properties. I would like them to remain displayed until there is no user interaction for a period of 3 seconds. Is there a way to achieve this using JavaScript? Preferably with Vu ...

javascriptcssvue.js

Adjusting the ContentChildren attributes within the QueryList modification

Let's imagine a scenario where a parent component has @ContentChildren(Child) children. Each individual Child, in its component class, includes an index field. I want to ensure that these index fields remain accurate whenever there is a change in the ...

javascriptangular

What could be causing my callback function to fail when used within a nested function?

I am currently utilizing the callback function in conjunction with Socket.io as shown below: loadData(callback) { var client = new SyncClient(this.socket, this.project); this.client = client; //From my data function client.on("connected", () => { ...

javascriptvue.jssockets

provide an element reference as an argument to a directive

I am trying to figure out how to pass an element reference to a directive. I know that I can get the reference of the element where the directive is applied using private _elemRef: ElementRef but my goal is to pass the reference of another element to the ...

javascriptangular

Dreamweaver restricts my ability to utilize JavaScript for coding

My JavaScript isn't working in Dreamweaver. I have linked the script file correctly using the given code: <script src="file:///C:/Users/Matthew/Desktop/Untitled-2.js" type="text/script"></script> However, when I try to call it with scrip ...

javascriptdreamweaver

Execute javascript code 1.6 seconds following the most recent key release

Is there a more efficient way to execute JS 1.6 after a keyup event, considering that the timer should reset if another keyup event occurs within 1.6 seconds? One possible approach could involve utilizing a flag variable like this: var waiting = false; $ ...

javascriptjquery

Enhance the functionality of your React app by making the `<Paper>` component in Material UI clickable

I'm trying to figure out how to make a Paper component clickable. I attempted to set an id property in the tag like () and then utilize the DOM to add an event listener, but it's not working. I've hit a roadblock and I'm running out of ...

javascriptreactjsmaterial-uidom-events

What is the best way to add a dynamic parameter to the URL?

Here is an example of my URL: https://my-website.com/api/players?countryId=1&clubId=2&playerName=abc The parameter values can vary. This is the code snippet I use: getDataPlayer(payload) { let params if(payload.countryId && payl ...

javascriptajaxvue.jsurlparameters

What is the best way to substitute multiple substrings with strings from multiple interconnected arrays?

Looking for a way to manipulate a lengthy string in JS? Seeking to add new characters to each match within the string to create a fresh output? Need to handle multiple occurrences of a specific substring in the long text? Any strategies or suggestions? con ...

javascriptreactjsstring

The inclusion of a content editable feature within a carousel is leading to unexpected event propagation

I am dynamically creating an editable div using the code snippet below. <div class='reflection-field' contenteditable="true" data-number="${index}"></div> Expected Outcome: When I click on the generated div, I anticipate that the c ...

javascriptjqueryhtml

Switching between different CSS files based on the URL using jQuery or another method

Is it feasible to apply specific styles based on the ID or load various CSS files depending on the URL you are visiting? For example: <script> if(location.href == 'http://jpftest2.tumblr.com/about'){ document.write('<style type= ...

javascriptjqueryhtmlcss