Skip to content

Warn on JSX file extension with check-filename-webpack-plugin #361

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 8 commits into from
Closed

Warn on JSX file extension with check-filename-webpack-plugin #361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4aee1f6
Add check-filename-webpack-plugin to warn on JSX file extension
tizmagik Aug 4, 2016
9035a55
Add '.jsx' to resolve.extensions[] (only to be blocked by CheckFilena…
tizmagik Aug 4, 2016
0a35ede
Don't do it for prod
tizmagik Aug 4, 2016
77e5e3e
Add check-filename-webpack-plugin to warn on JSX file extension
tizmagik Aug 4, 2016
1348773
Add '.jsx' to resolve.extensions[] (only to be blocked by CheckFilena…
tizmagik Aug 4, 2016
38c9976
Merge branch 'master' of https://github.com/tizmagik/create-react-app…
tizmagik Aug 4, 2016
be18c81
Merge branch 'master' of https://github.com/facebookincubator/create-…
tizmagik Aug 5, 2016
9e28379
Fix merge conflict
tizmagik Aug 5, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion config/webpack.config.dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
var CheckFilenamePlugin = require('check-filename-webpack-plugin');
var WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeModulesPlugin');
var paths = require('./paths');
var env = require('./env');
Expand Down Expand Up @@ -66,7 +67,8 @@ module.exports = {
},
resolve: {
// These are the reasonable defaults supported by the Node ecosystem.
extensions: ['.js', '.json', ''],
// We also include .jsx extension in order to warn with CheckFilenamePlugin.
extensions: ['.jsx', '.js', '.json', ''],
alias: {
// This `alias` section can be safely removed after ejection.
// We do this because `babel-runtime` may be inside `react-scripts`,
Expand Down Expand Up @@ -179,6 +181,14 @@ module.exports = {
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebookincubator/create-react-app/issues/240
new CaseSensitivePathsPlugin(),
// Warn on using .jsx files, prefer using .js only.
// See https://github.com/facebookincubator/create-react-app/issues/290
new CheckFilenamePlugin({
regex: /\.jsx$/,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of creating a plugin that can be also solved by a loader (which reuses webpack configuration API):

{
  test: /\.jsx$/,
  loader: 'abort',
  query: {
    message: '[resource]: .jsx extensions are not allowed, use .js extension.'
  }
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this an actual loader or do you propose to create one?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

propose

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a good idea, too. @gaearon please advise.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reasoning behind choosing loader vs. plugin:

  1. Loader can reuse path matching logic.
  2. Loader functional scope is more restrictive: you see exactly what it affects vs. plugin which can do literally anything under the hood. I'd expect the less custom plugins the better, especially when you eject and start modifying config.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. I think a loader is the more technically correct solution.

error: function(filename) {
return 'Module load aborted: .jsx extensions are not allowed, use .js extensions only. See create-react-app/issues/290 for more info.\n\tFor: ' + filename;
}
}),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"babel-runtime": "6.11.6",
"case-sensitive-paths-webpack-plugin": "1.1.2",
"chalk": "1.1.3",
"check-filename-webpack-plugin": "^1.0.0",
"connect-history-api-fallback": "1.2.0",
"cross-spawn": "4.0.0",
"css-loader": "0.23.1",
Expand Down
2 changes: 2 additions & 0 deletions template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,8 @@ You need to **put any JS and CSS files inside `src`**, or Webpack won’t see th
You can, however, create more top-level directories.
They will not be included in the production build so you can use them for things like documentation.

> NOTE: Only use `.js` file extensions for all JavaScript files inside `src`, including any React components. `.jsx` is explicitly not allowed, and an error will be thrown during compilation. See [create-react-app/issues/290](https://github.com/facebookincubator/create-react-app/issues/290) for more info.

## Available Scripts

In the project directory, you can run:
Expand Down