We Keep Coding

Callback of onMounted is not being triggered in vue 3 plugin that bundled by webpack

Forgive me for getting long content to explain my problem.
I made a simple npm vue3-helloword-webpack plugin. This plugin consoles the simple text from inside the onMounted method.
If I bundle this helloworld plugin using vue-cli tool, the callback of onMounted from plugin would be triggered. But same does not happen while bundling by webpack.
I think the problem is occurred because of currenIntance(I guess it’s a vue instance) is null as shown in below image.
Content: when the plugin is bundled by webpack
Webpack.config.babel.js
const TerserPlugin = require("terser-webpack-plugin")
const libraryNamePlugin = 'vue3-helloworld-webpack';
const appConfig = {
entry: {
'vue3-helloworld-webpack': __dirname + '/src/index.js',
'vue3-helloworld-webpack.min': __dirname + '/src/index.js'
},
devtool: 'source-map',
output: {
path: __dirname + '/dist',
filename: '[name].js',
library: libraryNamePlugin,
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/
},
{
test: /(\.jsx|\.js)$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
]
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
include: 'vue3-helloworld-webpack.min.js',
}),
],
},
};
module.exports = [appConfig];
package.json
....
"main": "dist/vue3-helloworld-webpack.js",
"scripts": {
"build": "webpack --config webpack.config.babel.js"
},
"dependencies": {
"core-js": "^3.6.5"
},
"devDependencies": {
"#babel/core": "^7.14.3",
"#babel/preset-env": "^7.14.4",
"#babel/register": "^7.13.16",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-add-module-exports": "^1.0.4",
"babel-preset-es2015": "^6.24.1",
"chai": "^4.3.4",
"eslint": "^7.27.0",
"eslint-loader": "^4.0.2",
"lodash": "^4.17.21",
"mocha": "^8.4.0",
"terser-webpack-plugin": "^5.1.3",
"vue": "^3.0.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2",
"yards": "^0.1.4"
}
....
vue3-helloworld-webpack.js
import {onMounted, h} from 'vue'
const config = { msg: String }
export default {
name: 'vue3-helloworld-webpack',
props : config,
setup(props) {
console.log("setup() is invoked")
console.log(props.msg);
onMounted(function () {
console.log("Hooray!!! Onmounted() is triggered")
});
},
render() {
return h('div', {
id: 'helloworld-1'
});
}
}
src/index.js
import vue3helloworldwebpack from './vue3-helloworld-vuewebpack';
const install = (app) => {
app.component(vue3helloworldwebpack.name, vue3helloworldwebpack);
};
export default install;
Result: when the plugin is used by other very simple vue app
Content when the plugin bundled by Vue-cli
package.json
....
"main": "dist/vue3-helloworld-vuecli.umd.js",
"scripts": {
"build": "vue-cli-service build --formats umd --target lib ./src/index.js"
},
"dependencies": {
"core-js": "^3.6.5"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.5.6",
"#vue/cli-plugin-eslint": "^4.5.6",
"#vue/cli-plugin-unit-jest": "^4.5.6",
"#vue/cli-service": "^4.5.6",
"#vue/compiler-sfc": "^3.0.0-rc.10",
"#vue/test-utils": "^2.0.0-beta.5",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.3.0",
"eslint": "^7.9.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^7.0.0-0",
"husky": "^6.0.0",
"prettier": "^2.1.1",
"typescript": "^4.0.2",
"vue": "^3.0.0",
"vue-jest": "^5.0.0-alpha.4"
}
....
Other codes are similar to webpack version except name and webpack config file.
Result
The other simple vue3 app which is using the created plugin(vue3-helloworld-webpack)
Main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3HelloworldWebpack from 'vue3-helloworld-webpack'
createApp(App).use(Vue3HelloworldWebpack).mount('#app')
App.vue
<template> <vue3-helloworld-webpack msg="Welcome!!!!" /></template>
We can get created plugins: webpack and vue-cli versions on GitHub.
My question
Vue cli version does work. One interesting thing, the same webpack file configuration is working for vue2 plugin also.
But it does not work for vue 3 plugin, How can I do this without using vue-cli but using webpack version ?

SyntaxError: Import React from 'react' Unexpected identifier

I'm trying to run my server.js file locally but every time I try "node server.js" I get a:
SyntaxError: Unexpected Identifier for "import React from react
I'm simply trying to see if I get a console.log("connected") message in a function that accesses my database.
I have already tried adding the "transform-es2015-modules-amd" to my plugins in the package.json file in the Babel section. I have tried almost every other solution offered on Stack Overflow posts similar to mine.
package.json
{
"dependencies": {
"atob": "^2.1.2",
"axios": "^0.19.0",
"babel-loader": "^8.0.0-beta.6",
"babel-upgrade": "^1.0.1",
"btoa": "^1.2.1",
"concurrently": "^5.0.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"mysql": "^2.17.1",
"node-fetch": "^2.6.0",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-redux": "^7.1.1",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"redux": "^4.0.4",
"request": "^2.88.0",
"serialize-javascript": "^2.1.0"
},
"devDependencies": {
"#babel/cli": "^7.6.4",
"#babel/core": "^7.6.4",
"#babel/node": "^7.6.3",
"#babel/preset-env": "^7.6.3",
"#babel/preset-react": "^7.6.3",
"#types/node": "^12.11.2",
"babel-loader": "^8.0.6",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^3.2.0",
"nodemon": "^1.19.4",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.9.0",
"webpack-node-externals": "^1.7.2"
},
"babel": {
"presets": [
"#babel/preset-react",
"#babel/preset-env"
]
"plugins": [
"transform-es2015-modules-amd"
]
}
}
server.js
import React from 'react';
import { StaticRouter } from 'react-router-dom';
import { Provider as ReduxProvider } from "react-redux";
import App from '../client/src/App.js';
import { renderToString } from "react-dom/server";
import createStore, { initialize, fetchCharacters } from './store.js';
var path = require("path");
var express = require("express");
var serialize = require("serialize-javascript");
var db = require('./db');
const PORT = process.env.HTTP_PORT || 4001;
const app = express();
app.use('/static', express.static(path.join(__dirname, 'public')));
console.log(__dirname);
app.get('/*', function(req, res) {
const context = {};
const store = createStore();
store.dispatch(initialize());
Promise.all([store.dispatch(fetchCharacters())]).then(() => {
const component = (
<ReduxProvider store={store}>
<StaticRouter location={req.url} context={context}>
<App/>
</StaticRouter>
</ReduxProvider>
);
const ss_react = renderToString(component);
const ss_state = store.getState();
res.writeHead( 200, { "Content-Type": "text/html" });
res.end(htmlTemplate(component, ss_state));
});
});
function htmlTemplate(component, ss_state) {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React SSR</title>
</head>
`;
}
app.listen(PORT, () => {
console.log(`server listening at port ${PORT}. `);
});
webpack.config.js
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
const path = require('path')
const js = {
test: /\.m?(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
}
}
const css = {
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true
}
}
]
}
const serverConfig = {
mode: 'development',
target: 'node',
node: {
__dirname: false
},
externals: [nodeExternals()],
entry: {
'index.js': path.resolve(__dirname, 'server/server.js')
},
module: {
rules: [js]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]'
}
}
const clientConfig = {
mode: 'development',
target: 'web',
entry: {
'index.js': path.resolve(__dirname, 'client/src/index.js')
},
module: {
rules: [js, css]
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
output: {
path: path.resolve(__dirname, 'dist/public'),
filename: '[name]'
}
}
module.exports = [serverConfig, clientConfig]

Node does not understand React JSX. That's what Webpack is for - it uses Babel to transpile your code into vanilla JavaScript.
Looks like you have webpack-dev-server as a dev dependency, so it should already be installed (if you've done an npm install). Make sure you have something like this in your package.json scripts field:
"scripts": {
"start:dev": "webpack-dev-server --config webpack.config.js"
},
Then run npm run start:dev in your console.

published npm package es6 import does not work

I have trouble in creating a npm module that I can use via es6 imports inside other modules.
I have a folder "1" where I bundle up a simple js class file with the help of gulp:
/1/script.js
export default class npmtest1
{
static capitalize(string)
{
return string.charAt(0).toUpperCase() + string.slice(1);
}
}
/1/package.json
{
"name": "npmtest1",
"version": "1.0.0",
"main": "script.min.js",
"license": "MIT",
"dependencies": {},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-runtime": "^6.26.0",
"babelify": "^8.0.0",
"browserify": "^16.1.1",
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-uglify": "^3.0.0",
"uglify": "^0.1.5",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^2.0.0"
}
}
/1/gulpfile.js
var gulp = require('gulp'),
babelify = require('babelify'),
buffer = require('vinyl-buffer'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
uglify = require('gulp-uglify');
gulp.task('js', function()
{
return browserify({
entries: ['./script.js']
})
.transform(babelify.configure({
presets : ['es2015', 'es2017'],
plugins : ['transform-runtime']
}))
.bundle()
.on('error', function(err) { console.log(err.toString()); this.emit('end'); })
.pipe(source('script.min.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('.'));
});
gulp.task('default', ['js']);
Then I publish this module via "npm publish".
In another folder "2" I have a quite similiar setup:
/2/script.js
import npmtest1 from 'npmtest1';
alert(npmtest1.capitalize('foo'));
/2/package.json
{
"dependencies": {
"npmtest1": "^1.0.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-runtime": "^6.26.0",
"babelify": "^8.0.0",
"browserify": "^16.1.1",
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-uglify": "^3.0.0",
"uglify": "^0.1.5",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^2.0.0"
}
}
/2/gulpfile.js
var gulp = require('gulp'),
babelify = require('babelify'),
buffer = require('vinyl-buffer'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
uglify = require('gulp-uglify');
gulp.task('js', function()
{
return browserify({
entries: ['./script.js']
})
.transform(babelify.configure({
presets : ['es2015', 'es2017'],
plugins : ['transform-runtime']
}))
.bundle()
.on('error', function(err) { console.log(err.toString()); this.emit('end'); })
.pipe(source('script.min.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('.'));
});
gulp.task('default', ['js']);
When I embed script.min.js inside a html file, I get the following error:
Uncaught TypeError: i.default.capitalize is not a function
Am I missing something? This is a very basic task.

Ok, bad mistake: I tried to import a module bundled with browserify/babelify.
Instead I had to use gulp-babel to convert all js files to es2015.

Compilation takes more than 15 seconds || Babel - Gulpfile - es6 - rollup bundler

I have got a very long compilation time and I try to figure it out.
The compilation have to work for the SASS and for the javascript es6 files and for the handlebars template.
There are two parts on my web application. The first one is the nodeJs server and the other part is the web application using the nodeJS server.
See there a screenshot from my console
Any thoughts on how to help me on this?
tree :
/index.js
/package.json
/gulpfile.babel.json
/public/
src/
script/*
styles/*
template/*
/dist
package.json
{
"name": "****",
"version": "0.0.0",
"description": *****",
"main": "index.js",
"author": "****",
"private": true,
"dependencies": {
"colors": "^1.1.2",
"express": "4.13.4",
"google-auth-library": "^0.10.0",
"googleapis": "^20.1.0",
"gulp-autoprefixer": "^4.0.0",
"gulp-babel": "^7.0.0",
"handlebars": "^4.0.10",
"mongodb": "^2.2.15",
"nodemailer": "^4.0.1",
"nodemailer-mailgun-transport": "^1.3.5",
"socket.io": "^1.7.1",
"underscore": "^1.8.3",
"uuid": "^3.0.1"
},
"scripts": {
"start": "node index.js"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.22.1",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-es2015-rollup": "^3.0.0",
"babel-register": "^6.22.0",
"backbone": "^1.3.3",
"backbone-associate": "0.0.13",
"backbone.localstorage": "^1.1.16",
"backbone.marionette": "^3.2.0",
"browser-sync": "^2.18.13",
"gsap": "^1.19.1",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-declare": "^0.3.0",
"gulp-define-module": "^0.1.5",
"gulp-file": "^0.3.0",
"gulp-filter": "^5.0.0",
"gulp-handlebars": "^4.0.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-ruby-sass": "^2.1.1",
"gulp-sourcemaps": "^2.4.0",
"gulp-uglify": "^2.0.1",
"gulp-wrap": "^0.13.0",
"handlebars": "^4.0.10",
"jquery": "^3.1.1",
"merge-stream": "^1.0.1",
"rollup": "^0.41.4",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-commonjs": "^7.0.0",
"rollup-plugin-json": "^2.1.0",
"rollup-plugin-node-builtins": "^2.0.0",
"rollup-plugin-node-resolve": "^2.0.0",
"run-sequence": "^1.2.2"
},
"babel": {
"presets": [
"es2015"
]
}
}
gulfile.babel.js :
import gulp from 'gulp';
import sass from 'gulp-ruby-sass';
import { rollup } from 'rollup';
import json from 'rollup-plugin-json';
import plumber from 'gulp-plumber';
import file from 'gulp-file';
import filter from 'gulp-filter';
import rename from 'gulp-rename';
import sourcemaps from 'gulp-sourcemaps';
import runSequence from 'run-sequence';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import nodeResolve from 'rollup-plugin-node-resolve';
import builtins from 'rollup-plugin-node-builtins';
import handlebars from 'gulp-handlebars';
import wrap from 'gulp-wrap';
import declare from 'gulp-declare';
import merge from 'merge-stream';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
import defineModule from 'gulp-define-module';
import browserSync from 'browser-sync';
import {name} from './package.json';
const srcPath = 'public/src/';
function bundle(opts) { // very long ... (12s)
return rollup({
entry: srcPath + "scripts/" + name + '.js',
plugins: [
json(),
builtins(),
nodeResolve(),
commonjs(),
babel({
// sourceMaps: true,
presets: [['es2015', {modules: false}]],
babelrc: false
})
]
}).then(bundle => {
return _generate(bundle);
}).then(gen => {
gen.code += '\n//# sourceMappingURL=' + gen.map.toUrl();
return gen;
});
}
function _generate(bundle) { // long too (4s)
return bundle.generate({
format: 'iife',
moduleName: 'ATalks',
sourceMap: true
});
}
function compileScripts(buildPath) {
return bundle().then(gen => {
return file(name + '.js', gen.code, {src: true})
.pipe(plumber())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(buildPath))
.pipe(filter(['**', '!**/*.js.map']))
.pipe(rename(name + '.min.js'))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(buildPath));
});
}
function compileScriptsLight(buildPath) {
return bundle().then(gen => {
return file(name + '.js', gen.code, {src: true})
.pipe(plumber())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(buildPath))
});
}
gulp.task('sass', function () {
return sass(srcPath+'styles/all.scss')
.on('error', sass.logError)
.pipe(gulp.dest('public/dist/styles'))
.pipe(plumber())
.pipe(browserSync.stream());
});
gulp.task('scripts', function(done) {
return compileScripts('public/dist/');
});
gulp.task('scriptsLight', function(done) {
return compileScriptsLight('public/dist/');
});
gulp.task('templates', function(done){
gulp.src(['public/src/templates/*.hbs'])
.pipe(handlebars({
handlebars: require('handlebars')
}))
.pipe(defineModule('es6', {
require: {
Handlebars: "handlebars/runtime"
}
}))
.pipe(gulp.dest('public/src/templates'));
runSequence('scripts', done);
});
gulp.task('move', function() {
gulp.src([srcPath+"*.html", srcPath+"images/**", srcPath+"fonts/**"], {base: srcPath }).pipe(gulp.dest("public/dist/"));
});
gulp.task('default', function() {
browserSync.init(null, {
proxy: "http://localhost:3000",
files: ["public/dist/**/*.*"],
port: 7000
});
gulp.watch(srcPath+'/**/*.js',['scriptsLight']);
gulp.watch(srcPath+'/**/*.hbs',['templates']);
gulp.watch(srcPath+'/**/*.scss',['sass']);
gulp.watch(srcPath+'*.html',['move']);
gulp.watch(srcPath+'/images/**',['move']);
gulp.watch(srcPath+'/fonts/**',['move']);
});
gulp.task('build', ['templates', 'scripts', 'sass', 'move']);
.babelrc :
{
"presets": ["es2015"]
}

Webpack/Babel es2015 error: Uncaught SyntaxError: Unexpected token import

after looking at the possible solutions for the issue i had, couldn't find a way to solve this error:
Uncaught SyntaxError: Unexpected token import
Im stuck at this point and cant seem to solve it (feel a bit restless when trying to learn and work).
P.S. I appreciate your time and help. Im relatively a new developer, pardon me if i have asked anything stupid. thanks
For your expert review, here's the relevant files that im working with:
package.json
{
"name": "",
"version": "1.0.0",
"dependencies": {
"browser-sync": "^2.18.6",
"browsersync": "0.0.1-security",
"jquery": "^3.1.1",
"jquery-smooth-scroll": "^2.1.2",
"lazysizes": "^3.0.0-rc3",
"normalize.css": "^5.0.0",
"picturefill": "^3.0.2",
"waypoints": "^4.0.1"
},
"devDependencies": {
"autoprefixer": "^6.7.0",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-cssnano": "^2.1.2",
"gulp-imagemin": "^3.1.1",
"gulp-modernizr": "^1.0.0-alpha",
"gulp-postcss": "^6.3.0",
"gulp-rename": "^1.2.2",
"gulp-rev": "^7.1.2",
"gulp-svg-sprite": "^1.3.1",
"gulp-svg2png": "^0.3.0",
"gulp-uglify": "^2.0.1",
"gulp-watch": "^4.3.11",
"postcss-hexrgba": "^0.2.1",
"postcss-import": "^9.1.0",
"postcss-mixins": "^5.4.1",
"postcss-nested": "^1.0.0",
"postcss-simple-vars": "^3.0.0",
"webpack": "^2.2.1"
}
}
webpack.config.js
module.exports = {
entry: {
app: "./app/assets/scripts/App.js"
},
output: {
path: "./app/temp/scripts",
filename: "App.js"
},
module: {
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['es2015']
},
test: /\.js$/,
exclude: /node_modules/
}
]
}
}
App.js
import MobileMenu from './modules/MobileMenu';
var mobileMenu = new MobileMenu();
MobileMenu.js
class MobileMenu {
constructor() {
alert("testing 123")
}
}
export default MobileMenu;
scripts.js
var gulp = require('gulp'),
webpack = require('webpack');
gulp.task('scripts', ['modernizr'], function(callback) {
webpack(require('../../webpack.config.js'), function(err, stats) {
if (err) {
console.log(err.toString());
}
console.log(stats.toString());
callback();
});
});

Solution
As it seems that it doesnt really matter which version of the babel core, babel-loader we actually use. Also .babelrc file was not required for me. What worked for me was to include the bundled file in my HTML which was generated at temp/scripts/App.js, instead of including the original source at assets/scripts/App.js. Thats it ! cheers
Thanks to #MichaelJungo