Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDB Pro Js via NPM CSS error

Cyprien Aubry pro asked 5 years ago


Hello, I am running a Symfony 3 project and I am using Webpack Encore.

Expected behavior

Running yarn encore dev should just compile my JS files using Webpack Encore.

Actual behavior

*/
 ^
      Invalid CSS after "...ue, d: duration": expected 1 selector or at-rule, was "jQuery.easing['jswi"
      in E:\wamp64\www\fidzee\node_modules\mdbootstrap-pro\js\mdb.js (line 102, column 3)

Resources (screenshots, code snippets etc.)

webpack.config.js:

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

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore

    .setOutputPath('web/build/')
    .setPublicPath('/build')

    .addEntry('app', './assets/js/app.js')

    .splitEntryChunks()

    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    /*.configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3
    })*/

    .enableSassLoader()

    .enableIntegrityHashes(Encore.isProduction())

    .autoProvidejQuery()

    .addPlugin(new TerserPlugin({
        parallel: true,
        sourceMap: !Encore.isProduction()
    }))
;

module.exports = Encore.getWebpackConfig();

My app.js:

const $ = require('jquery');

import '../scss/app.scss'

My app.scss:

@import "~mdbootstrap-pro";

Piotr Glejzer staff answered 5 years ago


Hi,

it's hard to say that but we don't have any instructions on how to integrate our packages with Symphony 3 ( Webpack Encore etc.) so we can't help with that because we can't imitate this problem. Sorry about that. Have a nice day.

Best,
Piotr


Cyprien Aubry pro commented 5 years ago

I said it was a Symfony project for the context but it's rather a basic Webpack environment. The error is purely CSS/JS error with Webpack.


Piotr Glejzer staff commented 5 years ago

Yes but you are using Webpack Encore from Symphony, not normal Webpack, I don't know how it working with CSS/JS. We don't use it. I only can this to our task to check it.


Cyprien Aubry pro commented 5 years ago

Does MDB jQuery work with classic Webpack?


Piotr Glejzer staff commented 5 years ago

Yes, it is. We have boilerplate about webpack and here is a tutorial about that https://mdbootstrap.com/articles/jquery/md-bootstrap-webpack-tutorial/.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.9
  • Device: PC
  • Browser: Chrome
  • OS: Window 10 Pro
  • Provided sample code: Yes
  • Provided link: No