Search code examples
javascriptvue.jsarcgis

How can I use arcgis js in Vue js

There are several example in docs of arcgis, but I can't use it properly. When I import Map from arcgis like shown as in that example:

import Map from '@arcgis/Map'

It gives error in browser which not found ersi like that enter image description here

Why it tries to download files from assets?

Solution

  • Using the ArcGIS JS API with ES modules, you need to copy the @arcgis/core/assets to the build directory.

    This can be done using the ncp npm module and setup npm scripts like such.

    // 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"
    }
}

    It is the way the ArcGIS JS API documentation lists how to do it. https://developers.arcgis.com/javascript/latest/es-modules/

    Alternatively if you use Webpack, you can use the copy-webpack-plugin to accomplish it as well. https://www.npmjs.com/package/copy-webpack-plugin then in your webpack.config.js

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