It doesnt ready for browser

[eslym]

when the module is set to ES6, it keeps all the import and export statement after compile, which cause problem for browserify, and webpack didnt complains while compiling, but browser doenst run either

[Hawkbat]

Thanks for the bug report, I'll look into this. It worked fine for me in my own project using Webpack, so there could be a config or version discrepancy there, but there's likely something wrong with how I'm exporting the module if it's failing in Browserify as well.

[eslym]

const gulp = require('gulp');
const ts = require('gulp-typescript');
const clean = require('gulp-clean');
const webpack = require('gulp-webpack');

const proj = ts.createProject('./tsconfig.json');

gulp.task('build-ts', function () {
    return proj.src()
        .pipe(proj())
        .js
        .pipe(gulp.dest('build/dist'));
});

gulp.task('build-js', function () {
    return gulp.src('./build/dist/main.js')
    .pipe(webpack({output: {filename: '[name].js'}}))
    .pipe(gulp.dest('./build/js/'));
});

gulp.task('build', gulp.series('build-ts', 'build-js'));

gulp.task('clean', function () {
    return gulp.src(['build'], {read: false, allowEmpty:true})
        .pipe(clean());
});

gulp.task('watch', function () {
    return gulp.watch(proj.config.include, gulp.task('build'));
});

this is the script i use for building the all in one js file, i tried browserify with babelify, it ended up with ParseError: 'import' and 'export' may appear only with 'sourceType: module'

when using the webpack, the result become like this:

/***/ (function(module, exports) {

    export * from './api';
    export * from './endpoints';
    export * from './plugin';
    export * from './types';
    export * from './utils';
    //# sourceMappingURL=index.js.map

/***/ })

it doesnt compiled to __webpack_require and module.exports, because the source of the node_module/vtubestudio/lib/*.js are compiled to ES6 standard, which all import and export statement are remain in the files

[Hawkbat]

I just republished the package as vtubestudio@1.2.0 using CommonJS exports (require()) instead of ES6 modules. It should work correctly with Node and Browserify now. Can you update the package and give it another try?

[eslym]

now the webpack without ts-loader (compile the ts to js manually then use webpack) is working fine, which previously not, webpack with ts-loader is always working, but browserify is reporting a different error

[09:43:28] Using gulpfile /mnt/d/projects/html/vts_api_test/gulpfile.js
[09:43:28] Starting 'build-js'...
[09:43:28] 'build-js' errored after 379 ms
[09:43:28] Error in plugin 'gulp-browserify'
Parsing file /mnt/d/projects/html/vts_api_test/node_modules/vtubestudio/lib/endpoints.js: Line 51: Unexpected token =>

which i also don't understand why its an error, using destructuring as parameter doenst seems wrong

[Hawkbat]

Sounds like it doesn't like parameter destructuring in arrow functions, yeah. I'll lower the code emit target to ES5 for the CommonJS export, hopefully that fixes it.

[Hawkbat]

Updated to vtubestudio@1.3.0 with that change. Fingers crossed 🤞

[eslym]

great, its now successfully compiled and run without problem on browser 👍

[Hawkbat]

Fantastic! Thank you for your patience!