WebPack with three.webgpu.js fails because Webpack references three.module.js

Questions
1

I wanted to try using webpack with r168 or, more precisely, use webpack for the first time since three.webgpu.js came out. In my importmap I clearly reference three.webgpu.js

<script type="importmap"> {
    "imports": {
         "three": "./node_modules/three/build/three.webgpu.js",
         "three/tsl": "./node_modules/three/build/three.webgpu.js",
         "three/addons/": "./node_modules/three/examples/jsm/"
    }
}
</script>

And this is what my webpack config looks like

const path = require('path'); 
const TerserPlugin = require('terser-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');


module.exports = { 
	//mode: 'development',
	//devtool: "none",
	mode: 'production',
	devtool: 'source-map',
	entry: './src/index.js', 
	output: { 
		path: path.resolve(__dirname, 'build'), 
		filename: 'bundle.js' 
	},
	devServer: {
        port: 8889
    },
	experiments: {
		topLevelAwait: true
	},
  	resolve: {
    	alias: {
      		'three': 'three',
    	},
  	},
	optimization: {
		minimize: true,
		minimizer: [new TerserPlugin({
			terserOptions: {
				mangle: false,
				output: {
					comments: false,
				},
				compress: {
					warnings: false,
					drop_console: true,
					drop_debugger: true,
					pure_funcs: ['console.log'],
					unused: true,
				},
				output: {
					comments: false,
				},
			},
		})],
	},
	plugins: [
      //new BundleAnalyzerPlugin()
    ]
};

Interestingly, webpack still uses three.module.js for bundling. Of course, this can’t work well because three.module.js doesn’t contain the webgpu components and that’s why the bundling fails.
If I remove three.module.js, the unbundled app still runs without any problems, which is logical since I clearly refer to three.webgpu.js with the import map. But webpack then fails completely because it obviously expects three.module.js for three.js.
Does anyone have an idea of ​​where webpack references three.module.js?

P.S. I wish I had thought about it for a few minutes longer before writing here :man_facepalming:
The reason is because three.js references three.modules.js in its node_modules/three/package.json. If you change that everywhere in the package.json to three.webgpu.js it works

1 Like
2

if you are using the webpack bunder, then importmaps serve no purpose, since all your imports are already included into the bundle created by webpack.

Open the network tab on your browser, refresh, and you will see that none of your imports from your importmaps are being requested, only the bundle.js is.

I just got three.gpu to work without any issue in my webpack boilerplate version. You can try it out to verify.

git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git
cd Three.js-TypeScript-Boilerplate
npm install

Open VSCode

code .

Open ./src/client/client.ts and change line 1

- import * as THREE from 'three'
+ import * as THREE from 'three/tsl'

and change line 9

- const renderer = new THREE.WebGLRenderer()
+ const renderer = new THREE.WebGPURenderer()

Then test it,

npm run dev

Visit http://localhost:8080/

Three r168

In your own code, you will probably only need to change.

- import * as THREE from 'three'
+ import * as THREE from 'three/tsl'

Also, in the webpack config you posted at the top. Try deleting the alias section, i image it serves no purpose for you.

	resolve: {
    	alias: {
      		'three': 'three',
    	},
  	},
2 Likes
3

I wonder if this might be related:

Provide a WebGPU build that re-exports from three · Issue #29156 · mrdoob/three.js · GitHub

4

Thanks for the tip @seanwasere. But I don’t use ts, just js.
For me the matter had already been resolved yesterday after I had simply replaced the 4 three.module.js references in the package.json with three.webgpu.js. That seems logical to me anyway because when I use three.webgpu.js there shouldn’t be a reference to three.module.js anywhere. After that it worked exactly as it should.