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?