Skip to content
This repository has been archived by the owner on Jan 18, 2022. It is now read-only.

[Vue warn]: Failed to mount component: template or render function not defined. #388

Open
YuriyBakutin opened this issue Sep 9, 2020 · 2 comments
Milestone

Comments

@YuriyBakutin
Copy link

Version

5.0.0

Reproduction link

https://github.com/YuriyBakutin/vue-select-test

Steps to reproduce

  1. Clone repo
  2. npm i
  3. npm run build
  4. Open http://localhost:3001/
  5. Open dev tools / console

What is expected?

Select should appear on the page

What is actually happening?

Select does not appear on the page, the console displays an error


If you use the following construction:

import vueSelect from 'vue-select/src/components/Select.vue'

no problems occur


When using the vue-cli, which is based on webpack, then problems do not arise in any case.

@nathanieltalbot
Copy link

Does anyone have a solution to this? I am running into the same thing.

@znck znck added this to the Zero Issues milestone Oct 22, 2020
@DonNicoJs
Copy link

What is happening is that for some reason the render function get's overridden when rolling up the component(s) I've managed to get it working (at least on the first tests) by returning the render function in the setup call, here is my rolled up component:

var script$2 = {
  name: "LMarker",
  props: props$3,
  setup(props, context) {
    const leafletRef = ref({});
    const ready = ref(false);

    const addLayer = inject("addLayer");

    const latLng = provideLeafletWrapper("latLng");
    provide("canSetParentHtml", () => !!leafletRef.value.getElement());
    provide(
      "setParentHtml",
      (html) => (leafletRef.value.getElement().innerHTML = html)
    );
    provide(
      "setIcon",
      (newIcon) => leafletRef.value.setIcon && leafletRef.value.setIcon(newIcon)
    );
    const { options, methods } = setup$3(props, leafletRef, context);

    onMounted(async () => {
      const {
        marker,
        DomEvent,
        latLng: leafletLatLng,
        setOptions,
      } = await import('leaflet/dist/leaflet-src.esm');
      updateLeafletWrapper(latLng, leafletLatLng);

      leafletRef.value = marker(props.latLng, options);

      const listeners = remapEvents(context.attrs);
      DomEvent.on(leafletRef.value, listeners);

      leafletRef.value.on("move", debounce(methods.latLngSync, 100));
      propsBinder(methods, leafletRef.value, props, setOptions);
      addLayer({
        ...props,
        ...methods,
        leafletObject: leafletRef.value,
      });
      ready.value = true;
    });

    return () => {
      if (ready.value && context.slots.default) {
        return h(
          "div",
          { style: { display: "none" } },
          context.slots.default()
        );
      }
      return null;
    };
  },
};

const render$2 = () => {};


script$2.render = render$2;
script$2.__file = "src/components/LMarker.vue";

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants