netlify-templates / victor-hugo

Victor Hugo is a Hugo boilerplate for creating truly epic websites!
MIT License
1.53k stars 379 forks source link

Unable to import three.js in app.js #67

Closed 01ivr3 closed 6 years ago

01ivr3 commented 6 years ago

When trying to load the three.js npm module in app.js I am getting the following error:

ERROR in ./node_modules/three/build/three.module.js
Module not found: Error: Can't resolve 'exports' in '/Users/ojs/Sites/last-spike/node_modules/three/build'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'exports-loader' instead of 'exports',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
 @ ./node_modules/three/build/three.module.js 1:0-72
 @ ./src/js/app.js
 @ multi ./js/app

I got this error after adding an import statement for three to the top of my app.js file using the latest victor-hugo updated 6 days ago.

import $ from "jquery";
import { WebGLRenderer, PerspectiveCamera, Scene, Vector3 } from 'three';
import Rellax from "rellax";
import {TweenMax, TimelineMax} from "gsap";
import ScrollMagic from "scrollmagic";
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
// import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';
import dat from "dat.gui";

All other modules seem to import just fine. And I have no problem using three.js as part of this webpack 3 starter https://github.com/edwinwebb/three-seed/

I'm not too familiar with diagnosing webpack issues and why specifically importing the three.js module is throwing an exception in victor-hugo but not the three-seed starter. Both seem to be using the same major versions of the required dependancies. I don't see anything wrong in webpack.conf.js with how the loaders are called. And the latest version of the three.js module appears to be installed just fine to my local victor-hugo project.

Any help greatly appreciated.

erquhart commented 6 years ago

Probably because of this line:

https://github.com/netlify/victor-hugo/blob/419a7da48c4d7e6ac6ec1626369bc91ec2e5aa8a/webpack.conf.js#L23

exports should be exports-loader.

erquhart commented 6 years ago

Merged a fix, comment if this is still an issue and I'll reopen.

01ivr3 commented 6 years ago

Fantastic. That did the trick. Thank you!