Forbid using ! in import paths

[gaearon]

I've heard a few reports that people use Webpack import extension syntax (like !!file!./stuff) to customize Create React App loaders. We don't support this officially, and we may accidentally (or on purpose) break this in the future. This also couples apps to Webpack resolution mechanism too hard.

We need to write a Webpack plugin that throws in parsing stage (https://github.com/webpack/docs/wiki/plugins#the-parser-instance-compilerparser) if you attempt to require or import something with ! in the path.

[jquense]

I'm not certain but I'm pretty sure you can't do that because many loaders, use this syntax internally, as part of their implementation. Not sure you could distinguish between those requests and the user made ones, maybe if you plugin before the loaders run? You may also not be using loaders that do this, but some of "core" ones used to at least

[gaearon]

Yeah, we'd need to limit this error to the code in user app folder.

[jquense]

Yeah, we'd need to limit this error to the code in user app folder.

even still, the loaders will actively change that code, if the plugin runs after the code has been through the loaders, it doesn't matter where it's original location on disk is. Tho I think if you are just throwing an error you probably can run the plugin before any loader activity.

[SpaceK33z]

Maybe it would be an idea to write / use an ESLint plugin for this then? eslint-plugin-import would be a good place for that.

[fson]

Good idea, @SpaceK33z. I think eslint-plugin-import would be an easy and logical place to add this, and this way it also applies to user code only.

I opened a PR in eslint-plugin-import that implements this: import-js/eslint-plugin-import#586

[SpaceK33z]

Nice work @fson!

[fson]

eslint-plugin-import 2.0.0 was released yesterday with this new rule. I'm making a pull request to add it in our config today.

[gaearon]

Awesome! Note you'll need to update every place where we hardcoded the versions in docs.
😞