Repository navigation
eslint binary is not in the top level node_modules/.bin folder after creating an app #247
Description
I tested #149 again with create-react-app my-app --scripts-version 0.2.0-alpha.1 and noticed that ESLint in editor doesn't work as expected. Digging down into the issue and I realized our global-cli and npm run create-react-app in the main repo generate different node_module structures (I'm using npm 3):
A global create-react-app my-app call generates:
node_modules (top level)
├── .bin
│ ├── loose-envify
│ └── react-scripts
├── ...
└── react-scripts
├── ...
└── node_modules
└── .bin
├── ...
└── eslint // 😢
And npm run create-react-app my-app in the main repo generates:
node_modules (top level)
├── .bin
│ ├── ... (everything's here like webpack, react-scripts, etc.)
│ └── eslint // 😃
├── ...
└── react-scripts
├── ...
└── no node_modules here
As a result, the ESlint in editor part doesn't work for a global cli call. I've only tested my PR using the npm run create-react-app script and that's why I thought it was working for me. :(
To be clear, this issue only happens before ejecting; after ejecting eslint will be moved to the top level node_modules/.bin folder so it works fine. I think there's nothing wrong with "extends": "./node_modules/react-scripts/config/eslint.js"; the problem is the eslint binary gets put in a deep node_modules/.bin folder so editors (plugins) can't find it.
TBH I'm not sure what's a good way to fix this. Could we flatten the node_module structure while creating an app?
Activity
gaearon commentedon Jul 27, 2016
It's weird that npm 3 generates this. Does calling
npm dedupefix it? In general npm 3 should use flat structure when possible so I'm curious what causes the nesting.keyz commentedon Jul 28, 2016
yeah, calling
npm dedupefixed it but it took like 10 minutes to finish on my machine :(gaearon commentedon Jul 28, 2016
I think we might have to recommend
npm dedupeor wait for eslint/eslint#3458 to be fixed (there’s some work on this as far as I can see).insin commentedon Jul 28, 2016
Delightful (nasty) hack I used for this in my entire-ESLint-config-in-a-box package with npm2 - define your own
eslintbin script which finds and calls the real one 🌵gaearon commentedon Jul 28, 2016
Wow much evil. 😄
We probably won’t do this because I think it’s a notch too obnoxious for us to shadow
eslint.This is being worked on: eslint/eslint#3458. I think we might expect to have a solution to this in ESLint itself within a couple of months.
In the meantime, I documented the complete workaround that involves installing those plugins globally: https://github.com/facebookincubator/create-react-app/blob/master/template/README.md#display-lint-output-in-the-editor.
I think it will suffice for now.