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
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- 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