Question

38

Cannot use import statement outside a module in Vuejs. Template Django

rated 0 times [ 42] [ 4] / answers: 1 / hits: 5882 / 3 Years ago, sat, january 23, 2021, 12:00:00

I'm using a django template and using Vue only on the current page.

however when importing the lib, an error is displayed.

<!DOCTYPE html>

<html lang="pt-br">

<head>

    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>

    <div id="app">

        <el-container style="height: 100vh;">

        <el-header>

            <el-row>

                <el-col :span="12" style="text-align: left;">

                    <el-image

                        style="width: 110px;"

                        src="img/logo-royal.png"

                        fit="fit">

                    </el-image>

                </el-col>

                <el-col :span="12" style="float: right;">

                    <menu-header></menu-header>

                </el-col>

            </el-row>

        </el-header>

        <el-container>

            <el-container>

                <el-main>

                    .....

content

.....

                </el-main>

            </el-container>

        </el-container>

        <el-footer style="font-size: 11px;">info</el-footer>

        </el-container>

    </div>

</body>



<script src="js/lib/vue.js"></script>

<script src="js/lib/apexcharts.js"></script>

<script src="js/lib/vue3-apexcharts.js"></script>



<script>

import VueApexCharts from 'vue-apexcharts'



var app = new Vue({

    el: '#app',

    components:{

      apexchart: VueApexCharts    <---- Uncaught SyntaxError: Cannot use import statement outside a module



    },

    data() {

        return {

          

    }

    },

    methods: {



    }

});

</script>

</html>

Uncaught SyntaxError: Cannot use import statement outside a module

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eanskylerg

Add To Favorites

Follow

Total Points: 524

Total Questions: 107

Total Answers: 100

Location: Colombia

Member since Mon, May 2, 2022

2 Years ago

eanskylerg questions

1 React Router v6 : How to render multiple component inside and outside a div with the same path

Sat, Feb 19, 22, 00:00, 2 Years ago

1 dotenv: command not found in nestjs project

Sat, Oct 30, 21, 00:00, 3 Years ago

1 How can I resolve the TypeScript Compiler error Namespace 'NodeJS' has no exported member 'Global'?

Mon, Jul 5, 21, 00:00, 3 Years ago

1 Limit x-axis in Apexcharts.js

Wed, Mar 10, 21, 00:00, 3 Years ago

1 Webpack: How to inject process.env runtime on client(browser) side making build independent of environment

Fri, Apr 24, 20, 00:00, 4 Years ago

View All

answered 3 Years ago chazw · Accepted Answer

<!DOCTYPE html>

<html lang=pt-br>

<head>

    <link rel=stylesheet type=text/css href=css/style.css>

</head>

<body>

    <div id=app>

        <el-container style=height: 100vh;>

        <el-header>

            <el-row>

                <el-col :span=12 style=text-align: left;>

                    <el-image

                        style=width: 110px;

                        src=img/logo-royal.png

                        fit=fit>

                    </el-image>

                </el-col>

                <el-col :span=12 style=float: right;>

                    <menu-header></menu-header>

                </el-col>

            </el-row>

        </el-header>

        <el-container>

            <el-container>

                <el-main>

                    .....

content

.....

                </el-main>

            </el-container>

        </el-container>

        <el-footer style=font-size: 11px;>info</el-footer>

        </el-container>

    </div>

</body>



<script src=js/lib/vue.js></script>

<script src=js/lib/apexcharts.js></script>

<script src=js/lib/vue3-apexcharts.js></script>



<script type=module>

import VueApexCharts from './vue-apexcharts'

var app = new Vue({

    el: '#appl',

    components:{

      apexchart: VueApexCharts



    },

    data() {

        return {

          

    }

    },

    methods: {



    }

});

</script>

</html>

Absence of type="module" causes this problem usually.

You can give it a try.

<script type="module">

   // your code

</script>