CODEWITHSUNDEEP
javascriptthree.jsbabeljsbrowserify
Louis Leonardo
Louis Leonardo

Reputation: 25

can't transpile relative path of threejs with browserify and babel

i'm new at babel and browserify, I have a problem with transpile with browserify and babel, i've installed the threejs package and add

import * as THREE from 'three'

it works fine when i transpiled using command below

browserify input.js > output.js -t babelify

but when i add another import

import {GLTFLoader} from '../node_modules/three/examples/jsm/loaders/GLTFLoader'

and i used that command again, it doesn't work and it says

'import' and 'export' may appear only with 'sourceType: module' (1:0)

i've also added type module in the package.json but it still doesn't work, here is my package.json

{
  "name": "three.js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "three": "^0.129.0"
  },
  "devDependencies": {
    "@babel/core": "^7.14.5",
    "@babel/preset-env": "^7.14.5",
    "babelify": "^10.0.0"
  },
  "type": "module"
}

also here is my babel.config.json

{
    "presets": ["@babel/preset-env"]
}

is there anything i need to add or change?

Upvotes: 0

Views: 298

Answers (1)

Palash Bansal
Palash Bansal

Reputation: 827

Importing the examples from the js folder would work

import {GLTFLoader} from './node_modules/three/examples/js/loaders/GLTFLoader'
// or depending on your path
import {GLTFLoader} from '../node_modules/three/examples/js/loaders/GLTFLoader'

The files in the jsm folder imports from three.module.js

Upvotes: 1

Related Questions