Uncaught SyntaxError: The requested module '/THREE.MeshLine.js' does not provide an export named 'MeshLine'

[Charles-Okoni]

Uncaught SyntaxError: The requested module '/THREE.MeshLine.js' does not provide an export named 'MeshLine'

Hi, Is there a way to import THREE.MeshLine.js in my main.js script ? I got this error.

There is the import code here :

import * as THREE from "/three.module.js";
import { OrbitControls } from "/OrbitControls.js";
import { TransformControls } from '/TransformControls.js';
import { CSS2DRenderer, CSS2DObject } from '/CSS2DRenderer.js';
import { MeshLine} from "/THREE.MeshLine.js";

[jacopocolo]

👋🏻 this is not the solution BUT I was struggling with the same problem and I ended up slightly modifying the file so it works with import. Here's how I did it: https://gist.github.com/jacopocolo/72c9970093b35be7b212e09c961b7fb4

There may be a workaround that allows you to use the THREE.MeshLine.js from this repository, but I did not figure it out.

[zipzit]

Me too. I gave up, converted project to local storage for all libraries, and old skool non-module versions, sigh.

I don't fully understand the ;(function() { . . . }.call(this)) wrapping combined with

        if (typeof exports !== 'undefined') {
        if (typeof module !== 'undefined' && module.exports) {
            exports = module.exports = {
            MeshLine: MeshLine,
            MeshLineMaterial: MeshLineMaterial,
            MeshLineRaycast: MeshLineRaycast,
            }
        }
        exports.MeshLine = MeshLine
        exports.MeshLineMaterial = MeshLineMaterial
        exports.MeshLineRaycast = MeshLineRaycast
        } else {
        root.MeshLine = MeshLine
        root.MeshLineMaterial = MeshLineMaterial
        root.MeshLineRaycast = MeshLineRaycast
        }

Seems odd.

[lucasebana]

up

[morph3us-net]

Indeed, I am struggling with the same problem, if someone with more knowledge than me could please elaborate?!

As far as I understand the problem lies within trying to import the "THREE.MeshLine.js", which is es5 compliant, into an es6 module? At least thats what my problem seems to be. (I might blubber utter bs, though, as I dont have much clue of what I am talking about.)

I would go ahead and convert the javascript to a module myself, what's keeping me is the utterly different structure... Just compare this conversion posted in this issue to the one I installed via npm. @jacopocolo there seem to be code lines that do not belong to a specific function. where would I put those when converting to es6?

@zipzit Though I cannot fully comprehend and explain the wrapping myself, I found this: https://stackoverflow.com/questions/8035822/why-write-callthis-at-the-end-of-an-javascript-anonymous-function

Any help would be greatly appreciated!

[davincios]

Bump

[toastisme]

I don't fully understand this, but in case anyone else was struggling to get this to work non-locally with errors like this one or using root etc., at the top of the file replace

;(function() {
  'use strict'

  var root = this

  var has_require = typeof require !== 'undefined'

  var THREE = root.THREE || (has_require && require('three'))
  if (!THREE) throw new Error('MeshLine requires three.js')

with import * as THREE from "https://threejs.org/build/three.module.js";

and at the bottom replace

  if (typeof exports !== 'undefined') {
    if (typeof module !== 'undefined' && module.exports) {
      exports = module.exports = {
        MeshLine: MeshLine,
        MeshLineMaterial: MeshLineMaterial,
        MeshLineRaycast: MeshLineRaycast,
      }
    }
    exports.MeshLine = MeshLine
    exports.MeshLineMaterial = MeshLineMaterial
    exports.MeshLineRaycast = MeshLineRaycast
  } else {
    root.MeshLine = MeshLine
    root.MeshLineMaterial = MeshLineMaterial
    root.MeshLineRaycast = MeshLineRaycast
  }
}.call(this))

with export { MeshLine, MeshLineMaterial, MeshLineRaycast };

This then allowed me to use MeshLine in the browser, although with a warning that THREE was being imported twice.