3MFLoader fails to load JSZip if imported using `import`

Hi,

I have an electron app written using TypeScript and I use import to require threejs and the 3MFLoader. The 3MF example uses <script src> to require JSZip as the 3MF loader does not require JSZip itself.

When I try and use the loader it fails with 3MFLoader.js THREE.3MFLoader: jszip missing and file is compressed. as JSZip is not defined.

If I patch 3MFLoader.js and add the following at the top it suddenly works:

import * as JSZip from "../../js/libs/jszip.min.js";

How am I supposed to import the 3MFLoader? Adding the same line above the 3MFLoader import in my own source file has no effect (naturally).

Kind regards,

Mikael

The jszip version of the official repository is not an ES6 module file. So I don’t understand how your fix works^^. Hence, the examples include jszip.min.js like so:

<script src="js/libs/jszip.min.js"></script>

I guess you just have to ensure that jszip.min.js is globally available in your app.

I am using TypeScript and WebPack so there might be some magic transpiling stuff happening which makes import work when added to 3MFLoader.js; thinking of it I think that is some TypeScript magic.

Shouldn’t 3MFLoader.js import/require JSZip if it depends on it? If that is not doable maybe we can make the loader constructor take JSZip as an optional parameter?

Yes, it would be best if jszip.min.js would be available as a ES6 module so a simple import would solve the issue. However, the official repository does not offer the library as a ES6 module so we have to do the conversion by ourselves. AFAIK, there was an issue with this but I don’t remember the exact reason anymore.

I am a JavaScript noob, but shouldn’t it be possible to just create a jszip wrapper module and have it import jszip.min.js and export JSZip?

Regardless of that, do you have a recommendation on how to proceed using the 3MFLoader (or any loader which uses JSZip); right now I just copy-pasted it into our source tree and that worked.

Well, I’ve just included jszip.min.js via the script tag last time so the app bundle could find the library in global space. However, I think the approach with the wrapper is better so I would prefer that solution.

Gonna try that.

Actually I have zero ideas how to do that in an Electron app which uses TypeScript and WebPack so I am gonna stick to my copy-paste approach, but the solution you provided should obviously work. Thanks for your help.

Quick update on this topic: With the latest release of three.js(116), the ES6 module version of 3MFLoader no longer requires a global script import of JSZip. JSZip was converted to a module so the dependency of 3MFLoader to JSZip is transparent now.