Javascript error at project launch


Topic: Javascript error at project launch

Kiril asked 5 years ago

Hi, We just purchased MDB pro and we've installed it with NPM with our token.

We're trying to install it with a sample ASP.NET Core 2.2 project with Visual Studio 2019. We use WebPack 4. When we run the project we get the following error message: Cannot assign to read only property 'exports' of object '#'

This is the webpack.config

const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); var webpack = require('webpack');

module.exports = {

entry: [
    './wwwroot/src/js/ImportModule.js',
    './wwwroot/src/js/App.js',
    './wwwroot/src/less/Vendors.css',
    './wwwroot/src/less/Site.less'

],
plugins: [


    new MiniCssExtractPlugin({
        filename: "css/site.css"
    }),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }),
    new CopyWebpackPlugin([
        {
            from: '**/*',
            to: 'mdb-addons',
            context: path.resolve(__dirname, 'src', 'lib', 'mdb', 'mdb-addons'),
        },
    ])

],
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: [/node_modules/, /lib/],
            use: [
                'babel-loader',
                {
                    loader: 'eslint-loader',
                    options: {
                        fix: true,
                    },
                },
            ],
        },

        {
            test: /\.(css|less)$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                {
                    loader: "less-loader",
                    options: {
                        modifyVars: require('./wwwroot/Src/js/GlobalNav'),//Importation des variables globales paratgées par less, Javascript et Core
                        javascriptEnabled:true
                    }
                }
            ]
        },

        {
            test: /\.(ttf|eot|woff|woff2|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            use: {
                loader: "file-loader",
                options: {
                    name: "/css/fonts/[name].[ext]",
                },
            },
        },
        {
            test: /\.(png|jpg)$/,
            use: {
                loader: "file-loader",
                options: {
                    name: "/images/[name].[ext]",
                },
            },
        },
        {
            test: require.resolve('jquery'),
            use: [{
                loader: 'expose-loader',
                options: 'jQuery'
            }, {
                loader: 'expose-loader',
                options: '$'
            }]
        }

    ]
}

};


Grzegorz Bujański staff commented 5 years ago

Hi. I'll check this. Give me some time. I have more case witch similar issues and others technology, so i try create universal basic webpack config for all


lemons commented 5 years ago

I do have the same issue with Laravel webpack mixins. Currently I simply bundled all minified JS files by hand, as they don't change anyhow, and excluded JS from webpack mixins.


Grzegorz Bujański staff commented 5 years ago

Probably I was create proper config for webpack yesterday. But I need some more time to work out the details and test this. I hope that soon I will be able to send the correct configuration. At this moment i can tell you i use this babel config:


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

@Kiril can you test this in your project?


Kiril commented 5 years ago

Still the same.


Grzegorz Bujański staff commented 5 years ago

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


Kiril commented 5 years ago

Any news on this, I really need to package this with WebPack! I can't use the library at all. Very pricey for something I can't use!!


Grzegorz Bujański staff commented 5 years ago

Hi. Sorry about that. I almost done. Problem should be fixed in next relese.


Kiril commented 5 years ago

Great news! Thanks for the follow up.


Kiril commented 5 years ago

Any progress on that issue?


Grzegorz Bujański staff commented 5 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.10.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No