Issue with 4.9.0 + webpack + typescript

web
mobile

Topic: Issue with 4.9.0 + webpack + typescript

Julien Moulin asked 3 months ago

The release 4.9.0 has multiple changes in package architecture.

SCSS Import

// @import '~mdbootstrap-pro/scss/mdb'; // 4.8.11
@import '~mdbootstrap-pro/scss/mdb-pro'; // 4.9.0

JS SideNav Import

// import {SideNav} from 'mdbootstrap-pro/js/modules/sidenav'; // 4.8.11
import {SideNav} from 'mdbootstrap-pro/js/modules/sidenav.min'; // 4.9.0

JS bsCustomFileInput Require

// (window as any).bsCustomFileInput = require('mdbootstrap-pro/js/modules/vendor/bs-custom-file-input'); // 4.8.11
// bs-custom-file-input.js doesn't exist in 4.9.0

After apply this changes, webpack builds fine, but on reload webpage, an error occured in dev console :

    app.js:28654 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
at Object.<anonymous> (app.js:28654)
at Object.push../node_modules/mdbootstrap-pro/js/mdb.js (app.js:28661)
at i (app.js:20041)
at Module.<anonymous> (app.js:37237)
at i (app.js:20041)
at Object.push../node_modules/mdbootstrap-pro/js/mdb.js (app.js:28553)
at i (app.js:20041)
at app.js:20075
at Object.<anonymous> (app.js:20076)
at Object../node_modules/mdbootstrap-pro/js/mdb.js (app.js:38642)

my webpack file

const mix = require('laravel-mix');
const babelLoader = {
    loader: 'babel-loader',
    options: {
        cacheDirectory: true,
        presets: [
            [
                "@babel/preset-env",
                {
                    "modules": "commonjs"
                }
           ]
       ],
        sourceType: "unambiguous",
        plugins: [
            "add-module-exports",
        ]
    }
};

mix.extract(['lodash', 'popper.js', 'jquery', 'axios', 'bootstrap', 'mdbootstrap-pro/js/mdb.js', 'bootstrap-notify', 'perfect-scrollbar']);
mix.autoload({'jquery': ['window.$', 'window.jQuery', '$']});

mix.js('resources/js/preloader.ts', 'public/js/preloader.js')
.js('resources/js/app.ts', 'public/js/app.js')
.sass('resources/sass/app.scss', 'public/css');

mix.webpackConfig({
    module: {
        rules: [{
            test: /\.ts(x?)$/,
            exclude: /node_modules/,
            use: [
                babelLoader,
                {
                    loader: 'ts-loader'
                }
            ]
        }, {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [
                babelLoader
            ]
        }]
    },
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: ['.ts', '.tsx', '.js']
    },
});

This Stackoverflow's thread may be helpful to find the problem : Stackoverflow


Grzegorz Bujański staff answered 3 months ago

@Julien Moulin @colazet @Kamil Ścisłowski @escees

I'm close to resolve this problem. But i'm need to a little more time. At this moment can you all test this babel config?

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": "3.0.0"
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties"
  ]
}

Kamil Ścisłowski pro commented 3 months ago

@Grzegorz Bujański , "@babel/preset-env", and "@babel/plugin-syntax-dynamic-import", are used by webpack encore by default. I've added plugin-proposal-class-properties to babel configuration in webpack.config.js but no effect :(


Julien Moulin commented 2 months ago

Same here. I tried many things, but always the same error.


Grzegorz Bujański staff commented 2 months ago

Ok. So I'm going back to work on this


Grzegorz Bujański staff answered 3 months ago

Hi,

We use webpack too, and everything is good. Look at here: https://github.com/webpack/webpack/issues/4039#issuecomment-275905257 - try remove add-module-exports plugin.

Best, Grzegorz


Julien Moulin commented 3 months ago

I have already tested with and without add-module-export, with and without @babel/plugin-transform-runtime, and many others configurations (from github issues and stackoverflow threads).

Before 4.9.0, I didn't use babel config, just the ts-loader, no more.

I switched back to 4.8.11.


Grzegorz Bujański staff commented 3 months ago

Then the last thing i can suggest is checking the code of your app to make sure your don't mix import and module.exports.

And i noticed that you used mix.js for ts file. try use mix.ts

Best, Grzegorz


Julien Moulin commented 3 months ago

I don't use module.exports. My code works perfectly with 4.8.11. I have already tested compile with mix.ts, it doesn't work. I just try with fresh tsconfig, webpackconfig, i got the same error. I only import axios.js, bootstrap.js and mdb.js and console.error says always the same thing


arumcomputer pro commented 2 months ago

For now I switched back to 4.8.11 as well and everything works just perfect. Hoping for updates to support newer versions as well.


colazet pro premium answered 3 months ago

Hi,

Same problem with my project (symfony 4 + webpack)

webpack.config.js

var Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin'); // this line tell to webpack to use the plugin<p></p>

<p>// 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');
}</p>

<p>Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/public/build')
    // only needed for CDN's or sub-directory deploy
    .setManifestKeyPrefix('build/')
    .addEntry('base', './assets/js/base.js')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    // enables @babel/preset-env polyfills
    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3
    })
    // enables Sass/SCSS support
    .enableSassLoader()
    .copyFiles({
        from: './assets/images',
        // optional target path, relative to the output dir
        // to: 'images/[path][name].[ext]',
        // if versioning is enabled, add the file hash too
        to: 'images/[path][name].[hash:8].[ext]',
        // only copy files matching this pattern
        pattern: /.(png|jpg|jpeg)$/
    })
    .autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();
module.exports.externals = [{
    'bazinga-translator': 'Translator'
}];
</p>

base.js

const $ = window.$ = window.jQuery = require('jquery');
require('mdbootstrap-pro/js/bootstrap.min');
require('mdbootstrap-pro/js/mdb.min');
import ('@fortawesome/fontawesome-pro/js/all');

Thanks in advance


I tried with 4.10.0 but I have always the same error. If i inspect logs, the error come from

/*!
 * bsCustomFileInput v1.3.2 (https://github.com/Johann-S/bs-custom-file-input)
 * Copyright 2018 - 2019 Johann-S <johann.servoire@gmail.com>
 * Licensed under MIT (https://github.com/Johann-S/bs-custom-file-input/blob/master/LICENSE)
 */
e=void 0,n=function(){var t={CUSTOMFILE:'.custom-file input[type="file"]',CUSTOMFILELABEL:".custom-file-label",FORM:"form",INPUT:"input"},e=function(e){var i="",n=e.parentNode.querySelector(t.CUSTOMFILELABEL);return n&&(i=n.innerHTML),i},i=function(t){if(t.childNodes.length>0)for(var e=[].slice.call(t.childNodes),i=0;i<e.length;i++){var n=e[i];if(3!==n.nodeType)return n}return t},n=function(e){var n=e.bsCustomFileInput.defaultText,o=e.parentNode.querySelector(t.CUSTOMFILELABEL);o&&(i(o).innerHTML=n)},o=!!window.File,r=function(t){if(t.hasAttribute("multiple")&&o)return[].slice.call(t.files).map((function(t){return t.name})).join(", ");if(-1!==t.value.indexOf("fakepath")){var e=t.value.split("\\");return e[e.length-1]}return t.value};function a(){var e=this.parentNode.querySelector(t.CUSTOMFILELABEL);if(e){var o=i(e),a=r(this);a.length?o.innerHTML=a:n(this)}}function s(){for(var e=[].slice.call(this.querySelectorAll(t.INPUT)).filter((function(t){return!!t.bsCustomFileInput})),i=0,o=e.length;i<o;i++)n(e[i])}var l="reset",c="change";return{init:function(i,n){void 0===i&&(i=t.CUSTOMFILE),void 0===n&&(n=t.FORM);for(var o=[].slice.call(document.querySelectorAll(i)),r=[].slice.call(document.querySelectorAll(n)),u=0,d=o.length;u<d;u++){var h=o[u];Object.defineProperty(h,"bsCustomFileInput",{value:{defaultText:e(h)},writable:!0}),a.call(h),h.addEventListener(c,a)}for(var f=0,p=r.length;f<p;f++)r[f].addEventListener(l,s),Object.defineProperty(r[f],"bsCustomFileInput",{value:!0,writable:!0})},destroy:function(){for(var e=[].slice.call(document.querySelectorAll(t.FORM)).filter((function(t){return!!t.bsCustomFileInput})),i=[].slice.call(document.querySelectorAll(t.INPUT)).filter((function(t){return!!t.bsCustomFileInput})),o=0,r=i.length;o<r;o++){var u=i[o];n(u),u.bsCustomFileInput=void 0,u.removeEventListener(c,a)}for(var d=0,h=e.length;d<h;d++)e[d].removeEventListener(l,s),e[d].bsCustomFileInput=void 0}}},"object"===( false?undefined:o(exports))&&void 0!==t?t.exports=n(): true&&i(84)?!(__WEBPACK_AMD_DEFINE_FACTORY__ = (n),
            __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
            (__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) :
            __WEBPACK_AMD_DEFINE_FACTORY__),
            __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)):(e=e||self).bsCustomFileInput=n(),document.addEventListener("DOMContentLoaded",(function(){bsCustomFileInput.init()}))}).call(this,i(99)(t))},function(t,e,i){"use strict";(function(t,e){var n;i(69),i(71),i(72),i(83),i(224),i(91),i(225),i(95),i(66),i(60),i(77),i(110),i(166),i(133),i(103),i(134),i(111),i(94),i(226),i(227),i(112),i(229),i(230),i(231),i(135),i(106),i(70),i(113),i(127),i(68),i(107),i(73),i(116),i(100),i(96),i(74);function o(t){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}

And espacially from the end of code at (t.exports=n() is underlined in console)

?t.exports=n(): true&&i(84)?!(__WEBPACK_AMD_DEFINE_FACTORY__ = (n),

I don't understand what i am missing !


Julien Moulin commented 3 months ago

I tried to hard edit mdb.js and replace t.exports = n() by define(n). The same error occurs again but not at same line (t.exports = n() is always underlined). So the error doesn't come from bs-custom-file-input library,...

/*!
     * Chart.js
     * http://chartjs.org/
     * Version: 2.7.3
     *
     * Copyright 2018 Chart.js Contributors
     * Released under the MIT license
     * https://github.com/chartjs/Chart.js/blob/master/LICENSE.md
     */
    ! function(n) {
        if ("object" === ( false ? undefined : o(exports)) && void 0 !== t) t.exports = n();

Grzegorz Bujański staff answered 3 months ago

Hi, Try this plugin for babel: https://www.npmjs.com/package/babel-plugin-transform-dynamic-import.


Julien Moulin commented 3 months ago

Always have the same error.

I will try to reproduce error on fresh laravel install.


Grzegorz Bujański staff commented 3 months ago

Hi. Ok. Let me know if the error occurs on a fresh installation


Julien Moulin commented 3 months ago

Bad news, I have converted all my typescript code into es2015 => same error. And with a Laravel 6 fresh install without any import => same error. I don't have babel.config.js or .babelrc files.

webpack.mix.js

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js/app.js')
    .sass('resources/sass/app.scss', 'public/css');

app.js

window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
require('mdbootstrap-pro/js/bootstrap');
require('mdbootstrap-pro/js/mdb');

package.json

"devDependencies": {
    "cross-env": "^5.1",
    "jquery": "^3.4.1",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.13",
    "mdbootstrap-pro": "git+https://oauth2:_XX@git.mdbootstrap.com/mdb/jquery/jq-pro.git#4.10.0",
    "sass": "^1.15.2",
    "sass-loader": "^7.3.1",
    "webpack": "^4.41.2"
}

I can't do more simpliest ... and it works fine in 4.8.11


Grzegorz Bujański staff commented 3 months ago

Ok, it doesn't really look good. I'll look at this more closely and try to create working a configuration for Laravel. Give me some time. I'll let you know how it went.


Julien Moulin commented 3 months ago

Thank's for your help ! Take all the time you need. I stay in 4.8.11 for now.


lemons pro premium commented 2 months ago

Waiting for the Laravel config too :)


arumcomputer pro commented 2 months ago

I am waiting as well. It is very important, I have to publish the app this month


Grzegorz Bujański staff commented 2 months ago

We are doing our best to fix it asap.


escees pro answered 3 months ago

@colazet Did you solved your problem? I have similar issue SF4 / SF5 using webpack encore to compile scss and import js. I don't know if it's related but I also encountered problem with Waves - Waves doesn't work after importing specific js and scss. Grzegorz do you have some informations which could help?


Grzegorz Bujański staff commented 3 months ago

Not yet. Still working on it


Kamil Ścisłowski pro commented 3 months ago

Thanks. Really appreciate for what you're doing here. Waiting for solution!


Julien Moulin commented 2 months ago

Maybe we could create a private github repo to reproduce and fix this problem together @Grzegorz Bujański? If help is wanted ...


Grzegorz Bujański staff commented 2 months ago

@Julien Moulin Thanks, but I'm afraid the problem is more serious than I thought. We are trying to change the configuration of our application to solve this problem.


Julien Moulin commented 2 months ago

Ok, no problem. May the force be with you !


Leenert pro commented 2 months ago

@Grzegorz Bujański Are there any updates on this issue?


Grzegorz Bujański staff commented 2 months ago

There was a problem with two libraries during testing. We try solve this problem.


Leenert pro commented 2 months ago

@Grzegorz Bujański Good to hear. Do you have an ETA already?


Grzegorz Bujański staff commented 2 months ago

Unfortunately not. This is a problem with imports and exports. Issue is: we use webpack during development -> everytching working good after build app in webpack -> someone try use webpack again on alredy building files -> Uncaught TypeError: Cannot assign to read (...) or no error in console, but some library doesn't work. We are already try many webpack configurations, and trying next ones.


NathanDePachtere pro answered 2 months ago

Do you have some update about this issue ? :)


Grzegorz Bujański staff commented 2 months ago

Still in progress. We are looking for the perfect configuration that will work in any case. This requires a lot of time to test...


NathanDePachtere pro commented 2 months ago

Ok be strong and never give up ! You gonna make it =D


MDB 4.12.0 version has just been released, but i'm still stuck in 4.8.11. When can I hope to finally do the updates ?


Allen777 pro commented 4 weeks ago

You are lucky. We are still stuck on 4.7.6 because of another Webpack issue. Looks like we will be stuck on that forever.


arumcomputer pro commented 4 weeks ago

I don’t hope so! So I guess 4.12.0 does not work as well, right?


Grzegorz Bujański staff commented 4 weeks ago

Hi. Don't worry, we won't leave it like this. In each version we improve something bit by bit. But we still have many things to do to fix it.


Julien Moulin commented 4 weeks ago

@arumcomputer Yes I tried to compile with 4.12.0 before sending my message, but no improvements.


gmartha07 pro premium answered 2 weeks ago

Any news regarding the fixing of this bug?


Grzegorz Bujański staff commented 2 weeks ago

Hi. For now I can say that the problem only appears when you add MDB via NPM and you are trying to import it from node_modules. When you add MDB directly (by downloading and unzipping) to assets, the problem does not appear. We are now trying to find a solution for installations via NPM


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.9.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Debian 9
  • Provided sample code: No
  • Provided link: Yes