Three.js: Missing 'browser' property in package.json

[ritteratzuken]

Description of the problem

Hello, everyone,
Current problem: When packing with Webpack, the package.json property 'module' is always preferred.
Thus, the packed code will not run in all browsers, as it is not ES5 code.

Solution:
The webpacks package.json mainField resolve prioritization looks like this by default (Link to the official Webpack documentation):
module.exports = { //... resolve: { mainFields: ['browser', 'module', 'main'] } };
This means that if you set the 'browser' property in the package.json, Webpack can properly pack threejs into ES5. (Link to the official NPM documentation)

The properties in the package.json would then look as follows:
"main": "build/three.js", "module": "build/three.module.js", "browser": "build/three.js", "name": "three",

Three.js version

• [ ] Dev
• [x] r116
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[gkjohnson]

When packing with Webpack, the package.json property 'module' is always preferred.
Thus, the packed code will not run in all browsers, as it is not ES5 code.

I'm using three.js with webpack without issue and I don't believe this is correct. I don't think there is any requirement that files in the browser field be directly runnable in the browser (let alone all old browsers) especially considering webpack handles require and import resolution. There's nothing in the npm docs link you provided that indicates that code in the browser field needs to be es5, either. It's just intended to differentiate between code intended to be run in node vs code intended to be run in the browser.

In fact if the build/three.js file were specified in browser then it would not work in webpack without significant effort because the three.js file does not export anything using commonjs or modules, which webpack expects.

Can you provide more details on the problem you're encountering and your webpack config?

[ritteratzuken]

Hi gkjohnson,
thanks for your answer.
After an internal discussion we agree with you.

In general we have no problems using three in combination with Webpack. The problems only arise when the code is written in Typescript and you want to support IE11. Then webpack resolves the three package as modules by the import set in Typescript and you have the choice to either set the polyfills yourself (which we want to avoid) or use build/three.js which already contains the polyfills for IE11.

For this reason we will set the browser field in the package.json for us, because we want to support IE11. We also realize that the browser field cannot be set as default, because everyone wants to decide for himself how far he wants to support the old browsers.