admin管理员组

文章数量:1317909

I have problems running the Three.js library as a module according to the manual

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 e 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: /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

I have problems running the Three.js library as a module according to the manual https://threejs/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 e 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

  • javascript
  • node.js
  • webpack
  • three.js
  • webpack-dev-server
Share Improve this question edited Oct 27, 2019 at 19:06 acroscene asked Oct 27, 2019 at 18:05 acrosceneacroscene 1,0674 gold badges22 silver badges54 bronze badges 4
  • Try instead const THREE = require('three') if this is a node project than node isn't hip to es6 import statements due to there being no JavaScript engine yet that natively supports ES6 modules – Willman.Codes Commented Oct 27, 2019 at 18:20
  • What @william said. You'll need to install @babel/core and babel-loader, then configure babel-loader in webpack.config.json. And you'll likely want to create a .babelrc if you want to use es6. – Jay Kariesch Commented Oct 27, 2019 at 18:30
  • Thanks however const THREE = require('three') gives me the errormessage: index.js:3 Uncaught ReferenceError: require is not defined ... I tried to install babel with: npm install --save-dev @babel/core @babel/preset-env and npm install --save-dev babel-loader but that didnt work either. Same errormessage as before: Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". – acroscene Commented Oct 27, 2019 at 18:40
  • See my update above – acroscene Commented Oct 27, 2019 at 19:06
Add a ment  | 

2 Answers 2

Reset to default 5

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.

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

本文标签： javascriptWebpack cant resolve and point to my nodemodulesStack Overflow

版权声明：本文标题：javascript - Webpack cant resolve and point to my node_modules - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742028098a2415935.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。