What methods are available for integrating ArcGIS JS into Vue.js?

I have been exploring the examples provided in the documentation for ArcGIS, but I am facing difficulties in using it correctly. For instance, when I try to import Map from ArcGIS as demonstrated in this example:

import Map from '@arcgis/Map'

It results in an error in my browser indicating that 'esri' could not be found, similar to what is shown in this https://i.sstatic.net/Yk91d.png

Could someone help me understand why it is attempting to download files from assets?

Answer №1

To utilize the ArcGIS JS API with ES modules, it is necessary to move the @arcgis/core/assets folder to the build directory.

This can be achieved by incorporating the ncp npm module and configuring npm scripts as shown below.

// package.json
{
    "script": {
        "start": "npm run copy && react-scripts start",
        "build": "npm run copy && react-scripts build",
        "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
    }
}

This method aligns with the guidance provided in the official ArcGIS JS API documentation.

Alternatively, if Webpack is being utilized, the copy-webpack-plugin can also be used for this purpose. Reference: https://www.npmjs.com/package/copy-webpack-plugin. Configuration can then be added in your webpack.config.js.

const CopyWebpackPlugin = require('copy-webpack-plugin');
plugins: [
    new CopyWebpackPlugin([
        { from: './node_modules/@arcgis/core/assets', to: './public/assets' },
    ]
  ],

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

Tally the values entered into the text input field

I am interested in counting the number of IDs within an input of type "text" The values return like this: 1, 4, 6, etc. <input type="hidden" class="selected_ids" value="selected_ids" name="selected_ids[]" multiple="yes" id="selected_ids" /> ...

Exploring JSON data to locate specific characters with JavaScript

[ {"lastName":"Noyce","gender":"Male","patientID":19389,"firstName":"Scott","age":"53Y,"}, {"lastName":"noyce724","gender":"Male","patientID":24607,"firstName":"rita","age":"0Y,"} ] When comparing my input with the JSON data, I utilize a loop to search f ...

Unable to apply 100% height to flex child element

When it comes to creating a layout for my website, I have a simple idea in mind. I want the body content to take up at least 100% of the height of the page. This setup works perfectly on desktop screens, but when I switch to a mobile view (which changes th ...

What is the best way to handle waiting for an API call in JavaScript export?

In my Vue app, I've set up my firestore app initialization code as shown below: if (firebase.apps.length) { firebase.app() } else { firebase.initializeApp(config) } export const Firestore = firebase.firestore() export const Auth = firebase.auth() ...

I am having trouble with the browser detection not accurately identifying the browser I am currently using

Currently, I am working on a JavaScript code that will simply display the name of the browser being used to view the web page. Despite me using Safari, none of the navigators seem to recognize it as the current browser. The information displayed in my brow ...

Switching perspective in express with Pug

Hello everyone, I'm still getting the hang of using Node.js with Express and Jade. I've successfully set up a basic 1 page app where a login page is displayed by default. Once the user logs in and is authenticated against a database, the function ...

Is it possible to alter the css twice through the action of clicking on two individual buttons

One feature I have in my interface allows users to click on the edit button to bring up borders and change the background color of other divs. Once the edit button is pressed, it is replaced by cancel and save buttons. The goal is for the borders and backg ...

Error: scrollreveal JavaScript is not properly defined

Desperately seeking guidance on a particular code snippet... window.sr = ScrollReveal({ reset: true }); sr.reveal('.whitecircle, .circleStatsItemBox, .circleStat', { duration: 200 }); function circle_program() { var divElement = $(&apo ...

You are unable to define a module within an NgModule since it is not included in the current Angular compilation

Something strange is happening here as I am encountering an error message stating 'Cannot declare 'FormsModule' in an NgModule as it's not a part of the current compilation' when trying to import 'FormsModule' and 'R ...

Unable to direct to the main page in index.js of the next.js application

I have been working on a next.js application and encountered an issue with a component I created called <ButtonGroup>. I added a button with the code <Button href="index">Home</Button> to allow users to navigate back to the home ...

A guide on extracting information from a personal Flask JSON route endpoint with Axios

I am looking to store JSON data in a variable using Axios in Javascript. The JSON endpoint is generated by my own server's route http://123.4.5.6:7890/json. I have been successful with this function: async function getClasses() { const res = await ...

Only one instance of the Next.js inline script is loaded

Incorporating Tiny Slider into my Next.js application has been a success, but I am facing an issue with the inline script that controls the slider's behavior. The script loads correctly when I first launch index.js. However, if I navigate to another p ...

Deactivating a Vue custom filter when hovering over it

I'm trying to figure out how to disable a truncate filter when hovering over an element using VueJS 2. Here's the part of my template that includes the filter: <div class="eng" @mouseover="showAll">{{ word.english | truncate }}</div> ...

Error occurs when running Visual Studio Code locally - variable not defined

After successfully going through a Microsoft online demo on setting up an httpTrigger in Visual Studio Code with JavaScript to upload it to Azure Functions, I decided to customize the code for a specific calculation. I managed to get the calculation done a ...

When attempting to evaluate JSON data on a specific computer, the function JSON

Something strange is happening and I can't seem to figure it out, causing a big issue for me. I am currently working on a .Net web application that utilizes JSON (not json2) along with other JS libraries. In one specific proxy, the function JSON.eval ...

Retrieving the <html> tag within an Angular component

In an Angular component, the <body> and <head> tags can be accessed by injecting DOCUMENT as shown below: import { DOCUMENT } from '@angular/common'; import { Inject } from '@angular/core'; export class TestComponent { c ...

Assign a value to the Angular directive for the SharePoint People Picker

In my create form, I have successfully used a directive to capture and store values in SharePoint via REST. The directive I am using can be found at this link. Within my HTML, I am implementing the directive like this: <sp-people-picker name="CC" id=" ...

AngularJS Filter without creating a new object

Within my code, I am dealing with an array of objects that contain sub-objects. This particular array is utilized in an ng-repeat to display data in a table format. To illustrate, consider the following example: device { "name": "computer" ...

In jqGrid's gridComplete event, we can use the getRowData method to retrieve the value of a

Seeking guidance on extracting variables from jqGrid getRowData method While iterating through rows, I simply want to retrieve the ID and Phrase column values into separate variables gridComplete: function () { var allRowsInGrid = $('#list'). ...

How to retrieve the index of a nested ng-repeat within another ng-repeat loop

On my page, there is an array containing nested arrays that are being displayed using ng-repeat twice. <div ng-repeat="chapter in chapters"> <div ng-repeat="page in chapter.pages"> <p>Title: {{page.title}}</p> </d ...