Eslint issues for initial project

[rcwestlake]

Hey Lee, just installed reactql and started a new project. I am using Atom and am getting a couple errors with ESLint the config file.

I am working through them as it may be my local environment but thought I would bring it up.

[leebenson]

@rcwestlake, in your Atom config, are you using a globally installed version of ESLint or allowing Atom to reference the one installed by ReactQL?

I'm wondering if it has something to do with this blurb in the linter-eslint plugin:

The version installed into your ReactQL project is currently ^3.19.0 - check if there's a mismatch with any globally installed version with eslint -v.

[rcwestlake]

Thanks. I needed to update my eslint version. Now I am getting a different error. It seems related to Node or Babel. I did some googling but couldn't find a solution that worked. Have you run into it before?

task.coffee:86 Cannot read config file: /Users/ryanwestlake/Documents/code/paws/.eslintrc.js
Error: Cannot assign to read only property '.js' of object '#<Object>' TypeError: Cannot read config file: /Users/ryanwestlake/Documents/code/paws/.eslintrc.js
Error: Cannot assign to read only property '.js' of object '#<Object>'
    at registerExtension (/Users/ryanwestlake/Documents/code/paws/node_modules/babel-register/lib/node.js:150:27)
    at /Users/ryanwestlake/Documents/code/paws/node_modules/babel-register/lib/node.js:173:5
    at Array.forEach (native)
    at hookExtensions (/Users/ryanwestlake/Documents/code/paws/node_modules/babel-register/lib/node.js:171:9)
    at Object.<anonymous> (/Users/ryanwestlake/Documents/code/paws/node_modules/babel-register/lib/node.js:177:1)
    at Module._compile (module.js:556:32)
    at Object.value [as .js] (/Applications/Atom.app/Contents/Resources/app.asar/src/compile-cache.js:216:21)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/ryanwestlake/Documents/code/paws/.eslintrc.js:1:18)
    at Module._compile (module.js:556:32)
    at Object.value [as .js] (/Applications/Atom.app/Contents/Resources/app.asar/src/compile-cache.js:216:21)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at module.exports (/Users/ryanwestlake/Documents/code/paws/node_modules/require-uncached/index.js:28:9)
    at loadJSConfigFile (/Users/ryanwestlake/Documents/code/paws/node_modules/eslint/lib/config/config-file.js:160:16)
    at loadConfigFile (/Users/ryanwestlake/Documents/code/paws/node_modules/eslint/lib/config/config-file.js:215:22)
    at Object.load (/Users/ryanwestlake/Documents/code/paws/node_modules/eslint/lib/config/config-file.js:535:18)
    at loadConfig (/Users/ryanwestlake/Documents/code/paws/node_modules/eslint/lib/config.js:63:33)
    at getLocalConfig (/Users/ryanwestlake/Documents/code/paws/node_modules/eslint/lib/config.js:130:29)
    at Config.getConfig (/Users/ryanwestlake/Documents/code/paws/node_modules/eslint/lib/config.js:260:26)
    at processText (/Users/ryanwestlake/Documents/code/paws/node_modules/eslint/lib/cli-engine.js:224:33)
    at CLIEngine.executeOnText (/Users/ryanwestlake/Documents/code/paws/node_modules/eslint/lib/cli-engine.js:754:26)
    at lintJob (/Users/ryanwestlake/.atom/packages/linter-eslint/src/worker.js:14:20)

AND

Error: Cannot assign to read only property '.js' of object '#<Object>'

[leebenson]

@rcwestlake - what happens if you start Terminal, navigate to your project folder, and type npm run lint -- does it run successfully?

If so, there's probably no issue with your locally installed Node, or the ESLint config/NPM module installed in your project folder.

Check that you're running the latest version of Atom, and all of your packages are up to. Bump Node to the latest version, too.

If that does fail, please provide a copy of the output for the following two commands:

node -v
cat package.json

[rcwestlake]

@leebenson thanks for your help - realize it's not a high priority. Looking forward to jumping into the starter kit once I get past this.

Output from running npm run lint after removing a semi-colon:

 9:44  error  Missing semicolon  semi

✖ 1 problem (1 error, 0 warnings)


npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "lint"
npm ERR! node v7.10.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! paws@0.1.0 lint: `eslint .`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the paws@0.1.0 lint script 'eslint .'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the paws package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     eslint .
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs paws
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls paws
npm ERR! There is likely additional logging output above.

I updated node, Atom, and eslint just in case. Versions:

• node -v - v7.10.0
• eslint - v3.19.0
• Atom - v1.17.0 (newest)

cat package.json

  "name": "paws",
  "version": "0.1.0",
  "description": "New ReactQL project",
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env WEBPACK_CONFIG=browser_prod,server webpack --colors",
    "build-browser": "cross-env WEBPACK_CONFIG=browser_prod webpack --colors",
    "build-server": "cross-env WEBPACK_CONFIG=server webpack --colors",
    "build-run": "cross-env WEBPACK_CONFIG=browser_prod,server webpack --colors && node dist/server",
    "lint": "eslint .",
    "clean": "rimraf dist",
    "server": "node dist/server",
    "start": "cross-env WEBPACK_CONFIG=browser_dev webpack-dev-server"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.0.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-regenerator": "^6.24.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.4.0",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.24.1",
    "chalk": "^1.1.3",
    "chunk-manifest-webpack-plugin": "^1.1.0",
    "compression-webpack-plugin": "^0.4.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^4.0.0",
    "css-loader": "^0.28.0",
    "cssnano": "^3.10.0",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-import-resolver-webpack": "^0.8.1",
    "eslint-plugin-babel": "^4.1.1",
    "eslint-plugin-compat": "^1.0.2",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.10.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "image-webpack-loader": "^3.3.0",
    "node-sass": "^4.5.2",
    "postcss-cssnext": "^2.10.0",
    "postcss-loader": "^1.3.3",
    "postcss-nested": "^1.0.1",
    "progress-bar-webpack-plugin": "^1.9.3",
    "resolve-url-loader": "^2.0.2",
    "rimraf": "^2.6.1",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1",
    "webpack-bundle-analyzer": "^2.4.0",
    "webpack-chunk-hash": "^0.4.0",
    "webpack-config": "^7.0.0",
    "webpack-dev-server": "^2.4.4",
    "webpack-manifest-plugin": "^1.1.0",
    "webpack-node-externals": "^1.5.4"
  },
  "dependencies": {
    "isomorphic-fetch": "^2.2.1",
    "koa": "^2.2.0",
    "koa-helmet": "^3.1.0",
    "koa-router": "^7.1.1",
    "koa-static": "^3.0.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "microseconds": "^0.1.0",
    "prop-types": "^15.5.8",
    "react": "^15.5.4",
    "react-apollo": "^1.1.0",
    "react-dom": "^15.5.4",
    "react-helmet": "^5.0.3",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "redux": "^3.6.0",
    "regenerator-runtime": "^0.10.3"
  }
}

[rcwestlake]

@leebenson - if I switch it to a simple .eslintrc file and remove the javascript stuff (resolvers, etc.) it works fine. Obviously the linter then throws errors related import/no-unresolved, so not a fix, but it seems the error is related to .js part of the lint file.

[leebenson]

@rcwestlake - thanks for the extra info. Very interesting. What's supposed to happen is that linter-eslint inside of Atom fires up the locally installed eslint script (in your local node_modules folder, and not the global one), which checks to see if the .js variant is available, and if so, requires and loads it.

This, in theory, means the versions are locked to what's installed locally - so the config should be reproducible without being concerned with what's installed elsewhere on your system.

I can only think of two reasons this might break:

1. The linter is trying to load a global version of eslint, bypassing what's installed locally.
2. Your node_modules folder isn't complete, and is therefore falling back to a global version.

For the former, this would be something that's configured inside of Atom (although I think by default, it will look for eslint in the current project folder.)

For the latter, you could rm -rf node_modules and then run yarn or npm i to re-install everything, and see if that fixes anything.

I'll go ahead and close this issue because it's not something I'm able to replicate locally, and is likely related to your specific environment. If you do find out anything further, though, feel free to add to this issue -- it may help others in the future.

[rcwestlake]

@leebenson thanks. I have sunk a lot of time trying to figure it out but to no avail. I'll keep looking and if I find a solution, I will post here. It's interesting, I downloaded Visual Studio Code and opened the project with that and there were no issues, so definitely an Atom problem.

Look forward to diving into the kit.

[leebenson]

@rcwestlake - I have run into this same issue.

Using apm list to get a list of installed Atom packages, this is what I had locally:

Community Packages (19) /Users/leebenson/.atom/packages
├── autocomplete-python@1.8.63
├── busy-signal@1.4.1
├── file-icons@2.1.4
├── intentions@1.1.2
├── kite@0.25.0
├── language-babel@2.57.7
├── language-docker@1.1.7
├── language-graphql@0.8.0
├── language-rust@0.4.10
├── linter@2.1.4
├── linter-eslint@8.1.7
├── linter-golinter@1.2.2
├── linter-rust@0.8.0
├── linter-ui-default@1.2.3
├── markdown-preview-plus@2.4.9
├── minimap@4.28.1
├── pigments@0.39.1
├── sort-lines@0.14.0
└── terminal-plus@0.14.5

I then updated my packages with apm update, which bumped linter-eslint to 8.2.1.

Now I'm getting the same error as you:

Cannot read config file: /Users/leebenson/dev/github/reactql/kit/.eslintrc.js
Error: Cannot assign to read only property '.js' of object '#<Object>' TypeError: Cannot read config file: /Users/leebenson/dev/github/reactql/kit/.eslintrc.js
Error: Cannot assign to read only property '.js' of object '#<Object>'

So it seems the version jump messed up something.

Now that I've been able to replicate, I'll investigate this further today.

[LancelotP]

Hi,

I did run into the same issue as mentioned above and the simple fix for me was to remove the import of babel-register at the top of .eslintrc.js and replace the lint script inside package.json with babel-node ./node_modules/.bin/eslint .

I prefer to use babel-node instead of babel-register since it's only used for development and the babel-eslint linter already knows how to handle es6.

[leebenson]

@LancelotP - I tried removing babel-register yesterday (see AtomLinter/linter-eslint#926), but that produced syntax warnings in src/app.js for the 'import' keyword, and the local require paths set in Webpack are no longer being respected:

If you managed to fix that, could you do me a favour and post your full .eslintrc.js please?

[leebenson]

I prefer to use babel-node instead of babel-register since it's only used for development and the babel-eslint linter already knows how to handle es6.

@LancelotP - the issue is that babel-eslint is checking syntax, but to get to that point and understand folder structures, the lint config file has to first load the webpack config, which itself requires babel bootstrapping.

The previous npm run lint script worked fine locally, since it simply used eslint . (which itself was pulled from the local node_modules).

linter-eslint should run anywhere that the 'bare' eslint CLI runs; I think the complexity of the build chain simply threw up an unanticipated edge case. Hopefully this gets solved upstream soon.