Create-react-app: Forbid using ! in import paths

Created on 24 Sep 2016 · 8Comments · Source: facebook/create-react-app

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.

up for grabs!

Source

gaearon

Most helpful comment

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.

fson on 30 Sep 2016

🎉2

All 8 comments

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

jquense on 24 Sep 2016

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

gaearon on 24 Sep 2016

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.

jquense on 24 Sep 2016

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.