Issue with Prettier

[crholliday]

When issuing yarn run serve with a basic install except I routed to the ApolloExample component I am getting the following error:

 error  in ./src/graphql/MessageAdd.gql

Syntax Error: Unexpected Name "ESLintPluginGraphQLFile" (1:1)
> 1 | ESLintPluginGraphQLFile`#import "./MessageFragment.gql"
    | ^
  2 |
  3 | mutation messageAdd ($input: MessageInput!) {
  4 |   messageAdd (input: $input) {
    at Array.forEach (<anonymous>)

 @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ApolloExample.vue?vue&type=script&lang=js 66:0-61 86:20-40
 @ ./src/components/ApolloExample.vue?vue&type=script&lang=js
 @ ./src/components/ApolloExample.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

This could be related to this?

I confirmed that the above does not happen when I repeat all steps but select eslint with standard instead of eslint with prettier.

[Kocal]

Got the same error with v3.0.0-rc.4 and v3.0.0-rc.5 of those packages:

• @vue/cli-service
• @vue/cli-plugin-eslint
• @vue/eslint-config-prettier
• @vue/eslint-config-airbnb
• @vue/eslint-config-typescript

I don't think it's specially related to vue-cli-plugin-apollo, because I don't use the plugin but I still have some issues.

This is what I have when building with NODE_ENV=production:

 warning  in ./src/graphql/fragments/ArticleFragment.graphql

Module Warning (from ./node_modules/thread-loader/dist/cjs.js):

/home/kocal/xxx/src/graphql/fragments/ArticleFragment.graphql
  1:0  error  Parsing error: Invalid character

✖ 1 problem (1 error, 0 warnings)

 @ ./src/graphql/resolvers/article.graphql 21:50-97
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/widgets/ArticlesWidget.vue?vue&type=script&lang=js
 @ ./src/components/widgets/ArticlesWidget.vue?vue&type=script&lang=js
 @ ./src/components/widgets/ArticlesWidget.vue
 @ ./src/components/widgets/index.ts
 @ ./src/components/index.ts
 @ ./src/init/components.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

...

And this is what I have when NODE_ENV=staging (just something different of production I guess):

1 error found.

Module Warning (from ./node_modules/eslint-loader/index.js):
error: Parsing error: Invalid character at src/graphql/fragments/ArticleFragment.graphql:
> 1 | #import "../fragments/MediaFragment.graphql"
  2 | 
  3 | fragment ArticleFragment on Article {
  4 |   id

...

Anyway, it's looks like issues are gone when we build the app for the 2nd time, since node_modules/.cache is populated. :thinking:

[Kocal]

Well, even by removing extends: ['@vue/prettier'] from ESLint configuration do not works.

To solve this issue, I updated my .eslintignore with **/*.graphql and I have no errors anymore. It's dirty, but I think it's fine for a temporary solution.

[Nikodermus]

This config worked for me

module.exports = {
  root: true,
  extends: [
    'plugin:vue/essential',
    'plugin:import/errors',
    '@vue/eslint-config-airbnb',
    'prettier',
    'prettier/vue',
  ],
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2020,
  },
  plugins: ['babel', 'graphql', 'vue', 'prettier'],
  rules: {
    'max-len': ['warn', { code: 100 }],
    quotes: [
      'error',
      'single',
      {
        avoidEscape: true,
        allowTemplateLiterals: true,
      },
    ],
    'prettier/prettier': [
      'error',
      {
        arrowParens: 'always',
        printWidth: 100,
        singleQuote: true,
        tabWidth: 2,
        trailingComma: 'es5',
        useTabs: false,
      },
    ],
  },
};

These are my dependencies:

"dependencies": {
    "@vue/cli-service": "^4.0.0",
    "@vue/eslint-config-airbnb": "^5.1.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.5.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-babel": "^5.3.1",
    "eslint-plugin-graphql": "^4.0.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-vue": "^6.2.2",
    "graphql": "^15.0.0",
    "prettier": "^2.0.5"
  },