Search code examples
javascriptwebflow

Uncaught TypeError: Cannot read property 'tram' of undefined

I used webflow. Now there is a conflict when loading webflow.js.

What is the reason? How to fix?

http://s90009lu.beget.tech/teete/

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

Solution

  • So even though the provided information is minimal i'm going to give it a shot:

    As there is no actual sourcecode (code given seems to be packaged) i'm assuming this is some kind of a plugin. Which leads me to believe that this might not be the only case. Let just look at the exact error:

    Uncaught TypeError: Cannot read property 'tram' of undefined

    What this means is dat the browser tries to ook for a property called "tram" in an undefined variable. As undefined is something that is... wel... undefined. There can't be any properties. This produces this error.

    A good practice to start of with some context might be just using a Google search of the exact problem. Let's search for "Uncaught TypeError: Cannot read property 'tram' of undefined".

    Some results points up, al indicating stuff with webflow. Let's look at this result: https://forum.webflow.com/t/how-to-trigger-webflow-js-slider/11268.

    The third post states that adding the line var $ = jQuery; got the user a step further. This provides some very clear context.

    var $ = jQuery; assigns $ refer to the place in memory of the variable jQuery, a popular library. This basically creates an alias. Remarkable: $ tends to be a default (shipped) alias of jQuery. Something is off here.

    Opening the browser (Chrome) developer tools shows the error shown in the screenshot. We can get some more precise information here by utilizing the debugger.

    • Open the devtools.
    • Click on a link to webflow.js to open it the sources tab.
    • Check the break on exceptions button (shaped like a stop sign).
    • Use the "{}" on the lower left to format the code.
    • Reload the page.

    We can now see the code stop a certain point where it looks for tram. Just in front of that we see that it's looking in a newly created alias for window.$ (!).

    The last thing makes to believe that indeed, jQuery is not properly installed. Either by the plugin or by a conflict in other modules. The suggested var $ = jQuery; line might work to fix this, but please keep in mind that jQuery should be made available first for this to work.

    This last thing requires it to be bundled correctly or installed using a different method. As we don't know your exact situation you might need to look into this yourself.