3dmol / 3Dmol.js

WebGL accelerated JavaScript molecular graphics library
https://3dmol.org/
Other
785 stars 192 forks source link

[BUG] #551

Closed pboysen closed 1 year ago

pboysen commented 2 years ago

Describe the bug

Reference error below

// Expose jQuery and $ identifiers, even in AMD // (#7102#comment:10, https://github.com/jquery/jquery/pull/557) // and CommonJS for browser emulators (#13566) if ( typeof noGlobal === "undefined" ) { window.jQuery = window.$ = jQuery; } return jQuery; } );

Uncaught (in promise) ReferenceError: cannot assign to function call js jQuery:10888 js vendors~3dmol.js:21 if(typeof define !== 'undefined') { // UPNG checks the existence of require, not define, so need to do both var _3dmol_saved_define = define; var _3dmol_saved_require = require; define = null; <<<<<< line 10888 in 3Dmol.js require = null; }

To Reproduce Try to load 3Dmol or load jquery and 3Dmol-nojquery, versions 1.7.1, and 1.8.0

Expected behavior Version 1.7.1 worked until a few weeks ago

Desktop (please complete the following information):

Additional context

dkoes commented 2 years ago

Can you provide some wrapper code that reproduces this?

dkoes commented 2 years ago

Also, 1.7.1 definitely doesn't have the offending code in it. How are you loading 1.7.1? Are you sure you've completely cleared your cache?

pboysen commented 2 years ago

You are right. I was on 1.8 when I reported it. I just cleared the cache but I got the same error. I have tried both with and without jquery being loaded.

This is from a Vue component and has not changed for months. mounted() { import(/ webpackChunkName: "jquery" / 'jquery') .then($ => { import(/ webpackChunkName: "3dmol" / '3dmol/build/3Dmol-nojquery-min') .then($3Dmol => { this.viewer = $3Dmol.createViewer(this.$refs.mview); // format will be removed when $3Dmol updated in npm let fmt = this.settings.fileInfo.format let data = ${fmt}:${this.fileInfo.value} $3Dmol.download(data,this.viewer,{format: fmt},() => { this.viewer.setBackgroundColor(this.settings.bcolor) this.viewer.setStyle(this.getStyles()) this.viewer.zoomTo() this.viewer.render() this.mounted = true }); return $3Dmol }); }); }

dkoes commented 2 years ago

Any chance you can provide a self-contained html? I know nothing about vue.js.

pboysen commented 2 years ago

Probably wouldn’t help because the code leading up to the instantiation of 3Dmol is internal to the Vue system.

I reinstalled 1.7.1 and it works again so we will stick with that for now. I will close the issue.

However, 1.8 seems to be a problem.

It looks like 3dmol/3Dmol.js@7a4fa76 is the commit that breaks it. It's the https://github.com/3dmol/3Dmol.js/blob/7a4fa760ebc9478dbbb8b21cf1330267f2c845f0/js/disable_amd.js file specifically.

dkoes commented 2 years ago

I don't want to close this as it is a serious bug, but I need to understand what the problem is and how to reproduce it. I suspected the problematic change would break in some javascript frameworks, but it un-breaks other scenarios so I need to figure out how to get it working for everyone.

Is the issue not appearing in the browser but during the vue build? Can you provide a simple reference project?

pboysen commented 2 years ago

I didn't see any other reports so I assumed it was something with our system. Vue is a dynamic build system so we see everything through the browser as we make changes. I will see if I can find a simpler example.

pboysen commented 2 years ago

I can't find a simpler example for you to look at. Seems strange that you can't nullify require and define even if they are keywords

dkoes commented 1 year ago

Please try out version 2.0 in your framework as it has had a major overhaul and I'd like to make sure it works in vue.js.