Installing @ionic/vue-router locally with npm install *path*

Ionic Framework
1

We are running into several routing issues, with undefined references and want to fix them locally and possibly push some pull requests to the main repository, but we are unable to get it to work as a local install.

Our NPM file points to here:

"@ionic/vue-router": "file:../ionic-framework/packages/vue-router",

In the vue-router folder we checked out 5.9.x branch and ran:
npm install
npm run build

According to the read me.

Then trying to spin up our project like:

ionic cap run android -l --external

We run into:

[npm]  ERROR  Failed to compile with 1 error12:20:42 PM
[npm] <s> [webpack.Progress] 100%
[npm] Syntax Error: Error: No ESLint configuration found in C:\repos\ionic-framework\packages\vue-router\dist.
[npm] You may use special comments to disable some warnings.
[npm] Use // eslint-disable-next-line to ignore the next line.
[npm] Use /* eslint-disable */ to ignore all warnings in a file.

Which we can resolve this issue by adding to vue-router/package.json this:

  "eslintConfig": {
    "root": true,
    "parserOptions": {
      "ecmaVersion": 6
    },
    "env": {
      "es6": true
    }
  },

Which the root: true property resolve, but then we are on the next issue:

[npm]  ERROR  Failed to compile with 1 error12:22:16 PM
[npm] <s> [webpack.Progress] 100%
[npm]  error  in ../ionic-framework/packages/vue-router/dist/index.esm.js
[npm] Module Error (from ./node_modules/eslint-loader/index.js):
[npm]
[npm] C:\repos\ionic-framework\packages\vue-router\dist\index.esm.js
[npm]   1:1  error  Parsing error: 'import' and 'export' may appear only with 'sourceType: module'
[npm]
[npm] ✖ 1 problem (1 error, 0 warnings)
[npm]
[npm]  @ ./src/router.js 12:0-67 25:15-27 26:13-29
[npm]  @ ./src/main.js
[npm]  @ multi (webpack)-dev-server/client?http://10.9.1.16:8100&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

When people submit samples with their bugs in github, how do you install your codebase locally to fix problems? What am I doing wrong?

ionic info:

Ionic:

Ionic CLI : 6.16.3 (C:\Users\Henry\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/vue 6.0.0

Capacitor:

Capacitor CLI : 2.5.0
@capacitor/android : 2.5.0
@capacitor/core : 2.5.0
@capacitor/ios : 2.5.0

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v14.17.3 (C:\Program Files\nodejs\node.exe)
npm : 6.14.13
OS : Windows 10

2

We created a .eslintrc.cjs file with:

  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
  },

Which will solve the:

~~1:1 error Parsing error: ‘import’ and ‘export’ may appear only with ‘sourceType: module’~~

And now we can get the web server up and running:

[npm] <s> [webpack.Progress] 95% emitting CopyPlugin
[npm] <s> [webpack.Progress] 98% after emitting
[npm] <s> [webpack.Progress] 98% after emitting CopyPlugin
[npm]  DONE  Compiled successfully in 13420ms2:03:47 PM
[npm] <s> [webpack.Progress] 100%
[npm]   App running at:
[npm]   - Local:   http://localhost:8100/
[npm]   - Network: http://10.9.1.16:8100/
[npm]   Note that the development build is not optimized.
[npm]   To create a production build, run npm run build.

But we get other issues:

image
image1920×1032 78.5 KB

The router routes to our login page but we promptly get new errors and nothing is rendered.