I am attempting to make a very large Vue app. It’s not large yet, but it will be. So, I decided to use single file conponents. I’m following this tutorial, and I’ve done all the initial set up, ran node run serve and encountered this error:
which is a bit of a problem. My
webpack.config.js file is the following:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new VueLoaderPlugin(),
]
};
Of course, it might be nothing to do with the webpack as suggested in the title, so I’ll give you my package.json and .babelrc.js files, as they’re really the only possible suspects.
package.json:
{
"name": "litespeed",
"description": "",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"serve": "webpack-dev-server --mode production"
},
"keywords": [ ],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1",
"babel-loader": "^8.1.0",
"css-loader": "^5.0.0",
"html-webpack-plugin": "^4.5.0",
"rimraf": "^3.0.2",
"vue": "^2.6.12",
"vue-loader": "^15.9.3",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.2.0",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^3.11.0"
}
}
.babelrc.js:
module.exports = {
presets: ['@babel/preset-env'],
}
and of course you can check out all the code at glitch.com/edit/#!/litespeed.
Of course, it may be a Glitch specific thing. I don’t know.
Anyway, thanks for any help you can provide!
