'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