Using arcgis webpack plugin with vue cli

10-23-2019 06:06 AM
New Contributor

Hello, I want to create a Vue app with wich will be used in desktop (electron-builder) and browser, and run some scripts with arcgis on server side, so I followed the steps:

from terminal (cmd):

vue create arcgis-app
vue add vuetify
yarn add @arcgis/webpack-plugin -D

then my vue.config.js:

const ArcGISPlugin = require("@arcgis/webpack-plugin")

module.exports = {
  "transpileDependencies": [
  configureWebpack: {
    plugins: [
      new ArcGISPlugin()

and finally running:

yarn serve

I got these compilation errors ->

98% after emitting CopyPlugin

ERROR Failed to compile with 2 errors

Module build failed (from ./node_modules/eslint-loader/index.js):
Error: No ESLint configuration found.
 at Config.getLocalConfigHierarchy (......\node_modules\eslint\lib\config.js:268:39)
 at Config.getConfigHierarchy (......\node_modules\eslint\lib\config.js:192:43)
 at Config.getConfigVector (......\node_modules\eslint\lib\config.js:299:21)
 at Config.getConfig (......\node_modules\eslint\lib\config.js:342:29)
 at processText (......\node_modules\eslint\lib\cli-engine.js:181:33)
 at CLIEngine.executeOnText (......\node_modules\eslint\lib\cli-engine.js:690:40)
 at lint (......\node_modules\eslint-loader\index.js:278:17)
 at transform (......\node_modules\eslint-loader\index.js:252:18)
 at ......\node_modules\loader-fs-cache\index.js:127:18
 at ReadFileContext.callback (......\node_modules\loader-fs-cache\index.js:31:14)
 at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:250:13)

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
 Error: Child compilation failed:
 Module build failed (from ./node_modules/eslint-loader/index.js):
 Error: No ESLint configuration found.
- config.js:268 Config.getLocalConfigHierarchy
- config.js:192 Config.getConfigHierarchy
- config.js:299 Config.getConfigVector
- config.js:342 Config.getConfig
- cli-engine.js:181 processText
- cli-engine.js:690 CLIEngine.executeOnText
- index.js:278 lint
- index.js:252 transform
- index.js:127
- index.js:31 ReadFileContext.callback

 - Error: No ESLint configuration found.
- compiler.js:79
- Compiler.js:343
- Compiler.js:681

 - Hook.js:154 AsyncSeriesHook.lazyCompileHook
- Compiler.js:678

 - Hook.js:154 AsyncSeriesHook.lazyCompileHook
- Compilation.js:1423

 - Hook.js:154 AsyncSeriesHook.lazyCompileHook
- Compilation.js:1414

 - Hook.js:154 AsyncSeriesHook.lazyCompileHook
- Compilation.js:1409

I got no experience with webpack neither eslint, what am I missing?

I also tried to load arcgis with esri-loader, wich works fine but only with js api 4.7. the 4.13 is out there and I don't wan't to start a project using an older version whith an loader wich is not future proof.

Thanks in advance.

0 Kudos
3 Replies
Frequent Contributor II

Setting up the vue-cli with the arcgis webpack plugin requires a little bit of config, but here is a working example.

GitHub - crackernutter/arcgis-webpack-vue-calcite: A starter template for Esri Calcite maps using Vu... 

This came about from a user that was able to work it out. You can find the conversation here for reference.

An alternative to this, is to use the ArcGIS CLI, which can output a vue application that is based off the output of the vue-cli 

npm install -g @arcgis/cli

arcgis create jsapi-vue-app -t vue

You can read some doc on it in our SDK.

New Contributor

Thanks for response,

I tried to replicate the content of vue.config.js from the project from github but I just got different compile errors.

Second, I tried to init  a new template with 

arcgis create jsapi-vue-app -t vue
vue add vuetify

and it doesn't start (it does witout vuetify)

Finally, I just tried to clone the project and run yarn / yarn serve. Also doesn't launchs


* ./BuildingFilterModeWireFrame in ./node_modules/arcgis-js-api/layers/support/BuildingFilterBlock.js

For now, the only approaches wich is working for me to use Vue, Vuetify, arcgisjs and Electron is esri-loader + arcgisjs 4.7.

0 Kudos
Frequent Contributor II

There is probably a conflict with what vuetify needs to build and the webpack configuration we need to build. In this scenario, you should use the esri-loader to avoid any webpack config issues.

0 Kudos