Module parse failed

[ghost]

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

[bluefirex]

You need to have vue-loader installed.

[ghost]

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]

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]

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]

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]

@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]

@shlima sorry, can't remember what I did exactly.

But i gave up from SweetModal and goes with vue-js-modal

[shlima]

I have made UMD compatible build:

yarn add @shlima/sweet-modal-vue

import { SweetModal } from '@shlima/sweet-modal-vue/dist/sweet-modal.umd'

[geogamba]

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'