Filters plugins doesn't work with WebPack encore


Topic: Filters plugins doesn't work with WebPack encore

florian75 pro premium priority asked 4 years ago

Hello I try to use the filters plugins with Webpack encore. I try the example given :

const basicExampleFilters = document.getElementById('basic-example-filters');
const resetButton = document.getElementById('resetButton');

const filtersInstance = new Filters(basicExampleFilters);

resetButton.addEventListener('click', () => {
  filtersInstance.clear();
});

once imported into my project I get the following error message in the browser console and the filters don't work:

TypeError: undefined is not a constructor (evaluating 'new mdb_ui_kit__WEBPACK_IMPORTED_MODULE_1__"Filters"')

I imported the filters by :

import { Filters } from 'mdb-ui-kit';

I tried it: import { Filters } from 'mdb-filters'; importing by git+https://MY_TOKEN@git.mdbootstrap.com/mdb/standard/plugins/prd/filters

Did I miss something?

Thanks in advance


It is possible that the configuration of the webpack itself is inappropriate. Check what the configuration of our webpack starter looks like and try to create a similar configuration in your project: https://github.com/mdbootstrap/mdb-webpack-starter


florian75 pro premium priority commented 4 years ago

I have a classic configuration it's a symfony project.

I used the calendar, fileUpload and Inputmask plugins. I didn't have any problem with these plugins.

but the problem persists with the Filters plugins. I reinstalled a symfony skeleton project, with mdb-ui-kit installed. See my webpack config :

const Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) { 
   Encore.configureRuntimeEnvironment(process.env.NODE\_ENV || 'dev');
}

Encore 
// directory where compiled assets will be stored 
.setOutputPath('public/build/') 
// public path used by the web server to access the output path 
.setPublicPath('/build') 
// only needed for CDN's or sub-directory deploy 
//.setManifestKeyPrefix('build/')

/*
 * ENTRY CONFIG
 *
 * Each entry will result in one JavaScript file (e.g. app.js)
 * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
 */
.addEntry('app', './assets/app.js')

// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
.enableStimulusBridge('./assets/controllers.json')

// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()

// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()

/*
 * FEATURE CONFIG
 *
 * Enable & configure other features below. For a full
 * list of features, see:
 * https://symfony.com/doc/current/frontend.html#adding-more-features
 */
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())

.configureBabel((config) => {
    config.plugins.push('@babel/plugin-proposal-class-properties');
})

// enables @babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
    config.useBuiltIns = 'usage';
    config.corejs = 3;
})

// enables Sass/SCSS support
.enableSassLoader()

// uncomment if you use TypeScript
//.enableTypeScriptLoader()

// uncomment if you use React
//.enableReactPreset()

// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())

// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()


;

module.exports = Encore.getWebpackConfig();

Kind regards, Florian


Grzegorz Bujański commented 4 years ago

We have no Symfony experience, but maybe the problem lies in the babel configuration? From what I can see the configuration in the webpack starter is different than in your project.


florian75 pro premium priority answered 4 years ago

Hello I tried with the Webpack starter kit (without symfony ).

I have the same error result.

TypeError: undefined is not a constructor (evaluating 'new mdb_ui_kit_plugins_js_filters_min__WEBPACK_IMPORTED_MODULE_1__["Filters"](basicExampleFilters)')

thank you for your help.


Grzegorz Bujański commented 4 years ago

We will check it and fix it.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: MacBook Pro 16\"
  • Browser: Safari 14.0.3
  • OS: Mac OS big Sur 11.2.1
  • Provided sample code: No
  • Provided link: Yes
Tags