Webpack cant resolve and point to my node_modules

Questions
, , ,
1

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

I want to import three like this:
import * as THREE from 'three';

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 “…/”.

I also 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:

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

2

/cc

3

Apart from the feedback at stackoverflow, it seems that you misunderstand an important concept.

The idea is to create a build file from your source files which is then included into your index.html. Right now, you directly include the source file which is wrong. I refer to the following line:

<script type="module" src="./src/index.js"></script>

It should be something like:

<script src="./build/bundle.js"></script>
1 Like
4

Hello, brother, I also encountered this problem, could you help me solve it