I have the following export statement in app.js:
export default class App {
...
}
Now I have the followinng import statement in main.js:
import App from '../../src/app.js'
This should work, I have done it always like this without problems, but somehow App is undefined.
Now when I do the following:
const App = require('../../src/app');
App is an object that contains the property 'default' which holds the 'App' class. Can someone please explain what I am missing here?
my webpack.config.js
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'development',
entry: {
'single-spa.config': './single-spa.config.js',
},
output: {
publicPath: '/dist/',
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
],
},
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
},
],
},
{
test: /\.js$/,
exclude: [path.resolve(__dirname, 'node_modules')],
loader: 'babel-loader',
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
}],
}, {
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: 'file-loader'
}]
}
],
},
node: {
fs: 'empty'
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
},
modules: [path.resolve(__dirname, 'node_modules')],
},
plugins: [
new CleanWebpackPlugin(),
new VueLoaderPlugin()
],
devtool: 'source-map',
externals: [],
devServer: {
historyApiFallback: true
}
};
.babelrc file:
{
"presets": [
"@babel/preset-env"
]
}
package.json:
{
"name": "vue-micro-frontend-sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack --config webpack.config.js -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.18.1",
"bootstrap": "^4.3.1",
"bootstrap-select": "^1.13.5",
"cross-env": "^5.1.3",
"flag-icon-css": "^3.2.1",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"jquery-ui-dist": "^1.12.1",
"jquery-validation": "^1.17.0",
"lodash": "^4.17.15",
"popper.js": "^1.12",
"sass-loader": "^8.0.0",
"select2": "^4.0.6-rc.1",
"single-spa": "^4.4.1",
"single-spa-vue": "^1.5.4",
"url-loader": "^2.2.0",
"uuid": "^3.3.2",
"vue": "^2.6.10",
"vue-router": "^3.0.2"
},
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-object-rest-spread": "^7.6.2",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.6.3",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-loader": "^0.5.5",
"image-webpack-loader": "^6.0.0",
"node-sass": "^4.13.0",
"style-loader": "^1.0.0",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
}
}
