"export 'default' (imported as 'VueEllipseProgress') was not found in 'vue-ellipse-progress'
tonystrawberry opened this issue · 3 comments
Hello!
I have been trying to use your Vue component. But it seems to fail at compilation.
This is the error I got. I am using Docker with Rails & Webpack by the way. As instructed in the docs, I have used the following lines to import the Vue component.
// index.js
...
import VueEllipseProgress from 'vue-ellipse-progress';
Vue.use(VueEllipseProgress)
import Notifications from 'vue-notification'
Vue.use(Notifications)
...
ERROR in ./app/frontend/javascripts/classroom/index.js 7:8-26
app_1 | 01:32:47 webpack.1 | "export 'default' (imported as 'VueEllipseProgress') was not found in 'vue-ellipse-progress'
app_1 | 01:32:47 webpack.1 | at HarmonyImportSpecifierDependency._getErrors (/app/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
app_1 | 01:32:47 webpack.1 | at HarmonyImportSpecifierDependency.getErrors (/app/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
app_1 | 01:32:47 webpack.1 | at Compilation.reportDependencyErrorsAndWarnings (/app/node_modules/webpack/lib/Compilation.js:1463:22)
app_1 | 01:32:47 webpack.1 | at hooks.finishModules.callAsync.err (/app/node_modules/webpack/lib/Compilation.js:1258:10)
app_1 | 01:32:47 webpack.1 | at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
app_1 | 01:32:47 webpack.1 | at AsyncSeriesHook.lazyCompileHook (/app/node_modules/tapable/lib/Hook.js:154:20)
app_1 | 01:32:47 webpack.1 | at Compilation.finish (/app/node_modules/webpack/lib/Compilation.js:1253:28)
app_1 | 01:32:47 webpack.1 | at hooks.make.callAsync.err (/app/node_modules/webpack/lib/Compiler.js:672:17)
app_1 | 01:32:47 webpack.1 | at _done (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
app_1 | 01:32:47 webpack.1 | at _err2 (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:44:22)
app_1 | 01:32:47 webpack.1 | at _addModuleChain (/app/node_modules/webpack/lib/Compilation.js:1185:12)
app_1 | 01:32:47 webpack.1 | at processModuleDependencies.err (/app/node_modules/webpack/lib/Compilation.js:1097:9)
app_1 | 01:32:47 webpack.1 | at process._tickCallback (internal/process/next_tick.js:61:11)
app_1 | 01:32:47 webpack.1 | ℹ ｢wdm｣: Failed to compile.
This is the content of my package.json.
{
"name": "xxxxxx_app",
"private": true,
"dependencies": {
"axios": "^0.19.2",
"vue-notification": "^1.3.20",
"webpack-dev-server": "^3.11.0",
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "4.2.2",
"turbolinks": "^5.2.0",
"v-click-outside": "^3.0.1",
"vue": "^2.6.11",
"vue-ellipse-progress": "1.2.0",
"vue-loader": "^15.9.3",
"vue-router": "^3.3.4",
"vue-template-compiler": "^2.6.11",
"vuex": "^3.5.1",
"@lysyi3m/json-api-normalizer": "^1.4.2"
},
"version": "0.1.0",
"devDependencies": {
}
}
And inside my yarn.lock file.
vue-ellipse-progress@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/vue-ellipse-progress/-/vue-ellipse-progress-1.2.0.tgz#a8e21211885aba4ef82c5be455a5520915e13a59"
integrity sha512-9qWrFey4rkJU1yUVFlfIte5fy0+1bZT6XBfNvqOAllqxP8y744teI76auFoDVrM9HHHjnR1O+QY/kQjwWZH+5g==
Is there anything I did wrong?
Thank you very much!
Hey,
everything seems to be correct. And I definitely have a global export, just like vue-notification does. But I am not familiar with your dev environment, especially with rails. Is it possible that there are problems with the utilisation of the .umd.js bundle?
I googled the error, there are some reports of issues with Webpack and Babel Config. Also just try to remove the lib and install it again, this is the ultimative problem solving.
Please keep me updated if you get ahead. Maybe I should consider this issue for future builds
@setaman
Thank you very much for guiding me to the right track! Indeed, there was a problem with my babel configuration.
By removing the babel plugin @babel/plugin-transform-runtime from by babel.config.js file, the error disappeared!
I am not so familiar with Babel yet, so I don't know exactly the reason of it. Even by reading the documentation: https://babeljs.io/docs/en/babel-plugin-transform-runtime
If by any chance, you could explain the problem, I would be grateful!
Thank you!
I am also not a Babel expert. In most cases the default configuration is sufficient for me, especially in vue-cli projects. I only confront Babel when I have such errors, also when using other libraries. I would also recommend to use the most recent version of Webpack and Babel Tools.