Vue compiler fails when working ( Vue cli 3?)

[Tallyb]

Installing a component and then importing it raises an error:

on serve - the following errors exist:

'define' is not defined (no-undef) at components/product-list/dist/main.js:1:123:
and more errors...

And this is shown in the browser:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <ProductList> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/App.vue
       <Root>

STR:

1. create a new vue cli project with version 3 (npx @vue/cli create new-project). Cd and install.
2. install this component: https://bit.dev/tallyb/vue-tutorial/product-list
3. Change the app.vue code to be:

<template>
  <div id="app">
    <ProductList />
  </div>
</template>

<script>
import ProductList from '@bit/tallyb.vue-tutorial.product-list';

export default {
  name: 'app',
  components: {
    ProductList
  }
}
</script>

3. npm run serve - runs ok.
4. import the component and run serve again.

[GiladShoham]

The difference between bit import and npm install is when you use bit import we added the path of the component in the package.json in the form of file: [comp-path].
Then npm create the folder in the node_modules using a symlink.
By default webpack resolve symlink to the real path which breaks babel.
It can be disabled in the webpack.config via the vue.config.js
read more about it here:
https://cli.vuejs.org/guide/troubleshooting.html#symbolic-links-in-node-modules
vuejs-templates/webpack-simple#171 (comment)

@JoshK2 will put a vue.config.js for example that works as expected.

[GiladShoham]

here is an example config (can be done in other ways as well):

// vue.config.js
module.exports = {
    // options...
    configureWebpack: {
        resolve: {
            symlinks: false // support npm link
        }
    }
}