update import not work

[hqzh]

if version is r128，it's working

when i update and just write

import * as THREE from "three";

• Device:Desktop
• OS:Windows7
• Browser:Chrome
• Three.js version: r132
• lang: VUE

[adrianlx]

i have the same issue. please let me know when u solve that.

[marcofugaro]

@hqzh what build system and what version are you using? It looks like create-react-app?

[CodyJasonBennett]

That looks like the general Webpack error overlay but I'm also getting this with CRA.

[LinoPhil]

Same problem here, but only when bundling everything with rollup. I also use # privates in my viewer code and had no problems so far. Maybe rollup needs another option for the three stuff... i have to figure out...

Update:
For me its the terser plugin!

[mrdoob]

Was it too early to start using private class variables? Should we rename #alphaTest to _alphaTest?

[mjurczyk]

what build system and what version are you using? It looks like create-react-app?

@marcofugaro yep, happening in facebook/create-react-app. It's not really an issue with three (support for private fields is quite good) - but create-react-app seems to use an older version on babel.

Adding latest @babel/preset-env does solve the issue, but requires ejecting / taking apart the create-react-app bundle 😔

[hqzh]

what build system and what version are you using? It looks like create-react-app?

@marcofugaro yep, happening in facebook/create-react-app. It's not really an issue with three (support for private fields is quite good) - but create-react-app seems to use an older version on babel.

Adding latest @babel/preset-env does solve the issue, but requires ejecting / taking apart the create-react-app bundle

happening in vue-cli my here

[gkjohnson]

Can confirm this was broken for the /examples/ module imports as well in r132. For example, loading BufferGeometryUtils in an ES6 module from cdn.skypack.dev results in a console warning saying that the BufferGeometryUtils module was not exported.

This is unrelated to the use of private variables. If you look at the release notes you'll see that the exports have changed:

https://github.com/mrdoob/three.js/wiki/Migration-Guide#131--132

BufferGeometryUtils is now imported using this pattern: import * as BufferGeometryUtils from './jsm/utils/BufferGeometryUtils.js';

[marcofugaro]

Yeah current bundlers are not quite ready for private class properties yet.

Newer version of bundler tools such as create-react-app 5.0 alpha are rolling out and they support private properties fine.

[LinoPhil]

For my full viewer bundle I could fix the problem by excluding three from beeing excluded from babel:
//exclude: 'node_modules/**',
exclude: '/node_modules/(?!three)/',

[mrdoob]

0.132.1 has been published with no private class fields 🙃

[marcofugaro]

People, could you test if the latest version is working fine? Are normal class properties supported at least?

[grndctrl]

I'm afraid they are not, getting the same error on CRA:

Failed to compile.

./node_modules/three/build/three.module.js 5856:13
Module parse failed: Unexpected token (5856:13)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| class Material extends EventDispatcher {
>   _alphaTest = 0;
| 
|   constructor() {

[mrdoob]

🤦‍♂️

[marcofugaro]

Ok not even those.

We could transpile the whole three.module.js with babel for now, and remove the transpilation in a later stage.

Alternative is not using class properties for now.

What do you think @mrdoob?

[mrdoob]

That sounds very unappealing... Babel slows down the dev iteration process considerably.

Probably the only solution is to define these variables in the constructors instead.

Very disappointed with the bundlers ecosystem 😔

[marcofugaro]

Okay! Thanks @Mugen87 for the PR!

[Mugen87]

Very disappointed with the bundlers ecosystem 😔

Indeed. When using new language features, checking the browser support isn't enough anymore. Would be great to have something like caniuse but in context of bundlers/transpilers.

[mrdoob]

0.132.2 has been published with sadness 🙃🙃

[donmccurdy]

That sounds very unappealing... Babel slows down the dev iteration process considerably.

The exception here is probably esbuild (nice of them to give us our benchmark right on the homepage! 😅 ).

$ echo 'class Foo { #bar = 0; }' | esbuild --loader=js --target=es2020

var __privateAdd = (obj, member, value) => {
  if (member.has(obj))
    throw TypeError("Cannot add the same private member more than once");
  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
};
var _bar;
class Foo {
  constructor() {
    __privateAdd(this, _bar, 0);
  }
}
_bar = new WeakMap();

[mrdoob]

Hmm, not sure... I'm worried switching to esbuild may come with its own set of complications 😶

I guess using pseudo private is not too bad for now.

Maybe we could try using private class vars on the webgpu code though.

[mjurczyk]

@mrdoob additionally to the browser / bundler support, setting alphaTest to be a private property also seems to break vanruesc/postprocessing's EffectComposer 😔💔

Some useful third-party libraries and helpers may depend on hacking around and accessing these props to work.

(Tiny edit: the demo used both troika and vanruesc postprocessing, and it seems that it's actually troika material breaking and also I have no idea how to read errors - but the point stands about third-party libs overall 😅)

[mrdoob]

@mjurczyk what npm version is being used in that error?

[mjurczyk]

@0.132.0, before # got removed - plus latest troika and postprocessing. Works perfect again with @0.132.2.

[gaearon]

Adding latest @babel/preset-env does solve the issue, but requires ejecting / taking apart the create-react-app bundle 😔

This sounds like a misunderstanding. CRA automatically applies the env preset so this doesn’t quite make sense. Let’s chat about this in facebook/create-react-app#11339.