When attempting to import vue.js within a JavaScript file in a Django application, an error of 'Uncaught SyntaxError: Cannot use import statement outside a module' is encountered

Currently, I am delving into incorporating vue.js into a live django project and have come across a stumbling block.

After setting up npm in the venv environment and installing the vue package, my next step is to create a Vue object within a js file using:

import Vue from 'vue'

However, when I attempt this, I encounter the following error in the console:

Uncaught SyntaxError: Cannot use import statement outside a module

I've scoured for solutions to this problem but haven't found a suitable answer tailored to my specific scenario.

What steps should I take next in order to effectively utilize vue js through the npm package?

javascriptdjangovue.jsexceptionsyntax-error

Answer №1

After careful consideration, I decided to skip using webpack and babel for my modest project. It felt like an unnecessary complication. Instead, I opted to make the node_modules directory visible to the staticfiles finder:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "node_modules"),
)

To access them, I simply used the STATIC_URL (which, in my case, is set to "/static/").

import Vue from 'static/dist/vue/vue.js'

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

Innovative application transforms rigid input with dynamic hyphens

I am currently working on an input field specifically designed for Social Security Numbers (SSNs). My aim is to have an input with pre-placed hyphens, allowing the user to simply enter their 9-digit SSN while the numbers automatically space themselves arou ...

javascriptjqueryangularjs

Mastering socket emission and disconnection in reactjs

When using the onchange function, I am able to open a socket and emit/fetch data successfully. However, a new socket is opened on any event. I need to find a way to emit data from the same socket ID without opening a new socket each time. Could you pleas ...

javascriptreactjswebsocketsocket.io

Switch from using `widthWidth` to `useWidth` in MUI v5 ReactJS

Currently, I am in the process of updating a project that utilizes MUI as the UI Library for my React application. I have started migrating to version 5 today, and one issue I've encountered is related to all functional components wrapped by withWidth ...

javascriptreactjsmaterial-ui

a single line within a compartment

I am encountering an issue with the code snippet below, which is responsible for generating the location of different records within a table: return ( <TableRow> <TableCell > // some code_1 < ...

javascriptreactjsmaterial-ui

Text that appears as an HTML button is displayed after being compiled using the $

I am attempting to generate a pop up dialog with two buttons using JS code in angular. The script below is what I am using to create the buttons... var html = $('<button ng-click = "cancelAlert()" > Cancel</button > <button ng-click="c ...

javascripthtmlangularjsbuttondialog

The Cy.visit() function in Cypress times out and bypasses tests specifically when navigating to a VueJS web application

Having trouble with the Cypress cy.visit() function timing out and aborting tests on a VueJS Web Application? It seems to work fine when opening other non-VueJS sites. Below is my basic configuration setup: [package.json] "dependencies": { "cypres ...

javascriptvue.jsnpmcucumbercypress

What could be causing the preloader to fail in my React application?

I am developing a React App with Redux functionality, and I am looking to implement a preloader when the user clicks on the "LoginIn" button. To achieve this, I have created a thunk function as follows: export const loginInWithEmail = (email, password) =&g ...

javascriptreactjsredux

Retrieve information about the clicked item using the Backbone framework

I have a unique webpage that showcases an impressive collection of books. Each book listed on the page comes with essential information such as the title, price, and description. This data is imported from a JSON file. Excitingly, when users click on any ...

javascriptjquerybackbone.jsunderscore.jsclick

What is causing the failure of the serial reader in NodeJS?

I have successfully installed serialport using npm, but for some reason it is encountering connection issues. $ ls /dev/tty.* /dev/tty.Bluetooth-Incoming-Port /dev/tty.usbserial-AI0255BX $ cat /var/tmp/test.js var SerialPort = require('serialport ...

javascriptnode.jsmacosnpmserial-port

Is there a way to verify the identity of two fields using an external script such as "signup.js"?

My current project involves working with Electron, and it consists of three essential files. The first file is index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="styles ...

javascripthtmlcsselectron

Tips for making a Scroll Button

I am in the process of designing a horizontal website and I would like to incorporate two buttons, one on the left and one on the right, that allow users to scroll to the left and right, respectively. You can check out the site I am currently working on h ...

javascripthtmlhorizontal-scrolling

Restrict the size of the numerical input in AngularJS

<input class="span10" type="number" max="99999" ng-maxLength="5" placeholder="Enter Points" ng-change="myFunc($index)" ng-model="myVar"> This code snippet adjusts the value of form.input.$valid to false if the number entered exceeds 99999 or is long ...

javascriptjqueryhtmlangularjsangularjs-scope

What is the process for invoking a server-side Java function from HTML with JavaScript?

Can someone help me figure out the best way to invoke a Java method from HTML (I'm working with HTML5) using JavaScript? I attempted using Applets but that approach didn't yield any results. My goal is to extract the value from a drop-down menu i ...

javajavascripthtmlajax

The 'data' variable is not defined in the React custom hook Pagination

I am currently working with an API that shows music categories on a browser, and I'm attempting to create a custom pagination hook. However, I keep encountering an error stating "object is not iterable." I am new to custom hooks and would appreciate a ...

javascriptreactjsreact-hooks

Encountering a problem while trying to deactivate Navigation Buttons in VueJs

When working on my ticket processing application, I encountered a situation where I wanted to make the back and forward buttons in my TicketRunner.vue Component appear only if there was an associated case file. To achieve this, I utilized V-If as shown bel ...

vue.jsvuejs2vue-component

Navigating to a Laravel web route directly from a Vue component without relying on Vue Router

This question may seem repetitive, but I have searched everywhere for a solution. I am using laravel-vujs mix and have integrated web routes and api routes in the same project. Currently, I am working on creating a register API function called registerna ...

laravelvue.jslaravel-routinglaravel-vue

steps for repairing a scoreboard

Is there a way to make my scoreboard increase by +1 point instead of +10? In my JavaScript code, I used intervals as it was the only solution that worked: let scoreInterval = setInterval(updateScore); let score = 0; function updateScore() { var poin ...

javascripthtmlcss

React-Native - Issue with TypeError: attempting to call a function that is undefined (specifically when using the 'object.map' method)

I've tested everything from the itemList to the reducer and action, it's working fine and successfully deleting the desired item. However, I encountered an error afterwards. I'm not sure where I went wrong. Can someone guide me on what steps ...

javascriptreact-nativereact-reduxredux-thunk

Show the correct URL address in the browser's address bar

My website utilizes Jquery/Ajax to dynamically load html pages into a specific div. By clicking on links with a certain class, the content opens up in this designated div, while the URL displayed in the address bar remains www.example.com. This setup allow ...

javascriptjqueryajax

Using a timer to make Ajax calls twice on a single webpage

Can multiple ajax calls be made simultaneously on the same page to different receiving div tags? I am struggling to find a solution to this issue. I have a total of 3 pages: a home page, and two PHP pages named status and alert which echo the results. Wi ...

javascriptphphtmlajax