Menu
I have problems running the Three.js library as a module according to the manual https://threejs.org/docs/#manual/en/introduction/Import-via-modules
This is what I have done:
Create package.json
npm init
Install webpack
npm i --save-dev webpack webpack-cli
Install Three.js
npm install three
Create index.html with following code
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - cloth simulation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #cce0ff;
color: #000;
}
a {
color: #080;
}
</style>
</head>
<body>
<script type="module" src="./src/index.js"></script>
</body>
</html>
Create a src folder and putting a file named index.js in src folder where I import three
import * as THREE from 'three';
Installing liveserver for running a server:
npm install live-server -g
Running the server:
live-server
This gives me the error:
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
It works however with this syntax providing the full path:
import * as THREE from '../node_modules/three/build/three.module.js';
How come webpack doesnt resolve the path to my node_modules?
I have also tried creating a webpack.config.js file:
module.exports = {
resolve: {
modules: ['./node_modules']
}
};
But with the same result:
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
Any hint is very much apreciated!
UPDATE:
I tried with Babel for handling ES6:
Install:
npm install --save-dev @babel/core @babel/preset-env
npm install --save-dev babel-loader
Edited y webpack.config.js according to this: https://createapp.dev/webpack
const webpack = require('webpack');
const path = require('path');
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}
]
}
};
module.exports = config;
Added .babelrc with:
{
"presets": [
"@babel/preset-env"
]
}
But still no success
353
Webpack allows you to define externals - modules that should not be bundled. When bundling with Webpack for the backend - you usually don't want to bundle its node_modules dependencies. This library creates an externals function that ignores node_modules when bundling in Webpack.
To solve the "Module not found: Can't resolve" error in React, make sure to install the package from the error message if it's a third-party package, e.g. npm i somePackage . If you got the error when importing local files, correct your import path.
Webpack is a command line tool to create bundles of assets (code and files). Webpack doesn't run on the server or the browser. Webpack takes all your javascript files and any other assets and transforms then into one huge file. This big file can then be sent by the server to a client's browser.
You can use three.js with ES6 modules and npm in-browser, without webpack or any other bundle, by doing this:
npm install three
And open an HTML page, and link to a type="module" script:
<script type="module" src="./main.js"></script>
in main.js you must write, in this format:
import * as THREE from './node_modules/three/src/Three.js';
And this will work. Note the import statement has to take that form, pointing at the file, with the ./ and .js.
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
