Develop Reference

Class constructor Controller canno tbe invoked without 'new' error Stimulus + webpack

I have a project where Im trying to install stimulus and stimulus tailwind components
I added webpack and a webpack config file :
// Webpack uses this to work with directories
const path = require('path');
// This is the main configuration object.
// Here, you write different options and tell Webpack what to do
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
],
},
// Path to your entry point. From this file Webpack will begin its work
entry: './src/js/index.js',
// Path and filename of your result bundle.
// Webpack will bundle all JavaScript into this file
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '',
filename: 'bundle.js'
},
// Default mode for Webpack is production.
// Depending on mode Webpack will apply different things
// on the final bundle. For now, we don't need production's JavaScript
// minifying and other things, so let's set mode to development
mode: 'development'
};
From what I understand using babel should transpile my es6 js to browser compatible js.
Then in src/index.js I have the stimulus code :
// Start StimulusJS
import { Application } from "#hotwired/stimulus"
const application = Application.start();
// Import and register all TailwindCSS Components
import { Alert, Autosave, Dropdown, Modal, Tabs, Popover, Toggle, Slideover } from "tailwindcss-stimulus-components"
application.register('alert', Alert)
application.register('autosave', Autosave)
application.register('dropdown', Dropdown)
application.register('modal', Modal)
application.register('tabs', Tabs)
application.register('popover', Popover)
application.register('toggle', Toggle)
application.register('slideover', Slideover)
and in the html file I require my bundle.js :
<script src="../dist/bundle.js"></script>
However I keep getting this error :
Uncaught (in promise) TypeError: Class constructor Controller cannot
be invoked without 'new'
from
tailwindcss-stimulus-components.module.js:12
Here's a link to the project
Is there something wrong with my webpack setup? How can I fix this error?

bundle web workers as integral part of npm package with single file webpack output

I am writing an npm package which is a plugin for the popular library leafletjs. I am using webpack to bundle the package. I want this package to be able to spawn and destroy some web workers on command. The web worker code is part of my source files. But I want to be able to distribute my package both as an npm module, or through a cdn, meaning it must be compiled down to a singular file that can be included through an HTML header. I am using webpack to do it. So lets say I have a worker file:
// sample.worker.js
import { doSomeStuff } from './algorithm.js';
onmessage = function (e) {
const results = doSomeStuff(e.data)
postMessage({
id: e.data.id,
message: results',
});
};
Fairly simple, but an important point here is that my worker is actually importing some code from an algorithm file, which is in turn importing some node modules. My worker is used in the main module somewhere, like this:
// plugin.js
import SampleWorker from 'worker-loader!./workers/dem.worker.js';
export function plugin(){
// do some stuff
const worker = new SampleWorker()
worker.postMessage(someData);
worker.onmessage = (event) => {};
}
My webpack config looks like this:
module.exports = {
entry: './src/index',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'my-plugin.js',
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json'],
},
module: {
rules: [
{
test: /\.worker\.js$/,
loader: 'worker-loader',
options: {
inline: 'fallback',
},
},
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
externals: { ... },
plugins: { ... }
};
This doesn't work as is - webpack tries to bundle the main bundle and each worker script file under the same name. Changing to filename: '[name].js' under output fixes this issue, but gives me many files - one for the main bundle, and another file for each worker file in my source code.
Reading the webpack options, I thought that using the inline: 'fallback' option would actually create a Blob for each worker and bundle that into the main output file. That is not happening.
So far my solution is to write my workers as blobs, like this:
// workers.js
const workerblob = new Blob([`
// cannot import in a blob!
// have to put algorithm.js code here, copy in any external module code here
onmessage = function (e) {
const results = doSomeStuff(e.data)
postMessage({
id: e.data.id,
message: results,
});
};
`])
export const sampleWorker = URL.createObjectURL(workerblob);
// my-plugin.js
import { sampleWorker } from 'workers.js'
const worker = new Worker(sampleWorker)
This does in fact work - webpack now outputs 1 single file which includes the worker code. Using a modified version of this from this answer, I can at least place my code inside a function( ...code... ){}.toString() format, so I can at least get intellisense, syntax highlighting, etc. But I cannot use imports.
How can I use webpack to bundle my workers so that the entire bundle ends up in 1 file, worker code and all?

I am having a problem building my Node app with webpack

Let me describe my problem. I have developed a Node.js application with ES6, it is a REST API using several Node modules especially from google-cloud because I am using Google Cloud Vision and Translate APIs.
Until now there is no problem, everything works as expected, but things got wrong when I wanted to run it as a service on a Windows Server. I found a way to do it here using the Node module "node-windows".
I made the service script like in that post and the service got installed and shown in the Windows services list, but when I click to start it stops immediately.
After some analyzing I remembered that I am using ES6 that needs to be transpiled to ES5 to work like a standard Node script, so I thought that building my whole app with webpack will solve that for me, but not exactly, I got my bundle.js generated with webpack without any error (just some warnings), then when I try to run it with node ./bundle.js it returns errors like :
Error: The include '/protos/google/cloud/vision/v1/image_annotator.proto' was not found.
Though I made a rule in my webpack config file to support .proto files.
This is my webpack.config.js :
module.exports = {
target: "node",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.json$/,
exclude: /node_modules/,
use: {
loader: "json-loader"
}
},
{
test: /\.proto$/,
use: {
loader: "pbf-loader"
}
},
{
test: /\.html$/,
use: {
loader: "html-loader"
}
}
]
}
};
At this level, I have no idea how to make those google-cloud .proto files to be integrated in my bundel.js, can someone please guide me ? thanks.
This is the code from grpc.js inside the #google-cloud module that tries to resolve the .proto files paths:
GoogleProtoFilesRoot.prototype.resolvePath = function (originPath, includePath) {
originPath = path.normalize(originPath);
includePath = path.normalize(includePath);
// Fully qualified paths don't need to be resolved.
if (path.isAbsolute(includePath)) {
if (!fs.existsSync(includePath)) {
throw new Error('The include `' + includePath + '` was not found.');
}
return includePath;
}
if (COMMON_PROTO_FILES.indexOf(includePath) > -1) {
return path.join(googleProtoFilesDir, includePath);
}
return GoogleProtoFilesRoot._findIncludePath(originPath, includePath);
};

react js how to import only the required function from a file and not the all functions

this is my functions.js file
export const f1 =()=>
{
console.log('palashf1');
}
export const f2 =()=>
{
console.log('palashf2');
}
and this is the main js file for react application
import {f1} from './functions';
// using f1 somewhere
when I go to console on my webpage and click the bundles I can see that f2 is also getting downloaded
Is there any version of import method that allows us to download only the js function we need and not all the functions of the file from where we are importing ?
creating a separate file for the function is the only solution ??

Please upgrade Webpack to version 2 or newer as it supports tree-shaking which eliminates unused exports.
As Webpack 2 supports native ES6 modules you must disable babel from transpiling ES6 modules to common-js format by configuring babel-loader presets (set modules: false in the es2015 preset):
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'es2015', {
modules: false
}
]
...
]
}
}
Tree-shaking should work with this configuration, inspect with the console or Webpack Bundle Analyzer Plugin.

react(es6) build by webpack has an Uncaught TypeError in browser

I have used the react.js in my project.I write react class by es6 syntax. And I build my react component with webpack, the bundle.js runs well but I found that I just can not run any other js after the bundle.js in my browser. When I run "var a = 0" in the console of browser, I got an error like this:
Uncaught TypeError: Cannot assign to read only property 'toString' of function 'function bound(var_args)
{
return InjectedScriptHost.callFunction(func, thisObject, concat(args, sl...<omitted>... }'
My version infos:
babel:6.5.2
react:0.14.5
webpack:1.12.14
My webpack config is:
module: {
loaders: [
{
test: /\.react\.js$/,
loader: 'babel',
exclude: /node_modules/
}
]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
})
]
I wanna if anyone has met some problems like this?

You don't want your babel loader to test for /\.react\.js$/ because that will match on the react library itself, and that's not what you're going for. Instead, you want the loader to test for YOUR application files matching /\.jsx?$/ (assuming your file extensions are .jsx, which they should be). Assuming the rest of your webpack configuration is good, this should work.
If you'd like me to explain further, let me know.