It does not work for me with WebPack

[mitar]

This looks really great. When I try to use it the following works:

import './views/*';

But this does not:

import * as Components from './components/*';

When I look in the browser to what is compiled to, I see:

/* harmony import */ var _views_Workers_vue__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./views/Workers.vue */ "./src/views/Workers.vue");
/* harmony import */ var _views_Results_vue__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./views/Results.vue */ "./src/views/Results.vue");
/* harmony import */ var _views_Jobs_vue__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./views/Jobs.vue */ "./src/views/Jobs.vue");
/* harmony import */ var _components_TestComponent_vue__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./components/TestComponent.vue */ "./src/components/TestComponent.vue");

So for some reason the code which would create Components object is missing. Otherwise it correctly detects all files.

I am using this with a project made with vue-cli where it uses WebPack and Babel.

[mitar]

So for that use case it seems one can use feature of WebPack directly: https://vuejs.org/v2/guide/components-registration.html#Automatic-Global-Registration-of-Base-Components

[vihanb]

hm unusual. Works fine with me in my webpack projects so might be some config/version issue. Can you share the webpack config that vue-cli is generating/using?

[mitar]

Here it is.

``` { mode: 'development', context: '/path/to/app', node: { setImmediate: false, process: 'mock', dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' }, output: { path: '/path/to/app/dist', filename: 'js/[name].js', publicPath: '/', chunkFilename: 'js/[name].js' }, resolve: { alias: { '@': '/path/to/app/src', vue$: 'vue/dist/vue.runtime.esm.js' }, extensions: [ '.mjs', '.js', '.jsx', '.vue', '.json', '.wasm' ], modules: [ 'node_modules', '/path/to/app/node_modules', '/path/to/app/node_modules/@vue/cli-service/node_modules' ] }, resolveLoader: { modules: [ '/path/to/app/node_modules/@vue/cli-plugin-babel/node_modules', 'node_modules', '/path/to/app/node_modules', '/path/to/app/node_modules/@vue/cli-service/node_modules' ] }, module: { noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/, rules: [ /* config.module.rule('vue') */ { test: /\.vue$/, use: [ /* config.module.rule('vue').use('cache-loader') */ { loader: 'cache-loader', options: { cacheDirectory: '/path/to/app/node_modules/.cache/vue-loader', cacheIdentifier: '71e6fb85' } }, /* config.module.rule('vue').use('vue-loader') */ { loader: 'vue-loader', options: { compilerOptions: { whitespace: 'condense' }, cacheDirectory: '/path/to/app/node_modules/.cache/vue-loader', cacheIdentifier: '71e6fb85', transformAssetUrls: { 'v-app-bar': 'src', 'v-carousel-item': [ 'src', 'lazy-src' ], 'v-img': [ 'src', 'lazy-src' ], 'v-navigation-drawer': 'src', 'v-parallax': 'src', 'v-toolbar': 'src' } } } ] }, /* config.module.rule('images') */ { test: /\.(png|jpe?g|gif|webp)(\?.*)?$/, use: [ /* config.module.rule('images').use('url-loader') */ { loader: 'url-loader', options: { limit: 4096, fallback: { loader: 'file-loader', options: { name: 'img/[name].[hash:8].[ext]' } } } } ] }, /* config.module.rule('svg') */ { test: /\.(svg)(\?.*)?$/, use: [ /* config.module.rule('svg').use('file-loader') */ { loader: 'file-loader', options: { name: 'img/[name].[hash:8].[ext]' } } ] }, /* config.module.rule('media') */ { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, use: [ /* config.module.rule('media').use('url-loader') */ { loader: 'url-loader', options: { limit: 4096, fallback: { loader: 'file-loader', options: { name: 'media/[name].[hash:8].[ext]' } } } } ] }, /* config.module.rule('fonts') */ { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, use: [ /* config.module.rule('fonts').use('url-loader') */ { loader: 'url-loader', options: { limit: 4096, fallback: { loader: 'file-loader', options: { name: 'fonts/[name].[hash:8].[ext]' } } } } ] }, /* config.module.rule('pug') */ { test: /\.pug$/, oneOf: [ /* config.module.rule('pug').oneOf('pug-vue') */ { resourceQuery: /vue/, use: [ /* config.module.rule('pug').oneOf('pug-vue').use('pug-plain-loader') */ { loader: 'pug-plain-loader' } ] }, /* config.module.rule('pug').oneOf('pug-template') */ { use: [ /* config.module.rule('pug').oneOf('pug-template').use('raw') */ { loader: 'raw-loader' }, /* config.module.rule('pug').oneOf('pug-template').use('pug-plain-loader') */ { loader: 'pug-plain-loader' } ] } ] }, /* config.module.rule('css') */ { test: /\.css$/, oneOf: [ /* config.module.rule('css').oneOf('vue-modules') */ { resourceQuery: /module/, use: [ /* config.module.rule('css').oneOf('vue-modules').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('css').oneOf('vue-modules').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('css').oneOf('vue-modules').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } } ] }, /* config.module.rule('css').oneOf('vue') */ { resourceQuery: /\?vue/, use: [ /* config.module.rule('css').oneOf('vue').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('css').oneOf('vue').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('css').oneOf('vue').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } } ] }, /* config.module.rule('css').oneOf('normal-modules') */ { test: /\.module\.\w+$/, use: [ /* config.module.rule('css').oneOf('normal-modules').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('css').oneOf('normal-modules').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('css').oneOf('normal-modules').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } } ] }, /* config.module.rule('css').oneOf('normal') */ { use: [ /* config.module.rule('css').oneOf('normal').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('css').oneOf('normal').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('css').oneOf('normal').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } } ] } ] }, /* config.module.rule('postcss') */ { test: /\.p(ost)?css$/, oneOf: [ /* config.module.rule('postcss').oneOf('vue-modules') */ { resourceQuery: /module/, use: [ /* config.module.rule('postcss').oneOf('vue-modules').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('postcss').oneOf('vue-modules').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('postcss').oneOf('vue-modules').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } } ] }, /* config.module.rule('postcss').oneOf('vue') */ { resourceQuery: /\?vue/, use: [ /* config.module.rule('postcss').oneOf('vue').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('postcss').oneOf('vue').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('postcss').oneOf('vue').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } } ] }, /* config.module.rule('postcss').oneOf('normal-modules') */ { test: /\.module\.\w+$/, use: [ /* config.module.rule('postcss').oneOf('normal-modules').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('postcss').oneOf('normal-modules').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('postcss').oneOf('normal-modules').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } } ] }, /* config.module.rule('postcss').oneOf('normal') */ { use: [ /* config.module.rule('postcss').oneOf('normal').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('postcss').oneOf('normal').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('postcss').oneOf('normal').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } } ] } ] }, /* config.module.rule('scss') */ { test: /\.scss$/, oneOf: [ /* config.module.rule('scss').oneOf('vue-modules') */ { resourceQuery: /module/, use: [ /* config.module.rule('scss').oneOf('vue-modules').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('scss').oneOf('vue-modules').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('scss').oneOf('vue-modules').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('scss').oneOf('vue-modules').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false, implementation: { run_: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, render: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, renderSync: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, info: 'dart-sass\t1.23.3\t(Sass Compiler)\t[Dart]\ndart2js\t2.5.2\t(Dart Compiler)\t[Dart]', types: { Boolean: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Color: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, List: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Map: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Null: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Number: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, String: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Error: function Error() { [native code] } } } } } ] }, /* config.module.rule('scss').oneOf('vue') */ { resourceQuery: /\?vue/, use: [ /* config.module.rule('scss').oneOf('vue').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('scss').oneOf('vue').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('scss').oneOf('vue').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('scss').oneOf('vue').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false, implementation: { run_: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, render: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, renderSync: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, info: 'dart-sass\t1.23.3\t(Sass Compiler)\t[Dart]\ndart2js\t2.5.2\t(Dart Compiler)\t[Dart]', types: { Boolean: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Color: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, List: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Map: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Null: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Number: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, String: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Error: function Error() { [native code] } } } } } ] }, /* config.module.rule('scss').oneOf('normal-modules') */ { test: /\.module\.\w+$/, use: [ /* config.module.rule('scss').oneOf('normal-modules').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('scss').oneOf('normal-modules').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('scss').oneOf('normal-modules').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('scss').oneOf('normal-modules').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false, implementation: { run_: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, render: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, renderSync: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, info: 'dart-sass\t1.23.3\t(Sass Compiler)\t[Dart]\ndart2js\t2.5.2\t(Dart Compiler)\t[Dart]', types: { Boolean: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Color: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, List: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Map: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Null: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Number: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, String: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Error: function Error() { [native code] } } } } } ] }, /* config.module.rule('scss').oneOf('normal') */ { use: [ /* config.module.rule('scss').oneOf('normal').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('scss').oneOf('normal').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('scss').oneOf('normal').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('scss').oneOf('normal').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false, implementation: { run_: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, render: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, renderSync: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, info: 'dart-sass\t1.23.3\t(Sass Compiler)\t[Dart]\ndart2js\t2.5.2\t(Dart Compiler)\t[Dart]', types: { Boolean: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Color: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, List: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Map: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Null: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Number: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, String: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Error: function Error() { [native code] } } } } } ] } ] }, /* config.module.rule('sass') */ { test: /\.sass$/, oneOf: [ /* config.module.rule('sass').oneOf('vue-modules') */ { resourceQuery: /module/, use: [ /* config.module.rule('sass').oneOf('vue-modules').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('sass').oneOf('vue-modules').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('sass').oneOf('vue-modules').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('sass').oneOf('vue-modules').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false, implementation: { run_: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, render: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, renderSync: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, info: 'dart-sass\t1.23.3\t(Sass Compiler)\t[Dart]\ndart2js\t2.5.2\t(Dart Compiler)\t[Dart]', types: { Boolean: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Color: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, List: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Map: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Null: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Number: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, String: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Error: function Error() { [native code] } } }, sassOptions: { indentedSyntax: true } } } ] }, /* config.module.rule('sass').oneOf('vue') */ { resourceQuery: /\?vue/, use: [ /* config.module.rule('sass').oneOf('vue').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('sass').oneOf('vue').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('sass').oneOf('vue').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('sass').oneOf('vue').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false, implementation: { run_: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, render: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, renderSync: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, info: 'dart-sass\t1.23.3\t(Sass Compiler)\t[Dart]\ndart2js\t2.5.2\t(Dart Compiler)\t[Dart]', types: { Boolean: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Color: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, List: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Map: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Null: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Number: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, String: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Error: function Error() { [native code] } } }, sassOptions: { indentedSyntax: true } } } ] }, /* config.module.rule('sass').oneOf('normal-modules') */ { test: /\.module\.\w+$/, use: [ /* config.module.rule('sass').oneOf('normal-modules').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('sass').oneOf('normal-modules').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('sass').oneOf('normal-modules').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('sass').oneOf('normal-modules').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false, implementation: { run_: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, render: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, renderSync: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, info: 'dart-sass\t1.23.3\t(Sass Compiler)\t[Dart]\ndart2js\t2.5.2\t(Dart Compiler)\t[Dart]', types: { Boolean: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Color: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, List: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Map: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Null: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Number: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, String: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Error: function Error() { [native code] } } }, sassOptions: { indentedSyntax: true } } } ] }, /* config.module.rule('sass').oneOf('normal') */ { use: [ /* config.module.rule('sass').oneOf('normal').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('sass').oneOf('normal').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('sass').oneOf('normal').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('sass').oneOf('normal').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false, implementation: { run_: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, render: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, renderSync: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, info: 'dart-sass\t1.23.3\t(Sass Compiler)\t[Dart]\ndart2js\t2.5.2\t(Dart Compiler)\t[Dart]', types: { Boolean: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Color: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, List: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Map: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Null: function () { return _call(f, Array.prototype.slice.apply(arguments)); }, Number: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, String: function () { return _call(f, this, Array.prototype.slice.apply(arguments)); }, Error: function Error() { [native code] } } }, sassOptions: { indentedSyntax: true } } } ] } ] }, /* config.module.rule('less') */ { test: /\.less$/, oneOf: [ /* config.module.rule('less').oneOf('vue-modules') */ { resourceQuery: /module/, use: [ /* config.module.rule('less').oneOf('vue-modules').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('less').oneOf('vue-modules').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('less').oneOf('vue-modules').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('less').oneOf('vue-modules').use('less-loader') */ { loader: 'less-loader', options: { sourceMap: false } } ] }, /* config.module.rule('less').oneOf('vue') */ { resourceQuery: /\?vue/, use: [ /* config.module.rule('less').oneOf('vue').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('less').oneOf('vue').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('less').oneOf('vue').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('less').oneOf('vue').use('less-loader') */ { loader: 'less-loader', options: { sourceMap: false } } ] }, /* config.module.rule('less').oneOf('normal-modules') */ { test: /\.module\.\w+$/, use: [ /* config.module.rule('less').oneOf('normal-modules').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('less').oneOf('normal-modules').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('less').oneOf('normal-modules').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('less').oneOf('normal-modules').use('less-loader') */ { loader: 'less-loader', options: { sourceMap: false } } ] }, /* config.module.rule('less').oneOf('normal') */ { use: [ /* config.module.rule('less').oneOf('normal').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('less').oneOf('normal').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('less').oneOf('normal').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('less').oneOf('normal').use('less-loader') */ { loader: 'less-loader', options: { sourceMap: false } } ] } ] }, /* config.module.rule('stylus') */ { test: /\.styl(us)?$/, oneOf: [ /* config.module.rule('stylus').oneOf('vue-modules') */ { resourceQuery: /module/, use: [ /* config.module.rule('stylus').oneOf('vue-modules').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('stylus').oneOf('vue-modules').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('stylus').oneOf('vue-modules').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('stylus').oneOf('vue-modules').use('stylus-loader') */ { loader: 'stylus-loader', options: { sourceMap: false, preferPathResolver: 'webpack' } } ] }, /* config.module.rule('stylus').oneOf('vue') */ { resourceQuery: /\?vue/, use: [ /* config.module.rule('stylus').oneOf('vue').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('stylus').oneOf('vue').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('stylus').oneOf('vue').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('stylus').oneOf('vue').use('stylus-loader') */ { loader: 'stylus-loader', options: { sourceMap: false, preferPathResolver: 'webpack' } } ] }, /* config.module.rule('stylus').oneOf('normal-modules') */ { test: /\.module\.\w+$/, use: [ /* config.module.rule('stylus').oneOf('normal-modules').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('stylus').oneOf('normal-modules').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('stylus').oneOf('normal-modules').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('stylus').oneOf('normal-modules').use('stylus-loader') */ { loader: 'stylus-loader', options: { sourceMap: false, preferPathResolver: 'webpack' } } ] }, /* config.module.rule('stylus').oneOf('normal') */ { use: [ /* config.module.rule('stylus').oneOf('normal').use('vue-style-loader') */ { loader: 'vue-style-loader', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('stylus').oneOf('normal').use('css-loader') */ { loader: 'css-loader', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('stylus').oneOf('normal').use('postcss-loader') */ { loader: 'postcss-loader', options: { sourceMap: false } }, /* config.module.rule('stylus').oneOf('normal').use('stylus-loader') */ { loader: 'stylus-loader', options: { sourceMap: false, preferPathResolver: 'webpack' } } ] } ] }, /* config.module.rule('js') */ { test: /\.m?jsx?$/, exclude: [ function () { /* omitted long function */ } ], use: [ /* config.module.rule('js').use('cache-loader') */ { loader: 'cache-loader', options: { cacheDirectory: '/path/to/app/node_modules/.cache/babel-loader', cacheIdentifier: '7e089dd6' } }, /* config.module.rule('js').use('babel-loader') */ { loader: 'babel-loader' } ] }, /* config.module.rule('eslint') */ { enforce: 'pre', test: /\.(vue|(j|t)sx?)$/, exclude: [ /node_modules/, '/path/to/app/node_modules/@vue/cli-service/lib' ], use: [ /* config.module.rule('eslint').use('eslint-loader') */ { loader: '/path/to/app/node_modules/eslint-loader/index.js', options: { extensions: [ '.js', '.jsx', '.vue' ], cache: true, cacheIdentifier: '035b860d', emitWarning: true, emitError: false, eslintPath: '/path/to/app/node_modules/eslint', formatter: function () { /* omitted long function */ } } } ] } ] }, optimization: { splitChunks: { cacheGroups: { vendors: { name: 'chunk-vendors', test: /[\\/]node_modules[\\/]/, priority: -10, chunks: 'initial' }, common: { name: 'chunk-common', minChunks: 2, priority: -20, chunks: 'initial', reuseExistingChunk: true } } }, minimizer: [ /* config.optimization.minimizer('terser') */ new TerserPlugin( { terserOptions: { compress: { arrows: false, collapse_vars: false, comparisons: false, computed_props: false, hoist_funs: false, hoist_props: false, hoist_vars: false, inline: false, loops: false, negate_iife: false, properties: false, reduce_funcs: false, reduce_vars: false, switches: false, toplevel: false, typeofs: false, booleans: true, if_return: true, sequences: true, unused: true, conditionals: true, dead_code: true, evaluate: true }, mangle: { safari10: true } }, sourceMap: true, cache: true, parallel: true, extractComments: false } ) ] }, plugins: [ /* config.plugin('vue-loader') */ new VueLoaderPlugin(), /* config.plugin('define') */ new DefinePlugin( { 'process.env': { NODE_ENV: '"development"', BASE_URL: '"/"' } } ), /* config.plugin('case-sensitive-paths') */ new CaseSensitivePathsPlugin(), /* config.plugin('friendly-errors') */ new FriendlyErrorsWebpackPlugin( { additionalTransformers: [ function () { /* omitted long function */ } ], additionalFormatters: [ function () { /* omitted long function */ } ] } ), /* config.plugin('html') */ new HtmlWebpackPlugin( { templateParameters: function () { /* omitted long function */ }, template: '/path/to/app/public/index.html' } ), /* config.plugin('preload') */ new PreloadPlugin( { rel: 'preload', include: 'initial', fileBlacklist: [ /\.map$/, /hot-update\.js$/ ] } ), /* config.plugin('prefetch') */ new PreloadPlugin( { rel: 'prefetch', include: 'asyncChunks' } ), /* config.plugin('copy') */ new CopyPlugin( [ { from: '/path/to/app/public', to: '/path/to/app/dist', toType: 'dir', ignore: [ '.DS_Store', { glob: 'index.html', matchBase: false } ] } ] ), /* config.plugin('VuetifyLoaderPlugin') */ new VuetifyLoaderPlugin() ], entry: { app: [ './src/main.js' ] } } ```

[vihanb]

can you also post the generated babelrc? Not sure what's going on but might have to do with plugin order

[mitar]

So the babelrc is just:

module.exports = {
  presets: [
    '@vue/app',
  ],
  plugins: [
    ['wildcard', { exts: ['vue'], noModifyCase: true }],
  ],
};

[JoNilsson]

What's up with this issue?
@mitar did you find a resolution?

[cto1win]

it will work like this:

import * as Components from './components/';