NextJS dev and build mismatch

[milanbgd011]

What I did?

• installed package (latest tailwind installed)
• restarted server with npm run dev
• entered couple of files and hit save
• reformatting worked

What was the problem?

• when I tried to do npm run build I got a lot of ESLint errors caused by prettier
• all errors suggested that the order is different than it should be
• I tried to delete .next dir, reinstall all and try to build again and still the problem remains
• vs code reported no errors in those files, they were reformatted properly, but build complained

Installed packages:

"eslint": "8.7.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-next": "12.0.8",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-import": "2.25.4",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-react": "7.28.0",
"eslint-plugin-react-hooks": "4.3.0",
"autoprefixer": "10.4.2",
"postcss": "8.4.5",
"prettier": "^2.5.1",
"prettier-eslint": "13.0.0",
"prettier-plugin-tailwindcss": "^0.1.4",
"tailwindcss": "3.0.16",

[brianlovin]

I've started encountering this as well:

In this PR, my initial Vercel deploy failed, so I uninstalled this package and committed, then the next build completed successfully.

Could this be conflicting with the VSCode extension for intellisense in some way?

[bradlc]

Hey @milanbgd011. Please could you share your ESLint config?

@brianlovin, I'm not sure this is the same issue. The errors you are seeing there look correct to me, for example h-* should be before w-*. So I think your issue is maybe that Prettier/prettier-plugin-tailwindcss is not running locally? Are you using "format on save" in VS Code?

[milanbgd011]

@bradlc sure, here it is:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [ "@typescript-eslint", "prettier"],
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "prettier"
  ],
  "env": {
    "browser": true,
    "node": true,
    "jquery": true
  },
  "rules": {
    "@typescript-eslint/no-use-before-define": 0,
    "@typescript-eslint/no-explicit-any": 0,
    "@typescript-eslint/no-empty-function": 0,
    "@typescript-eslint/ban-types": 0,
    "@typescript-eslint/ban-ts-comment": 0,
    "@typescript-eslint/no-var-requires": 0,
    "consistent-return": 0,
    "global-require": 0,
    "import/extensions": 0,
    "import/prefer-default-export": 0,
    "jsx-a11y/href-no-hash": 0,
    "no-underscore-dangle": 0,
    "object-curly-spacing": ["error", "always"],
    "react/require-default-props": 0,
    "react/jsx-filename-extension": 0,
    "react/no-danger": 0,
    "react-hooks/exhaustive-deps": 0, 
    "no-restricted-syntax": [0, "ForOfStatement"],
    "no-await-in-loop": 0,
    "import/no-named-as-default": 0,
    "import/named": 0,
    "import/no-unresolved": "off",
    "import/no-cycle": 0,
    "camelcase": 0,
    "no-nested-ternary": 0,
    "no-unused-vars": 1,
    "react/jsx-props-no-spreading": 0,
    "react/destructuring-assignment": 0,
    "no-use-before-define": "off",
    "no-param-reassign": ["error", { "props": true, "ignorePropertyModificationsFor": ["cx", "cxs"] }], // xstate/immer context assign named as c is allowed
    // nextjs stuff
    "@next/next/no-img-element": 0, // I can use <img> element without warning
    "@next/next/no-html-link-for-pages": 0, // do not error on <a> element with href attribute
    "react/jsx-no-useless-fragment": 0,
    "react/function-component-definition": 0,
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": true,
        "trailingComma": "all",
        "printWidth": 120
      }
    ]
  }
}

AND HERE IS package.json if you need it (left only the packages sections)

{
   ...
  "dependencies": {
    "@adobe/react-spectrum": "3.15.1",
    "@ant-design/icons": "4.7.0",
    "@floating-ui/react-dom": "0.4.3",
    "@sentry/integrations": "6.17.2",
    "@sentry/nextjs": "6.17.2",
    "@splidejs/react-splide": "0.6.20",
    "@splidejs/splide": "3.6.12",
    "@xstate/immer": "0.3.0",
    "@xstate/react": "1.6.3",
    "ajv": "8.9.0",
    "antd": "4.18.5",
    "assign-deep": "1.0.1",
    "aws-sdk": "2.1064.0",
    "axios": "0.25.0",
    "blurhash": "1.1.4",
    "bullmq": "1.67.1",
    "canvas": "2.9.0",
    "chalk": "5.0.0",
    "cookie": "0.4.1",
    "date-fns": "2.28.0",
    "deep-object-diff": "1.1.7",
    "easymde": "2.16.1",
    "firebase": "9.6.4",
    "flatted": "3.2.5",
    "formidable": "2.0.1",
    "formik": "2.2.9",
    "framer-motion": "6.2.3",
    "get-value": "3.0.1",
    "immer": "9.0.12",
    "insert-css": "2.0.0",
    "ioredis": "4.27.11",
    "jsonwebtoken": "8.5.1",
    "merge-value": "1.0.0",
    "moment": "2.29.1",
    "nanoid": "3.2.0",
    "next": "12.0.8",
    "next-mdx-remote": "3.0.8",
    "next-seo": "4.29.0",
    "number-precision": "1.5.1",
    "pouchdb": "7.2.2",
    "rc-picker": "2.6.1",
    "react": "17.0.2",
    "react-aria": "3.12.0",
    "react-datepicker": "4.6.0",
    "react-dom": "17.0.2",
    "react-hotkeys-hook": "3.4.4",
    "react-simplemde-editor": "5.0.2",
    "react-stately": "3.11.0",
    "recharts": "2.1.8",
    "snappy": "7.1.1",
    "swr": "1.2.0",
    "temporalio": "0.17.2",
    "uuid": "8.3.2",
    "xstate": "4.28.1"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "5.16.1",
    "@testing-library/react": "12.1.2",
    "@tsconfig/node16": "1.0.2",
    "@types/jest": "27.4.0",
    "@types/node": "17.0.12",
    "@types/react": "17.0.38",
    "@typescript-eslint/eslint-plugin": "5.10.1",
    "@typescript-eslint/parser": "5.10.1",
    "autoprefixer": "10.4.2",
    "critters": "0.0.16",
    "env-cmd": "10.1.0",
    "eslint": "8.7.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-next": "12.0.9",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-import": "2.25.4",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "7.28.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "husky": "7.0.4",
    "jest": "27.4.7",
    "npm-check": "5.9.2",
    "npm-run-all": "4.1.5",
    "postcss": "8.4.5",
    "prettier": "2.5.1",
    "prettier-eslint": "13.0.0",
    "tailwindcss": "3.0.17",
    "ts-jest": "27.1.3",
    "typescript": "4.5.5"
  },
  "optionalDependencies": {
    "fsevents": "2.3.2"
  }
   ...
}

[marceloavf]

Have the same problem from @brianlovin only on vercel,

Tested multiple times and with different node versions on my machine and cant reproduce it.

[bradlc]

Hey @milanbgd011. I have a feeling this could be related to an issue with config resolution that has been resolved in #62. Please could you upgrade the plugin to v0.1.8 and let me know if that fixes your issue?

[milanbgd011]

@bradlc

This is also resolved for me. Thank you very much for this!

[robertwt7]

I'm still experiencing this today with version 0.5.14 and prettier version 3.2.5 not sure why