bluefirex
commented
6 years ago You need to have vue-loader installed.
Open ghost opened 6 years ago
bluefirex
commented
6 years ago You need to have vue-loader installed.
ghost
commented
6 years ago vue-loader has already been installed. Here are my package.json dependencies: { "version": "1.0.0", "name": "asp.net", "private": true, "dependencies": { "axios": "^0.18.0", "core-js": "^2.5.6", "font-awesome": "^4.7.0", "vue": "2.5.16", "vue-image-upload-resize": "^1.1.6", "vue-router": "3.0.1", "vue-select": "^2.4.0", "vue-server-renderer": "2.5.16", "vue-template-compiler": "2.5.16", "vuex": "3.0.1", "vuex-router-sync": "5.0.0", "vue-tables-2": "^1.4.50", "vue-good-table": "^2.4.7", "vue2-datatable-component": "^2.3.0", "vue-toasted": "^1.1.24", "vue-notification": "^1.3.7", "mini-toastr": "^0.8.1", "vue-spinner-component": "^1.0.5", "vue-top-progress": "^0.7.0", "sweet-modal-vue": "2.0.0", "vue-gallery": "^1.3.2", "vue-awesome": "^3.0.0", "vue-quick-menu": "^1.0.7", "vue-accordion": "^1.0.0", "vue-morris": "^0.0.13", "vue-chartjs": "^3.3.1" }, "devDependencies": { "aspnet-webpack": "^2.0.1", "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-plugin-transform-async-to-generator": "^6.22.0", "babel-plugin-transform-runtime": "^6.15.0", "babel-preset-es2015": "^6.18.0", "babel-preset-stage-2": "^6.18.0", "babel-register": "^6.18.0", "babel-minify": "^0.4.1", "babel-minify-webpack-plugin": "^0.3.1", "bootstrap": "^3.3.6", "cross-env": "^3.1.3", "css-loader": "^0.26.1", "event-source-polyfill": "^0.0.7", "extract-text-webpack-plugin": "^2.0.0-rc", "file-loader": "^0.9.0", "jquery": "^2.2.1", "node-sass": "^4.1.0", "optimize-css-assets-webpack-plugin": "^1.3.1", "sass-loader": "^4.1.0", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "vue-loader": "^10.0.2", "webpack": "^2.2.0", "webpack-hot-middleware": "^2.12.2" } }
ghost
commented
6 years ago and My webpack.config.js
const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const bundleOutputDir = './wwwroot/dist';
module.exports = (env) => { const isDevBuild = !(env && env.prod); return [{ stats: { modules: false }, entry: { 'admin': './ClientApp/admin.js', 'website': './ClientApp/website.js' }, resolve: { extensions: ['*','.jsx', '.js', '.vue'], alias: { 'vue$': 'vue/dist/vue', 'components': path.resolve(dirname, './ClientApp/components'), 'views': path.resolve(dirname, './ClientApp/views'), 'utils': path.resolve(dirname, './ClientApp/utils'), 'api': path.resolve(dirname, './ClientApp/store/api') } }, output: { path: path.join(__dirname, bundleOutputDir), filename: '[name].js', publicPath: '/dist/' }, module: { rules: [ { test: /.vue$/, include: /ClientApp/, use: 'vue-loader' }, { test: /.js$/, include: /ClientApp/, use: 'babel-loader' }, { test: /.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) }, { test: /.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } ] }, plugins: [ ].concat(isDevBuild ? [ // Plugins that apply in development builds only new webpack.SourceMapDevToolPlugin({ filename: '[file].map', // Remove this line if you prefer inline source maps moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk }) ] : [ // Plugins that apply in production builds only new webpack.optimize.UglifyJsPlugin(), new ExtractTextPlugin('site.css') ]) }]; };
willjosefi
commented
6 years ago Seems i had the same issue.
I'm using webpack 4 with vue-loader and it's not working.
I tried:
import SweetModal from 'sweet-modal-vue';
import SweetModal from 'sweet-modal-vue/src/plugin';
import SweetModal from 'sweet-modal-vue/src/main';
But i'm always getting some error related to:
Module not found: Error: Can't resolve './components/SweetModal'
The only way that i could found to compile is using:
import SweetModal from 'sweet-modal-vue/dist/sweet-modal';
But this definitely shouldn't be a solution
:(
bluefirex
commented
6 years ago Thanks for your inputs. We're working on SweetModal 3.0 at the moment which will feature a proper loading mechanism as well as many many many fixes to Webpack and a few features. Can't announce a time frame yet, though.
shlima
commented
5 years ago @willjosefi
import SweetModal from 'sweet-modal-vue/dist/sweet-modal';Seems does not work for me (returns an empty object). How did you achieve this ?
willjosefi
commented
5 years ago @shlima sorry, can't remember what I did exactly.
But i gave up from SweetModal and goes with vue-js-modal
shlima
commented
5 years ago I have made UMD compatible build:
yarn add @shlima/sweet-modal-vueimport { SweetModal } from '@shlima/sweet-modal-vue/dist/sweet-modal.umd'
geogamba
commented
5 years ago I'm currently exploring this package and I'm having the same issue. I just call the component directly for now so i don't have to modify the package.
import SweetModal from 'sweet-modal-vue/src/components/SweetModal.vue'
import SweetModalTab from 'sweet-modal-vue/src/components/SweetModalTab.vue'
Error in in ./~/sweet-modal-vue/src/components/SweetModal.vue: Module parse failed: ...\SweetModal.vue Unexpected token (1:0) You may need an appropriate loader to handle this file type. | | <!-- | SweetModal for Vue.js