Using sl-vue-tree with vue-cli3.1 on internet explorer 11

Hello, I am a Japanese individual and my proficiency in English is lacking, so please bear with me. Currently, I am using vue-cli3.1 and I am looking to incorporate the sl-vue-tree module into my project for compatibility with ie11. The documentation mentions that it can be used on ie11 with babel-polyfill, but unfortunately, I seem to be unable to implement babel-polyfill correctly.

I followed the steps of adding "@babel/polyfill" through yarn and importing it at the top of the main.ts file. However, despite these efforts, the module does not seem to work as expected.

import "@babel/polyfill"

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <SlVueTree v-model="treeModel">

    </SlVueTree>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

//sl-vue-tree
import SlVueTree from "sl-vue-tree-original";


@Component({
  components: {
    SlVueTree
  }
})
export default class About extends Vue {

  public treeModel = [
    {
        "title": "Item1",
        "isLeaf": true
    },
    {
        "title": "Item2",
        "isLeaf": true
    },
    {
        "title": "Folder1",
        "isExpanded": true,
        "children": [
            {
                "title": "Item3",
                "isLeaf": true
            },
            {
                "title": "Item4",
                "isLeaf": true
            },
            {
                "title": "Folder2",
                "children": [
                    {
                        "title": "Item5",
                        "isLeaf": true
                    }
                ]
            }
        ],
        "isSelected": true
    },
    {
        "title": "Item6",
        "isLeaf": true
    }
];

  }
}
</script>

Answer №1

I managed to find a solution by utilizing Vue cli 3.6 along with sl-vue-tree version 1.8.4.

First, I added the transpileDependencies to my vue.config.js file:

module.exports = {
 transpileDependencies: ['sl-vue-tree'],
 ...
}

Next, here is a snippet from my babel.config.js file:

module.exports = {
 presets: [
  ["@vue/app", {
    modules: "commonjs"
  }]
 ]
};

Within my Vue component, I simply imported sl-vue-tree like this:

import slVueTree from "sl-vue-tree";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The error occurred in async JavaScript parallel code because the task is not recognized as a function

I am attempting to upload an image and update the image URL in the database collection using the code provided below. Controller.prototype.handle = function (req, res, next) { var id = req.params.id, controller = req.params.controller, optio ...

The overload functionality in Typescript interfaces is not functioning as intended

Here is a snippet of code I'm working with: class A { } class B { } class C { } interface Builder { build(paramOne: A): string; build(paramOne: B, paramTwo: C): number; } class Test implements Builder { build(a: A) { return &apo ...

The functionality of Angular services is not available for use in Jasmine tests

As someone who is relatively new to Jasmine Testing and the Angular framework, I find myself in a unique situation. I am currently struggling with referencing my service functions in my Jasmine tests. Here is a snippet of my Angular Service Initialization ...

What is the best way to symbolize a breadcrumb offspring?

In my table representation, the breadcrumb is shown as: <ol class="breadcrumb" data-sly-use.breadcrumb="myModel.js"> <output data-sly-unwrap data-sly-list="${breadcrumb}"> <li itemscope itemtype="http://data-vocabulary.org/ ...

What is the method for defining the current date variable within a .json object?

When using a post .json method to send an object, I encounter the following situation: { "targetSigningDate": "2021-09-22T21:00:00.000Z" } The "targetSigningDate" always needs to be 'sysdate'. Rather than manually c ...

Can you provide some guidance on how to effectively utilize buefy's b-taginput within a custom component to enable two-way binding functionality like v-model, as it seems to currently only support one-way

Recently, I decided to dive into the world of Vue.js and explore the Buefy library for handy components. In an attempt to maintain a structured codebase, I've created a custom component using the b-taginput. The initial setup loads tags from someArra ...

Create a data structure with a single key interface that contains a key value pair

Imagine having an interface with just one key and value : interface X { Y : string } It would be great to define a key-value type like this: interface Z { "key" : Y, "value" : string } However, manually doing this can be tedious. What if we ...

What is the best way to select the child of the second-to-last child?

In the structure of my HTML code, I have an unordered list with a class "menu" containing several list items and corresponding anchor tags like this <ul class="menu"> <li> <a href="#1"></a> </li> <div&g ...

Using Next.js, it is not possible to use absolute imports within SASS

Having trouble utilizing @/ imports within my scss files. The variables I need are stored in src/styles/_variables.scss Here is my tsconfig.json: { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "baseUrl": ".", "allowJs": tr ...

Implementing a toggle function in Vue.js to add or remove a class from the body element when a

I'd like to add a toggleable class to either the body element or the root element("#app") when the button inside the header component is clicked. Header.vue : <template lang="html"> <header> <button class="navbar-toggler navbar-tog ...

The URL redirect is malfunctioning and prompting an error stating "No 'Access-Control-Allow-Origin' header"

Having trouble sending an Ajax request to a Node.js server from my application and encountering the following error: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the ...

Is there a way I can create an object in JavaScript by using an array of values as parameters instead of having to manually list them out?

Can I achieve this? My goal is to develop a universal factory function that can generate different types of factories with some commonalities. I aim to pass arguments as an array to the base factory, which would then potentially create a new object instanc ...

Extensible generic type/interface in Typescript

Looking to create a versatile base interface or type that can adapt its properties based on the generic object it receives. It might look something like this: interface BaseObject<Extension extends object = {}>{ a: string; b: string; {...Ext ...

Identifying Typescript argument types

The given code is functional, but I am looking to refactor it for better clarity using Typescript syntax if possible. class Actions { actions: string[] } type Argument = object | Actions; export class GetFilesContext implements IExecutable { execute( ...

What modifications were implemented in Bootstrap 5 to cause controls to automatically assume their maximum size?

After upgrading NodeJs to version 16.13.0 from 14.x, one of the modules that was updated was bootstrap. This caused me to remove my Jumbotron control due to the upgrade, although I don't believe that is directly related to the issue I am experiencing. ...

Which behaviors that are typically exhibited by browsers will be stopped by calling `event.preventDefault()`?

While I grasp that using event.preventDefault() stops default actions triggered by events in the browser, I find this explanation too general. For instance, what exactly are these default event behaviors in the browser? It's common to see developers u ...

Is it possible to convert checkbox values from a form into a JSON format?

HTML snippet : <form class="form-horizontal" id="addpersons" style="padding:20px;"> <fieldset class="scheduler-border"> <!-- Form Title --> <legend class="scheduler-border">Information</legend> <!-- First Name input-- ...

Is it possible to integrate Wavify with React for a seamless user experience?

For my website designs, I have been experimenting with a JavaScript library known as Wavify (https://github.com/peacepostman/wavify) to incorporate wave animations. Recently delving into the world of React, I pondered whether I could integrate Wavify into ...

Exploring the array mapping technique in React with nested objects

As part of a school project, I am working on creating a dashboard to visualize some data. I have successfully loaded the data into the front end using React. Now my goal is to retrieve specific values from a large array. However, I am uncertain about how ...

Leveraging the useContext and useReducer hooks within NextJS, while encountering the scenario of reading null

Trying to develop a tic-tac-toe game in NextJS and setting up a board context for my components to access. However, after integrating a reducer into the Wrapper to handle a more complex state, I'm encountering a null error. Errors: TypeError: Cannot r ...