Webpack cant resolve and point to my node_modules

Question

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

Answer 1

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 .

Answer 2

I also counter this error.

I just want a simple import * as THREE from 'three' like this.

I use a bundler webpack

this is my simple configuration

const path = require('path');

module.exports = {
  mode:'development',  
  entry: './src/main.js',
  watch: true,
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
};

and in my index.html I put the path of dist in my script tag.

 <script type="module" src="../dist/main.js"></script>

and run

npm run build

Webpack cant resolve and point to my node_modules

Question

2 answers

solution1
4 2020-01-06 02:50:54

solution2
0 2021-03-31 15:31:19

Webpack cant resolve and point to my node_modules

Question

2 answers

solution1 4 2020-01-06 02:50:54

solution2 0 2021-03-31 15:31:19

solution1
4 2020-01-06 02:50:54

solution2
0 2021-03-31 15:31:19