Using arcgis webpack plugin with vue cli

SoftwareHelper · ‎10-23-2019

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": [
    "vuetify"
  ],
  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
 [client-vue]/[eslint]/lib/config.js:268:39
- config.js:192 Config.getConfigHierarchy
 [client-vue]/[eslint]/lib/config.js:192:43
- config.js:299 Config.getConfigVector
 [client-vue]/[eslint]/lib/config.js:299:21
- config.js:342 Config.getConfig
 [client-vue]/[eslint]/lib/config.js:342:29
- cli-engine.js:181 processText
 [client-vue]/[eslint]/lib/cli-engine.js:181:33
- cli-engine.js:690 CLIEngine.executeOnText
 [client-vue]/[eslint]/lib/cli-engine.js:690:40
- index.js:278 lint
 [client-vue]/[eslint-loader]/index.js:278:17
- index.js:252 transform
 [client-vue]/[eslint-loader]/index.js:252:18
- index.js:127
 [client-vue]/[loader-fs-cache]/index.js:127:18
- index.js:31 ReadFileContext.callback
 [client-vue]/[loader-fs-cache]/index.js:31:14

 - Error: No ESLint configuration found.
- compiler.js:79
 [client-vue]/[html-webpack-plugin]/lib/compiler.js:79:16
- Compiler.js:343
 [client-vue]/[webpack]/lib/Compiler.js:343:11
- Compiler.js:681
 [client-vue]/[webpack]/lib/Compiler.js:681:15

 - Hook.js:154 AsyncSeriesHook.lazyCompileHook
 [client-vue]/[tapable]/lib/Hook.js:154:20
- Compiler.js:678
 [client-vue]/[webpack]/lib/Compiler.js:678:31

 - Hook.js:154 AsyncSeriesHook.lazyCompileHook
 [client-vue]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1423
 [client-vue]/[webpack]/lib/Compilation.js:1423:35

 - Hook.js:154 AsyncSeriesHook.lazyCompileHook
 [client-vue]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1414
 [client-vue]/[webpack]/lib/Compilation.js:1414:32

 - Hook.js:154 AsyncSeriesHook.lazyCompileHook
 [client-vue]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1409
 [client-vue]/[webpack]/lib/Compilation.js:1409:36

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.

ReneRubalcava · ‎10-23-2019

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

https://github.com/Esri/arcgis-js-cli

npm install -g @arcgis/cli

arcgis create jsapi-vue-app -t vue‍‍‍

You can read some doc on it in our SDK.

SoftwareHelper · ‎10-23-2019

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

error:

* ./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.

ReneRubalcava · ‎10-23-2019

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.