Topic: MDBVue Pro + Regular Webpack (No @vue/cli)

Guillaume Maka pro asked 5 years ago


Hi

I try to use the mdbvue in my project, I don't use the @vue/cli for my project, I use a regular webpack.config.js file

When I import any component import { ... } from 'mdbvue

I got this kind of error from webpack

ERROR in ./node_modules/mdbvue/src/index.js
Module not found: Error: Can't resolve './components/pro/Advanced/Lightbox' in 
'/Users/guillaume/Developer/javascript/admin-app/node_modules/mdbvue/src'
 @ ./node_modules/mdbvue/src/index.js 120:0-75 161:0-451:2 161:0-451:2
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader- 
 options!./src/Dashboard/assets/js/vue/transaction-finder/TransactionFinder.vue? 
 vue&type=script&lang=js&
 @ ./src/Dashboard/assets/js/vue/transaction-finder/TransactionFinder.vue? 
 vue&type=script&lang=js&
 @ ./src/Dashboard/assets/js/vue/transaction-finder/TransactionFinder.vue
 @ ./src/Dashboard/assets/js/vue/transaction-finder/index.js
 @ multi ./src/Dashboard/assets/js/vue/transaction-finder/index.js

Webpack config:

/*
    ./webpack.config.js
*/

const path = require("path");
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const BUILD_DIR = path.resolve(__dirname, "public", "assets");
const SRC_MODULE_DIR = path.resolve(__dirname, "src");

const devMode = process.env.NODE_ENV === "development";

const plugins = [
    new webpack.EnvironmentPlugin({
        NODE_ENV: devMode ? "development" : "production",
        DEBUG: false,
    }),
    new CleanWebpackPlugin(BUILD_DIR),
    // new webpack.HotModuleReplacementPlugin(),
    new CopyWebpackPlugin([
        {
            from: path.resolve(SRC_MODULE_DIR, "App", "assets", "vendor"),
            to: path.resolve(BUILD_DIR, "vendor"),
        },
    ]),
    new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        outputPath: path.resolve(BUILD_DIR, "styles"),
        filename: "[name].css",
        chunkFilename: "[id].css",
        disable: false,
        allChunks: true,
    }),
    new VueLoaderPlugin(),
];
const config = {
    mode: devMode ? "development" : "production",
    entry: {
        "js/profile.component": [
            path.resolve(SRC_MODULE_DIR, "Dashboard", "assets", "js", "components", "profile-component", "index.js"),
        ],
        "js/patients-select.component": [
            path.resolve(SRC_MODULE_DIR, "Dashboard", "assets", "js", "components", "patients-select-component", "index.js"),
        ],
        "js/app.module": [
            path.resolve(SRC_MODULE_DIR, "App", "assets", "js", "index.js"),
        ],
        "styles/app.module": [
            path.resolve(SRC_MODULE_DIR, "App", "assets", "scss", "index.scss"),
        ],
        "styles/evaluate.module": [
            path.resolve(SRC_MODULE_DIR, "Dashboard", "assets", "scss", "evaluate.scss"),
        ],
        "js/auth.module": [
            path.resolve(SRC_MODULE_DIR, "Auth", "assets", "js", "index.js"),
        ],
        "js/permissions-field.component": [
            path.resolve(SRC_MODULE_DIR, "Admin", "assets", "js", "components", "permissions-field", "index.js"),
        ],
        "js/roles-field.component": [
            path.resolve(SRC_MODULE_DIR, "Admin", "assets", "js", "components", "roles-field", "index.js"),
        ],
        "js/delete-button.component": [
            path.resolve(SRC_MODULE_DIR, "Admin", "assets", "js", "components", "delete-button", "index.js"),
        ],
        "js/i18n": [
            path.resolve(SRC_MODULE_DIR, "App", "assets", "js", "i18n.js"),
        ],
        "styles/auth.module": [
            path.resolve(SRC_MODULE_DIR, "Auth", "assets", "scss", "index.scss"),
        ],
        "styles/auth2.module": [
            path.resolve(SRC_MODULE_DIR, "App", "assets", "scss", "auth.scss"),
        ],
        "styles/dashboard.module": [
            path.resolve(SRC_MODULE_DIR, "Dashboard", "assets", "scss", "index.scss"),
        ],
        "js/dashboard.module": [
            path.resolve(SRC_MODULE_DIR, "Dashboard", "assets", "js", "index.js"),
        ],
        "js/input-select.component": [
            path.resolve(SRC_MODULE_DIR, "Dashboard", "assets", "js", "components", "input-select-component", "index.js"),
        ],
        "styles/admin.module": [
            path.resolve(SRC_MODULE_DIR, "Admin", "assets", "scss", "index.scss"),
        ],
        "js/affiliation.component": [
            path.resolve(SRC_MODULE_DIR, "Dashboard", "assets", "js", "components", "affiliation-component", "index.js"),
        ],
        "js/evaluation.component": [
            path.resolve(SRC_MODULE_DIR, "Dashboard", "assets", "js", "components", "evaluation-component", "index.js"),
        ],
        "js/buy.component": [
            path.resolve(SRC_MODULE_DIR, "Dashboard", "assets", "js", "vue", "evaluation-buy", "index.js"),
        ],
        "js/widgets.component": [
            path.resolve(SRC_MODULE_DIR, "Dashboard", "assets", "js", "vue", "widget", "index.js"),
        ],
        "js/geolocation.component": [
            path.resolve(SRC_MODULE_DIR, "Dashboard", "assets", "js", "vue", "geolocation", "index.js"),
        ],
        "js/auth2.component": [
            path.resolve(SRC_MODULE_DIR, "Auth", "assets", "js", "vue", "index.js"),
        ],
        "js/transaction-finder.component": [
            path.resolve(SRC_MODULE_DIR, "Dashboard", "assets", "js", "vue", "transaction-finder", "index.js"),
        ],
    },
    devtool: "source-map",
    externals: {
        "react/addons": true,
        "react/lib/ExecutionEnvironment": true,
        "react/lib/ReactContext": true,
        "react-addons-test-utils": "react-dom",
        jquery: "jQuery",
    },
    output: {
        path: path.resolve(BUILD_DIR),
        filename: "[name].js",
    },
    plugins,
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js', // 'vue/dist/vue.common.js' for webpack 1
        },
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            },
            {
                test: /\.(js)$/,
                use: [
                    { loader: "babel-loader" },
                ],
                exclude: /node_modules/,
            },
            {
                test: /\.jsx$/,
                use: [
                    { loader: "babel-loader" },
                ],
                exclude: /node_modules/,
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader",
                ],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.css$/,
                use: [
                    devMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                ],
            },
        ],
    },
};

module.exports = config;

Webpack version:

  • webpack": "^4.5.0"
  • webpack-cli": "^3.0.0"

Mikołaj Smoleński staff answered 5 years ago


Hi there, your project structure is different from the Vue standards. There are no App.vue and main.js files which are necessary to work with our library. Please consider migration to the latest Vue CLI.

Best regards


Guillaume Maka pro commented 5 years ago

Yes I don't use an App.vue because I don't need it, my project structure follow a Zend Expressive 3 PHP project structure. So that why I don't have App.vue the application is not a Vue application, I only use Vue to build all my components. And so far it works great without MDBVue.

Its very strange that the MDBVue need the vue-cli to work, and can't work with a common tool as webpack.

I will stick with mdbpro+jquery and build my own Vue components around it.

Is it possible to get a refund for the MDBVue Pro ? I won't use the library for my current/future projects.

Regards.


Mikołaj Smoleński staff commented 5 years ago

There is one possiblity for you. You can copy all mdbvue components for example from node_modules/mdbvue/src/components dir and paste t your src dir. Then you can use them in the same way as you use SampleProCardComponent.vue.

Best regards


Guillaume Maka pro commented 5 years ago

Hi,

l already tried copying the src directory from node_module and from the archive available after purchase, but I had the same issue of webpack not be able to resolve PRO components and no be able parsing styles in .vue files (Even if configuring aliases in the resolve configuration section).

I don't have more time fighting with tooling...

Reqards.


Mikołaj Smoleński staff answered 5 years ago


Hi there,

Vue CLI is not necessary in your project. I suppose the problem is that you want to use PRO version but in fact you have just a free version of MDB in your dependencies. How did you install the dependency? Could you please check if you have pro dir inside node_modules/mdbvue/src?

Best regards


Guillaume Maka pro commented 5 years ago

Hi there,

Yes I install mdbvue pro via yarn add git+https://oauth2:...@git.mdbootstrap.com/mdb/vue/vu-pro.git

and the pro directory is present in node_modules/mdbvue/src/components


Mikołaj Smoleński staff commented 5 years ago

I will need to check your project to fix that issue. Can you share it with us? Best way is to send it as a zipped package (without node_modules) directly to me: m.smolenski@mdbootstrap.com

Best regards


Guillaume Maka pro commented 5 years ago

Hi, Unfortunately, I can share the full project as it required a lot internal dependencies not available outside, but I can make a base skeleton of it with just the webpack / babel / config and the package.json and sample a VueJS code snippet


FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.6.0
  • Device: Any
  • Browser: Any
  • OS: Mac OS X
  • Provided sample code: Yes
  • Provided link: No