I’m working on a React project set up with Create React App. I’ve added Prettier to my dev setup and made an .eslintrc.json file to use the Prettier plugin. Everything works fine on my computer, but when I try to deploy to Heroku, I run into problems.
The build process tries to use ESLint, but it can’t find the plugins because they’re in devDependencies. I get an error message saying it can’t load the Prettier plugin.
I know I could fix this by setting NPM_CONFIG_PRODUCTION=false on Heroku, but I’m wondering if there’s another way. Is there a method to stop the build process from running ESLint? Or maybe a way to keep it from looking at the .eslintrc.json file?
I don’t want to just ignore the .eslintrc.json file in git because I want to keep my ESLint setup in the repo. Any ideas on how to handle this without changing my Heroku settings?
hey, have u tried using the EXTEND_ESLINT option? It lets u override the default eslint config without messing with ur setup. just add “EXTEND_ESLINT=true” to ur .env file or package.json build script. then create a .eslintrc.js file in ur project root with minimal config for production. this way u keep ur dev setup but avoid those pesky heroku errors. worth a shot!
Have you considered using the DISABLE_ESLINT_PLUGIN environment variable? It’s a straightforward solution that doesn’t require changing your Heroku settings or modifying your repo structure. You can add DISABLE_ESLINT_PLUGIN=true to a .env file in your project root, or include it directly in your build script in package.json. This way, ESLint won’t run during the build process, solving your deployment issues without compromising your local development setup. It’s a clean approach that keeps your ESLint configuration intact for local use while ensuring smooth builds on Heroku.
I’ve encountered a similar issue before, and I found a workaround that might help you out. Instead of disabling ESLint completely, you could create a separate ESLint configuration file specifically for production builds. Name it something like .eslintrc.prod.json and keep it minimal, without the Prettier plugin or any other dev-only rules.
Then, in your package.json, modify your build script to use this production-specific ESLint config:
"scripts": {
"build": "ESLINT_CONFIG_FILE=.eslintrc.prod.json react-scripts build"
}
This approach lets you maintain your full ESLint setup for development while using a stripped-down version for production builds. It’s a good compromise that keeps linting in place without causing deployment issues. Just remember to keep your production ESLint config updated if you make significant changes to your main one.