'ThreeJS TypeScript - PointerLockControls - SyntaxError in browserify (gulp)
I'm for the whole day trying to import PointerLockControls to make my camera move with cursor in my game, like:
main.ts
import * as THREE from "three";
import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls';
and everything's fine, just until I try to compile it to run in the browser:
[17:02:51] Using gulpfile E:\Programowanie\NodeJS Projects\wn3d\gulpfile.js
[17:02:51] Starting 'default'...
[17:02:51] Starting 'bundle'...
[17:03:02] [SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'] {
line: 1,
column: 1,
annotated: '\n' +
'E:\\Programowanie\\NodeJS Projects\\wn3d\\node_modules\\three\\examples\\jsm\\controls\\PointerLockControls.js:1\n' +
'import {\n' +
'^\n' +
"ParseError: 'import' and 'export' may appear only with 'sourceType: module'",
Tried everything that I found - three-pointerlock-ts (which seems to be outdated), three-full, esmify (which throws me dependency errors..), babelify (with preset @babel/preset-env) and it seems I stuck.
Here's my gulpfile code:
const gulp = require("gulp");
const browserify = require("browserify");
const source = require("vinyl-source-stream");
const watchify = require("watchify");
const tsify = require("tsify");
const fancy_log = require("fancy-log");
//const babelify = require('babelify');
const esmify = require('esmify');
const watchedBrowserify = watchify(
browserify({
basedir: ".",
debug: true,
entries: ["./src/setup/main.ts"],
cache: {},
packageCache: {},
exclude: []
}).plugin(tsify, {
emitDecoratorMetadata: true,
experimentalDecorators: true,
target: "es6",
module: "commonjs",
allowJs: true
})
);
function bundle() {
return watchedBrowserify
.bundle()
.on("error", fancy_log)
.pipe(source("bundle.js"))
.pipe(gulp.dest("./dist"));
}
gulp.task("default", gulp.series(bundle));
watchedBrowserify.on("update", bundle);
watchedBrowserify.on("log", fancy_log);
and tsconfig:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"allowJs": true,
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"esModuleInterop": true
},
"exclude": [
"node_modules"
]
}
in HTML I import:
<script src="dist/bundle.js" type="module"></script>
Any ideas how can I finally import it properly?
Thanks for help.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
