"export 'default' (imported as '__vue_script__') was not found in babel-loader for Vue Dropdown

I saw this tutorial.

So I tried adding the mdbvue depedency to my project and added an empty contiainer:

App.vue

<template>
  <div :class="$style.App">
    <DropdownMenu />
...
<script>
import DropdownMenu from './components/DropdownMenu.vue'
...

./components/DropdownMenu

<template>
  <container>
  </container>
</template>

<script>
import { Container } from 'mdbvue';
</script>

package.json

   ...
  "dependencies": {
    "@babel/helper-module-imports": "v7.0.0-beta.51",
    "mdbvue": "4.*.*",
    "vue": "2.*.*",
    "vue-router": "3.*.*"
  },
  ...
  "devDependencies": {
    "@neutrinojs/vue": "8.*.*",
    "babel-plugin-transform-runtime": "6.*.*",
    "babel-preset-stage-2": "6.*.*",
    "jquery": "3.*.*",
    "neutrino": "8.*.*",
    "webpack": "3.*.*"
  }
  ...

This results into an error saying it can’t find babel-plugin-transform-runtime.
Adding that and babel-preset-stage-2 to devDependencies and I still recieve an errorlike warning:

WARNING in ./src/components/DropdownMenu.vue
16:35-49 "export 'default' (imported as '__vue_script__') was not found in '!!../../node_modules/babel-loader/lib/index.js?{"cacheDirectory":true,"plugins":[["/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/fast-async/plugin.js",{"spec":true}],"/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/babel-plugin-syntax-dynamic-import/lib/index.js"],"presets":[["/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/babel-preset-env/lib/index.js",{"debug":false,"modules":false,"useBuiltIns":true,"exclude":["transform-regenerator","transform-async-to-generator"],"targets":{"browsers":["last 2 Chrome versions","last 2 Firefox versions","last 2 Edge versions","last 2 Opera versions","last 2 Safari versions","last 2 iOS versions"]}}]]}!../../node_modules/vue-loader/lib/selector?type=script&index=0!./DropdownMenu.vue'
    at HarmonyImportSpecifierDependency._getErrors (/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:65:15)
    at HarmonyImportSpecifierDependency.getWarnings (/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:39:15)
    at Compilation.reportDependencyErrorsAndWarnings (/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/webpack/lib/Compilation.js:702:24)
    at Compilation.finish (/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/webpack/lib/Compilation.js:565:9)
    at applyPluginsParallel.err (/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/webpack/lib/Compiler.js:502:17)
    at /home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/webpack/lib/Compilation.js:511:11)
    at processModuleDependencies.err (/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/webpack/lib/Compilation.js:481:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./src/components/DropdownMenu.vue
 @ ./node_modules/babel-loader/lib?{"cacheDirectory":true,"plugins":[["/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/fast-async/plugin.js",{"spec":true}],"/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/babel-plugin-syntax-dynamic-import/lib/index.js"],"presets":[["/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/babel-preset-env/lib/index.js",{"debug":false,"modules":false,"useBuiltIns":true,"exclude":["transform-regenerator","transform-async-to-generator"],"targets":{"browsers":["last 2 Chrome versions","last 2 Firefox versions","last 2 Edge versions","last 2 Opera versions","last 2 Safari versions","last 2 iOS versions"]}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:5000 (webpack)/hot/dev-server.js ./src/index

I get the feeling that this is not the right way to go.
What is?

Solution

./components/DropdownMenu

<script>
import { Container } from 'mdbvue';

export default {
  name: 'NavBar'
}
</script>
2 Likes

This topic was automatically closed after 60 days. New replies are no longer allowed.