I am trying to install mqtt in a vue2 project through npm. However, it keeps throwing the following error:
error in ./node_modules/mqtt/lib/client.js
Module parse failed: Unexpected token (118:38)
You may need an appropriate loader to handle this file type.
| if (alias) {
| packet.topic = ''
| packet.properties = { ...(packet.properties), topicAlias: alias }
| debug('applyTopicAlias :: auto assign(use) topic: %s - alias: %d', topic, alias)
| } else {
@ ./node_modules/mqtt/lib/connect/index.js 3:19-39
I examined ./node_modules/mqtt/lib/client.js to make sure that there were not non-printable Unicode characters that could be creating this problem, but there were none. I have also tried downgrading to previous mqtt versions such as 2.18.9, 4.2.2 and 4.3.0, but the application enters an infinite loading loop. From the error, I can infer that webpack could be the root cause in this issue since it is asking to add an appropriate loader, but I am a little lost with that. Could someone give me some insight on how to add this loader to the webpack.config.js? Or if there is a better way to solve this?
This is my package.json
{
"name": "mobile-attendant",
"version": "1.3.0",
,
"scripts": {
"dev": "webpack-dev-server --host localhost --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"copy-fonts": "cpy node_modules/framework7-icons/fonts/*.* src/fonts && cpy node_modules/material-design-icons/iconfont/*.{eot,ttf,woff,woff2} src/fonts",
"postinstall": "npm run copy-fonts"
},
"files": [
"dist/**/*"
],
"dependencies": {
"axios": "0.18.0",
"framework7": "2.3.1",
"framework7-icons": "0.8.9",
"framework7-vue": "2.3.0",
"material-design-icons": "3.0.1",
"mqtt": "^4.3.7",
"simple-keyboard": "2.29.47",
"vue": "2.5.21",
"vue-i18n": "8.21.1",
"vue-resource": "1.5.1",
"webpack-war-plugin": "1.0.0-beta.3"
},
"devDependencies": {
"autoprefixer": "8.0.0",
"babel-core": "6.26.3",
"babel-helper-vue-jsx-merge-props": "2.0.3",
"babel-loader": "7.1.5",
"babel-plugin-syntax-jsx": "6.18.0",
"babel-plugin-transform-runtime": "6.23.0",
"babel-plugin-transform-vue-jsx": "3.7.0",
"babel-preset-env": "1.7.0",
"babel-preset-stage-2": "6.24.1",
"chalk": "2.4.2",
"copy-webpack-plugin": "4.6.0",
"cpy-cli": "1.0.1",
"css-loader": "0.28.11",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.11",
"friendly-errors-webpack-plugin": "1.7.0",
"html-webpack-plugin": "2.30.1",
"moment": "2.24.0",
"node-notifier": "5.3.0",
"node-sass": "4.11.0",
"optimize-css-assets-webpack-plugin": "3.2.0",
"ora": "1.4.0",
"portfinder": "1.0.20",
"postcss-import": "11.1.0",
"postcss-loader": "2.1.6",
"postcss-url": "7.3.2",
"rimraf": "2.6.3",
"sass-loader": "7.1.0",
"semver": "5.6.0",
"shelljs": "0.7.8",
"style-loader": "0.21.0",
"uglifyjs-webpack-plugin": "1.3.0",
"url-loader": "0.5.9",
"vue-loader": "13.7.3",
"vue-style-loader": "3.1.2",
"vue-template-compiler": "2.5.21",
"webpack": "3.12.0",
"webpack-bundle-analyzer": "2.13.1",
"webpack-dev-server": "2.11.3",
"webpack-merge": "4.2.1"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
And this is the webpack.config.dev.js
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path');
function resolvePath(dir) {
return path.join(__dirname, '..', dir);
}
module.exports = {
mode: 'development',
entry: [
'./src/app.js'
],
output: {
path: resolvePath('www'),
filename: 'app.js',
publicPath: ''
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolvePath('src'),
}
},
devServer: {
hot: true,
open: true,
compress: true,
contentBase: '/www/',
watchOptions: {
poll: true
}
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
include: [
resolvePath('src'),
resolvePath('node_modules/framework7'),
resolvePath('node_modules/framework7-vue'),
resolvePath('node_modules/template7'),
resolvePath('node_modules/dom7'),
resolvePath('node_modules/ssr-window'),
],
},
{
test: /\.vue$/,
use: 'vue-loader',
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
{
test: /\.styl(us)?$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'stylus-loader',
],
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'images/[name].[hash:7].[ext]'
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]'
}
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': JSON.stringify('development'),
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
filename: './index.html',
template: './src/index.html',
inject: true,
}),
new MiniCssExtractPlugin({
filename: 'app.css'
}),
new CopyWebpackPlugin([{
from: resolvePath('static'),
to: resolvePath('www/static'),
}]),
]
}
CodePudding user response：
There is a similar issue reported on the project's GitHub. The only comment suggesting a solution (written in Chinese) says they found success after downgrading to mqtt v4.2.7. The comment (google translated) says:
I solved it. The relevant plugins I installed automatically installed the 4.3.7 version of mqtt. I deleted the mqtt folder in node_modules and reinstalled [email protected]
Another possible option is Vue-Mqtt which looks to be a Vue specific implementation/wrapper of mqtt