The application structure
Currently, I am in the process of developing a full-stack app with Node.js, TypeScript, and Vue. Here is an overview of my folder structure:
<project root>
model/
front/
src/
node_modules/
package.json
.eslintrc.js // please note its location
...
back/
node_modules/
package.json
...
The front/ directory was created based on the app generated by vue-cli. As a personal preference, I prefer keeping the frontend node_modules separate from the backend ones. Therefore, the structure of front/ aligns with the standard layout for a Vue app.
The shared model (for both frontend and backend)
I have a TypeScript model that is common to both frontend and backend, stored in:
model/
objects.ts
api.ts
To utilize api.ts in the frontend section, I have front/src/store/api.ts which simply re-exports as:
// re-export from fullstack common model
export * from '../../../model/api'
This approach has been working smoothly with interfaces defined in model/api.ts and model/objects.ts. For instance, I can easily do:
import { TestApiResponse } from '../api'
...
const testUser: TestApiResponse = response.data;
in front/src/store/modules/user.ts.
The issue at hand
I recently attempted to introduce:
export enum Endpoints {
TestApi = 'testApi',
}
with the intention of using it in both frontend and backend, similar to how the interfaces are utilized. Thus, the updated minimal api.ts file now includes:
import { UserBase } from './objects'
export enum Endpoints {
TestApi = 'testApi',
}
export interface TestApiResponse extends UserBase {}
Initially, this change did not cause any issues. However, upon making modifications in user.ts such as:
const response = await axios.get(Vue.prototype.$apiRoot + Endpoints.TestApi);
The development server and building processes began displaying errors like:
Failed to compile.
../model/api.ts Module build failed (from ./node_modules/eslint-loader/index.js):
Error: No ESLint configuration found in <project root>\model.
at CascadingConfigArrayFactory._finalizeConfigArray (<project root>\front\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:432:19)
...
This discrepancy arises due to the usage of enum values as opposed to types, along with the fact that
<project root>/model/api.ts<project root>/front/. This arrangement seems to conflict with the presence of .eslintrc.js within <project root>/front/. Any insights on why this occurs or suggestions on resolving this dilemma would be greatly appreciated.
(Attempts to rectify by moving .eslintrc.js to the root folder or model/ proved ineffective).
PS: Sharing here the content of .eslintrc.js established through vue cli:
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended',
'@vue/typescript/recommended'
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
PPS: Upon relocating .eslintrc.js to the root folder, encountered the following error when running npm run serve:
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Failed to load config ""@vue/typescript/recommended" to extend from.
Referenced from: <project root>\.eslintrc.js
...
Furthermore, duplicating .eslintrc.js in the root folder resulted in identical errors post restarting npm run serve. It appears additional dependencies may need installation in the root package.json, yet specifics remain unclear (frontend/node_modules/@vue/ does not house typescript/recommended). Deleting '@vue/typescript/recommended' segment from the root's .eslintrc prompted:
<project root>\model\api.ts
4:8 error Parsing error: Unexpected token enum
This situation indicates a necessity to reconfigure eslint for TypeScript from scratch. Following guidance from this source proved unfruitful. Attempting steps like:
npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin- Including
and extendingplugins: [ '@typescript-eslint' ]
in'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended'.eslintrc
Unfortunately, still faced with the dreaded Unexpected token enum message. Perhaps opting for eslint setup via vue cli in a full-stack project might not be the most suitable approach.