Forbid Webpack loader syntax in imports

Enable no-webpack-loader-syntax rule in eslint-config-react-app.

Author: fson

package.json

@@ -14,7 +14,7 @@
     "eslint": "3.5.0",
     "eslint-config-react-app": "file:packages/eslint-config-react-app",
     "eslint-plugin-flowtype": "2.18.1",
-    "eslint-plugin-import": "1.12.0",
+    "eslint-plugin-import": "2.0.0",
     "eslint-plugin-jsx-a11y": "2.2.2",
     "eslint-plugin-react": "6.3.0",
     "lerna": "2.0.0-beta.29"

packages/eslint-config-react-app/README.md

@@ -17,7 +17,7 @@ If you want to use this ESLint configuration in a project not built with Create
 First, install this package, ESLint and the necessary plugins.
 
   ```sh
-  npm install --save-dev eslint-config-react-app [email protected] [email protected] [email protected] eslint-plugin-import@1.12.0 [email protected] eslint-plugin-react@5.2.2
+  npm install --save-dev eslint-config-react-app [email protected] [email protected] [email protected] eslint-plugin-import@2.0.0 [email protected] eslint-plugin-react@6.3.0
   ```
 
 Then create a file named `.eslintrc` with following contents in the root folder of your project:

packages/eslint-config-react-app/index.js

@@ -21,8 +21,7 @@ module.exports = {
 
   parser: 'babel-eslint',
 
-  // import plugin is temporarily disabled, scroll below to see why
-  plugins: [/*'import', */'flowtype', 'jsx-a11y', 'react'],
+  plugins: ['import', 'flowtype', 'jsx-a11y', 'react'],
 
   env: {
     browser: true,
@@ -170,6 +169,9 @@ module.exports = {
     // This is probably fixable with a patch to eslint-loader.
     // When file A is saved, we want to invalidate all files that import it
     // *and* that currently have lint errors. This should fix the problem.
+    // (As an exception, import/no-webpack-loader-syntax can be enabled already
+    // because it doesn't depend on whether the file exists, so this issue
+    // doesn't apply to it.)
 
     // 'import/default': 'warn',
     // 'import/export': 'warn',
@@ -181,6 +183,9 @@ module.exports = {
     // 'import/no-named-as-default': 'warn',
     // 'import/no-named-as-default-member': 'warn',
     // 'import/no-unresolved': ['warn', { commonjs: true }],
+    // We don't support configuring Webpack using import source strings, so this
+    // is always an error.
+    'import/no-webpack-loader-syntax': 'error',
 
     // https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules
     'react/jsx-equals-spacing': ['warn', 'never'],

packages/eslint-config-react-app/package.json

@@ -14,7 +14,7 @@
     "babel-eslint": "6.1.2",
     "eslint": "3.5.0",
     "eslint-plugin-flowtype": "2.18.1",
-    "eslint-plugin-import": "1.12.0",
+    "eslint-plugin-import": "2.0.0",
     "eslint-plugin-jsx-a11y": "2.2.2",
     "eslint-plugin-react": "6.3.0"
   }

packages/react-scripts/package.json

@@ -40,7 +40,7 @@
     "eslint-config-react-app": "^0.2.1",
     "eslint-loader": "1.5.0",
     "eslint-plugin-flowtype": "2.18.1",
-    "eslint-plugin-import": "1.12.0",
+    "eslint-plugin-import": "2.0.0",
     "eslint-plugin-jsx-a11y": "2.2.2",
     "eslint-plugin-react": "6.3.0",
     "extract-text-webpack-plugin": "1.0.1",

packages/react-scripts/template/README.md

@@ -174,7 +174,7 @@ Then add this block to the `package.json` file of your project:
 Finally, you will need to install some packages *globally*:
 
 ```sh
-npm install -g [email protected] [email protected] [email protected] [email protected] eslint-plugin-import@1.12.0 [email protected] [email protected]
+npm install -g [email protected] [email protected] [email protected] [email protected] eslint-plugin-import@2.0.0 [email protected] [email protected]
 ```
 
 We recognize that this is suboptimal, but it is currently required due to the way we hide the ESLint dependency. The ESLint team is already [working on a solution to this](https://github.com/eslint/eslint/issues/3458) so this may become unnecessary in a couple of months.
@@ -362,7 +362,7 @@ Inside `index.html`, you can use it like this:
 
 Only files inside the `public` folder will be accessible by `%PUBLIC_URL%` prefix. If you need to use a file from `src` or `node_modules`, you’ll have to copy it there to explicitly specify your intention to make this file a part of the build.
 
-When you run `npm run build`, Create React App will substitute `%PUBLIC_URL%` with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL. 
+When you run `npm run build`, Create React App will substitute `%PUBLIC_URL%` with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL.
 
 In JavaScript code, you can use `process.env.PUBLIC_URL` for similar purposes: