Using Three.js with Laravel - Require is not defined - laravel

Question

I'm in the process of converting my project over to Laravel, and this uses the Three.js library. I followed their Import via Modules documentation, but get the error Uncaught ReferenceError: require is not defined at stl:71, so I assume it isn't being loaded correctly.
I did the following...
Ran "npm install three" in my Laravel root directory
Ran "npm run dev"
Put the following code snippet in the script section of my blade template
var THREE = require('three');
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
I'm still getting familiar with using Laravel and NPM, where I think I may need to import the library somewhere before using it. The ThreeJS documentation doesn't make any mention of this though (when using the NPM module) so I am confused.
Pretty sure I can import it in the resources\app.js for global access, but only need to use it on certain pages. Being the case, I would prefer to figure out why var THREE = require('three'); isn't working.

Answer 1

Create a file under public/js/three.js and put your codes in there.
Then in your blade file add this in script section
<script src="/js/three.js" type="module"></script>
Hope it might work
Another way would be changing your webpack config file to:
webpack.mix.js
mix.webpackConfig({
module: {
rules: [{
test: /\.js?$/,
use: [{
loader: 'babel-loader',
options: mix.config.babel()
}]
}]
}
});

Answer 2

Take a look at Three.js documentation
Important note:
Because the library relies on ES modules, any script that references it must use type="module"
...Like:
<script type="module">
Then you can do stuff like:
import * as THREE from 'https://unpkg.com/three/build/three.module.js';
Read more about Javascript modules here