Issue with 4.9.0 + webpack + typescript

Topic: Issue with 4.9.0 + webpack + typescript

Julien Moulin free asked 4 years 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

Add comment

Grzegorz Bujański staff answered 4 years ago

0 1 Best answer

Please insert min. 20 characters.

@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 free commented 4 years 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 free commented 4 years ago

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

Grzegorz Bujański staff commented 4 years ago

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

Add comment

Allen777 pro answered 3 years ago

0 0 Best answer

Everyone, I created a new Post, hopefully to get an answer when this problem will be fixed. Please upvote it so it may get some attention at last. Thank you!

MDBootstrap is no longer compatible with Webpack and TypeScript

Add comment

Victor Rivero premium answered 3 years ago

0 0 Best answer

Hello, Is this fixed on 4.18.0 and if not should I just copy the zip files to the resources folder in laravel and import them from there?

Grzegorz Bujański staff commented 3 years ago

Many solutions have been created that allow MDB to be added via NPM. Check for example this post: https://mdbootstrap.com/support/jquery/latest-version-of-mdb-not-compatible-with-webpack/

Add comment

Horror Coder free answered 4 years ago

0 1 Best answer

I'm running too Laravel 6, mdb 4.25.3 and webpack 4 on win10 machine, tried the above fix but getting this error, seems something related to babel but I don't have any knowledge about it...any suggestion?

ERROR in ./resources/js/app.jsModule build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.

Grzegorz Bujański staff commented 4 years ago

Hi. Current MDB jQuery version is 4.14.0. I think you use MDB React, right?

Add comment

Julien Moulin free answered 4 years ago

2 1 Best answer

For now, compile project with webpack and MDB via NPM doesn't work... But, the (temporary) solution of <a href="/profile/?id=82601" target="_blank" rel="nofollow">@Grzegorz Bujański</a> works. Here is my config to successfully compile with mdb 4.14.0, Laravel 6 and webpack 4 :

<hr>

architecture

<pre class="prettyprint"><code>/app
/node_modules * you can remove mdbootstrap from package.json *
/resources
 /js
 app.js
 /scss 
 app.scss
 /mdbootstrap-pro * -> extracted from zip *
 /js
 mdb.js
 bootstrap.js
 /css
 bootstrap.css
 /scss
 mdb-pro.scss * or mdb-free.scss for free licence *
/webpack.mix.js
/package.json
</code></pre>

<hr>

/resources/js/app.js

<pre class="prettyprint"><code>window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
require('./../mdbootstrap-pro/js/bootstrap');
require('./../mdbootstrap-pro/js/mdb');
</code></pre>

<hr>

/resources/scss/app.scss

<pre class="prettyprint"><code>@import './../mdbootstrap-pro/css/bootstrap.min.css';
@import './../mdbootstrap-pro/scss/mdb-pro';
</code></pre>

<hr>

/webpack.mix.js

<pre class="prettyprint"><code>const mix = require('laravel-mix');

// you can use .babelrc or babel.config.js instead
mix.babelConfig({ 
    "presets": [
        [
            "@babel/preset-env",
            {
                'corejs': 3,
                'useBuiltIns': 'usage'
            }
        ],
    ],
});

mix.autoload({'jquery': ['window.$', 'window.jQuery', '$']})
 .js('resources/js/app.js', 'public/js')
 .sass('resources/sass/app.scss', 'public/css');
</code></pre>

<hr>

/package.json

<pre class="prettyprint"><code>{
 ...,
 "devDependencies": {
 "@babel/preset-env": "^7.8.6",
 "core-js": "^3.6.4",
 ..., 
 }
}
</code></pre>

<hr>

I hope this config will help some of you.

--- Edit :

If you have some issues with jQuery import (from mdb)

<ol>
<li>Try to use jQuery from node_modules => npm install --save jquery</li>
<li>Try to remove the mix.autoload rule in webpack.mix.js</li>
</ol>

Please insert min. 20 characters.

For now, compile project with webpack and MDB via NPM doesn't work... But, the (temporary) solution of @Grzegorz Bujański works. Here is my config to successfully compile with mdb 4.14.0, Laravel 6 and webpack 4 :

architecture

/app
/node_modules * you can remove mdbootstrap from package.json *
/resources
    /js
        app.js
    /scss 
        app.scss
    /mdbootstrap-pro  * -> extracted from zip *
        /js
            mdb.js
            bootstrap.js
        /css
            bootstrap.css
        /scss
            mdb-pro.scss * or mdb-free.scss for free licence *
/webpack.mix.js
/package.json

/resources/js/app.js

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

/resources/scss/app.scss

@import './../mdbootstrap-pro/css/bootstrap.min.css';
@import './../mdbootstrap-pro/scss/mdb-pro';

/webpack.mix.js

const mix = require('laravel-mix');

// you can use .babelrc or babel.config.js instead
mix.babelConfig({ 
    "presets": [
        [
            "@babel/preset-env",
            {
                'corejs': 3,
                'useBuiltIns': 'usage'
            }
        ],
    ],
});

mix.autoload({'jquery': ['window.$', 'window.jQuery', '$']})
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

/package.json

{
    ...,
    "devDependencies":  {
        "@babel/preset-env": "^7.8.6",
        "core-js": "^3.6.4",
        ...,    
    }
}

I hope this config will help some of you.

--- Edit :

If you have some issues with jQuery import (from mdb)

Try to use jQuery from node_modules => npm install --save jquery
Try to remove the mix.autoload rule in webpack.mix.js

Grzegorz Bujański staff commented 4 years ago

Thank you for sending full configuration with good description. I think this will help many people.

spidey priority commented 4 years ago

I used the exact code you provided here on a Laravel fresh installation, but I get the following errors: app.js:21692 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

jquery is included as in your example from npm and the babel config are applied like you specified. I tried to switch to the local jquery file provided with the MDB zip which is the same version 3.4.1, but then I get the following error: Uncaught TypeError: Cannot read property 'defaults' of undefined: $.extend($.fn.pickadate.defaults,{selectMonths:!0 ... }

I didn't used any pickadate input field.

Please insert min. 15 characters.

Grzegorz Bujański staff commented 4 years ago

If you have any error when you tried use local jquery file please install jquery via npm.

Julien Moulin free commented 4 years ago

@spidey I'm sorry but I just retry with a laravel fresh install (6 & 7) and my config work's fine.

Ubuntu : 19 Node : v11.15.0 NPM : v6.7.0

spidey priority commented 4 years ago

@Grzegorz Bujański I thought I might be wrong or something, so I just updated my Node to 12.6.1, npm 6.13.4 then I created a new Laravel 7.0 using composer and just copied the MDB files as you said, added @babel and core dependencies to package.json, added the config within webpack.json and imported MDB scss and js files as you said in your very clear instuctions. The compilation works, it's true, there are no errors, everything is green as the assets are also imported from MDB and so on, but in the browser's console still DOESN'T work. It's the same like I said early. In my app.js, I have used the npm version of jquery and in the browser's console I get: "Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript." , so I tried to use the jquery version included in the MDB files like this: window.$ = window.jQuery = require('./../mdbootstrap-pro/js/jquery'); but then I get the following in the browser's console: "Uncaught TypeError: Cannot read property 'defaults' of undefined" I am using MDB for more then one year, so I am familiar using it, and I always use the js file from the zip file and not the npm version. I use it always with Laravel and I didn't have problems since version 4.10 I think. There must be a problem somewhere, have you also tested in the browser and it was working ? or you only tested the compilation ? We really need to have a solution for this even temporarry..In my last projects I used the min version included within the master layout, but I have some other issues when I interact with more js stuff.

<a href="/profile/?id=82601" target="_blank" rel="nofollow">@Grzegorz Bujański</a> I thought I might be wrong or something, so I just updated my Node to 12.6.1, npm 6.13.4 then I created a new Laravel 7.0 using composer and just copied the MDB files as you said, added @babel and core dependencies to package.json, added the config within webpack.json and imported MDB scss and js files as you said in your very clear instuctions. The compilation works, it's true, there are no errors, everything is green as the assets are also imported from MDB and so on, but in the browser's console still DOESN'T work. It's the same like I said early. In my app.js, I have used the npm version of jquery and in the browser's console I get: "Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript." , so I tried to use the jquery version included in the MDB files like this: window.$ = window.jQuery = require('./../mdbootstrap-pro/js/jquery'); but then I get the following in the browser's console: "Uncaught TypeError: Cannot read property 'defaults' of undefined" I am using MDB for more then one year, so I am familiar using it, and I always use the js file from the zip file and not the npm version. I use it always with Laravel and I didn't have problems since version 4.10 I think. There must be a problem somewhere, have you also tested in the browser and it was working ? or you only tested the compilation ? We really need to have a solution for this even temporarry..In my last projects I used the min version included within the master layout, but I have some other issues when I interact with more js stuff.

Please insert min. 15 characters.

Grzegorz Bujański staff commented 4 years ago

After compile i add several components and test it ( for example Sidenav, Material Select, date picker) and everything work fine. Also Julien tested this, and its works fine for him.

Can you check which component the error points to?

spidey priority commented 4 years ago

@Grzegorz Bujański thanks for your help, but Im afraid the issue is still present. Ive tested also on another computer and I have the same issue. Maybe Im doing something wrong. That's why Ive made some screenshots of files Ive changed so you or Julien who is also using Laravel or anybody else can help me/others fix this. https://drive.google.com/open?id=1NN4kgpLbUA6bziKqvbW5lVWOQ3-0mzIf As you may see in the screenshots, in my app.js file, Im calling the jQuery from node or the local one from mdb zip file, so there's those different browser errors. Again, I confirm that the compilation is running without any problems, but of course because of those browser errors, components cannot be called/used.

Please insert min. 15 characters.

Grzegorz Bujański staff commented 4 years ago

Sorry but i don't see any errors in your config. Hard to say why this solution didn't work in Your case. Please check which component the error points to.

arumcomputer free commented 4 years ago

I think it will be the better solution that you fix the npm installation. I do not update the version because newest version to not work anymore. There are many people who paid you for your work - so please fix the npm installation with Laravel...

spidey priority commented 4 years ago

@Grzegorz Bujański it points to date picker (pickadate): https://drive.google.com/open?id=1QAELDTksMNYGT7T9jerQxLbFs3m2VIrl

Grzegorz Bujański staff commented 4 years ago

Sorry but i can't reproduce this error. For the first time I see him refer to this component.

spidey priority commented 4 years ago

I`ve sent you a private message so you can download and setup a sample repository using my configurations. thanks in advice

Grzegorz Bujański staff commented 4 years ago

Ok. I'm import jQuery from node_modules (not from MDB package) and delete autoload in webpack.mix.js and it's working now.

P.S. Please change the repository to private. Sharing the MDB-Pro source code violates the license terms.

spidey priority commented 4 years ago

@Grzegorz Bujański you are right.. now it's working. thanks for your help. Repo is now private.

Grzegorz Bujański staff commented 4 years ago

I glad I could help. Best, Grzegorz

Tenarius free commented 4 years ago

Thank you for your configuration (above). But this unfortunately dont work for me. The only thing that works for me is if I enter MDB directly into my HTML code with <script src ="./../node_modules/mdbootstrap-pro/js/mdb.min.js "> </script>.

Grzegorz Bujański staff commented 4 years ago

Do you have any errors in console when you using this config?

Add comment

Grzegorz Bujański staff answered 4 years ago

0 0 Best answer

Can you add mdb directly to your project (not via npm), import mdb in app.js file and test this config?

mix.js('resources/js/app.js', 'public/js')
.babelConfig({
    "presets": [
      [
        "@babel/preset-env",
        {
            "useBuiltIns": "usage",
            "corejs": "3.0.0"        
        }
      ]
    ]
  }
)

Julien Moulin free commented 4 years ago

I'm going to test this today, but what's the difference between mdb.js from ZIP and mdb.js from NPM?

Edit: I just made a simpliest project with a static page, but I don't have any errors in browser's console. So, it's a very good news ! (4.14.0 from ZIP)The "core-js" lib dependancy have changed ? I have replaced "corejs: "^1.0.0" to "core-js": "^3.6.4" in my package.json to compile fine with webpack.

Edit2: I have test with NPM too, and the first difference is that I need to install "chart.js" lib dependancy via NPM to compile fine with webpck. But indeed, I still have the error 'Cannot assign to read only property 'exports' of object '#' via NPM

Please insert min. 15 characters.

arumcomputer free commented 4 years ago

So the NPM Version is working, right?

Julien Moulin free commented 4 years ago

@arumcomputer strangely, it doesn't. I have compared two mdb.js content file (ZIP and NPM) and the two files are identical ... So I don't know why

Grzegorz Bujański staff commented 4 years ago

I don't know that either. I'm not such a webpack specialist, but it seems to me that webpack does not compile node_modules content and this causes later errors. So for now we recommend adding MDB via zip and using the configuration above. In the meantime we will try to solve the problem with the installation via NPM.

Julien Moulin free commented 4 years ago

I have tried to add script before run compile for copy all files in /node_modules/mdbootstrap-pro to /resources/mdboostrap-pro. (I have updated requires path obviously).

But same bug occurs. I don't think it's related to the node_modules folder, but i'm not sure

Add comment

Colin Mcleod pro answered 4 years ago

0 0 Best answer

Is this fixed in the newest (4.14) release?

Julien Moulin free commented 4 years ago

You are dreaming!

Add comment

Allen777 pro answered 4 years ago

0 0 Best answer

In case anyone wonders, yes the problem still exists in 4.13

Grzegorz Bujański staff commented 4 years ago

Unfortunately yes. Still only solution what we have is add MDB directly to your assets. We don't have any news for adding mdb via NMP

Add comment

Remco free answered 4 years ago

0 0 Best answer

i am facing the same error message trying to pull it in from mpn. Is there any news on this error? or does someone have a proper solution?

Grzegorz Bujański staff commented 4 years ago

Only solution what we have is add MDB directly to your assets. We still working on it.

Add comment

gmartha07 free answered 4 years ago

0 0 Best answer

Any news regarding the fixing of this bug?

Grzegorz Bujański staff commented 4 years 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

Add comment

Julien Moulin free answered 4 years ago

0 0 Best answer

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 years 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 free commented 4 years ago

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

Grzegorz Bujański staff commented 4 years 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 free commented 4 years ago

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

Add comment

NathanDePachtere pro answered 4 years ago

0 0 Best answer

Do you have some update about this issue ? :)

Grzegorz Bujański staff commented 4 years 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 4 years ago

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

Add comment

Kamil Ścisłowski free answered 4 years ago

0 0 Best answer

@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 4 years ago

Not yet. Still working on it

Kamil Ścisłowski free commented 4 years ago

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

Julien Moulin free commented 4 years 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 4 years 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 free commented 4 years ago

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

Leenert pro commented 4 years ago

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

Grzegorz Bujański staff commented 4 years ago

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

Leenert pro commented 4 years ago

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

Grzegorz Bujański staff commented 4 years 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.

Add comment

Grzegorz Bujański staff answered 4 years ago

0 0 Best answer

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

Julien Moulin free commented 4 years ago

Always have the same error.

I will try to reproduce error on fresh laravel install.

Grzegorz Bujański staff commented 4 years ago

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

Julien Moulin free commented 4 years 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

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

<pre class="prettyprint"><code>const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js/app.js')
 .sass('resources/sass/app.scss', 'public/css');
</code></pre>

app.js

<pre class="prettyprint"><code>window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
require('mdbootstrap-pro/js/bootstrap');
require('mdbootstrap-pro/js/mdb');
</code></pre>

package.json

<pre class="prettyprint"><code>"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"
}
</code></pre>

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

Please insert min. 15 characters.

Grzegorz Bujański staff commented 4 years 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 free commented 4 years ago

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

lemons free commented 4 years ago

Waiting for the Laravel config too :)

arumcomputer free commented 4 years ago

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

Grzegorz Bujański staff commented 4 years ago

We are doing our best to fix it asap.

arumcomputer free commented 4 years ago

ASAP in my eyes is not 3 month. Please give us a status on that.

Grzegorz Bujański staff commented 4 years ago

We find a solution, and Julien provides a working configuration above.

Add comment

Julien Moulin free answered 4 years ago

0 0 Best answer

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

<pre class="prettyprint"><code>/*!
 * 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)}
</code></pre>

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

<pre class="prettyprint"><code>?t.exports=n(): true&&i(84)?!(__WEBPACK_AMD_DEFINE_FACTORY__ = (n),
</code></pre>

I don't understand what i am missing !

Please insert min. 20 characters.

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 free commented 4 years 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();

Please insert min. 15 characters.

Add comment

colazet free answered 4 years ago

0 0 Best answer

Hi,

Same problem with my project (symfony 4 + webpack)

webpack.config.js

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

// 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('/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'
}];

</code></pre>

base.js

<pre class="prettyprint"><code>const $ = window.$ = window.jQuery = require('jquery');
require('mdbootstrap-pro/js/bootstrap.min');
require('mdbootstrap-pro/js/mdb.min');
import ('@fortawesome/fontawesome-pro/js/all');
</code></pre>

Thanks in advance

Please insert min. 20 characters.

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

Add comment

Grzegorz Bujański staff answered 4 years ago

0 0 Best answer

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 free commented 4 years 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 4 years 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 free commented 4 years 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 free commented 4 years 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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.9.0
Device: Desktop
Browser: Chrome
OS: Debian 9
Provided sample code: No
Provided link: Yes

Julien Moulin

80Support score
5Questions 4Answers 2Snippets