NextJS dev and build mismatch

milanbgd011 commented 2 years ago

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",

Screenshot 2022-01-25 at 21 03 23

brianlovin commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@bradlc

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

robertwt7 commented 3 months ago

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

tailwindlabs / prettier-plugin-tailwindcss

NextJS dev and build mismatch #19

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