-
Notifications
You must be signed in to change notification settings - Fork 26.9k
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.
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
Add .jsx extension support #3376
Add .jsx extension support #3376
Conversation
@@ -0,0 +1,3 @@ | |||
export const World = () => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The filepath for this test contains custom-extensions
text. Since this is just JSX, it'd simply write a testcase in the basic
test cases.
* examples: add create-next-app * fix with-typescript readme
…l#3337) For upgrading I used flow-upgrade module by https://yarnpkg.com/en/package/flow-upgrade
2 changes: `passHref` - just added a cautionary note on the importance of `passHref`. We had a few days of no-href links on our site b/c we used a custom component instead of a raw `<a>` tag, and Google bot wasn't crawling our links (confirmed in Google cache). Hurt our SEO a bit, so I thought it was worth noting. `useFileSystemPublicRoutes` - this is mentioned in vercel#914 , but it doesn't appear any doc was actually added. We use `next-routes`, and we were serving all the files in `/pages/` in addition to their route patterns (ie duplicate content), which can be a pain w/ SEO and duplicate content.
* Pulled encoding to top of head (vercel#3214) * Remove next.d.ts to use @types/next (vercel#3297) * Add with-mobx-state-tree example (vercel#3179) * Adapt with-mobx example for with-mobx-state-tree * Remove unnecessary lastUpdate parameter to show off snapshot * update readme * make other.js more closely mimic index.js * Upgrade styled-jsx to v2.2.1 Includes some bug fixes. * Fix linting
@@ -0,0 +1,14 @@ | |||
module.exports = function ({types}) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add a comment with what this plugin does. May be we need a better name for the plugin. transform
seems like too generic.
|
||
const query = loaderUtils.getOptions(this) | ||
|
||
if (query.validateFile) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add a comment about how this validateFile
method comes here.
if (i.slice(-5) === '.json') return [i] | ||
|
||
if (i[i.length - 1] === sep) { | ||
return [ | ||
i + 'index.js', | ||
i + 'index.jsx', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's used by the ondemandentries plugin to resolve the file within webpack. That's why it's needed here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
next build -> next start etc work fine without this.
@@ -0,0 +1,4 @@ | |||
import {World} from '../components/world' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add another case where we are importing with ../components/world.jsx
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done 👍
Implements part of #2391
Fixes #200
What it does
Allows components to be created with the
.jsx
extension.How it works
On the webpack side we define .jsx to be resolved. And emit-file-loader will emit files ending in .jsx as .js. So inside of
.next
there will only be.js
files.On the server side we make sure
.jsx
is removed from import statements using a babel plugin. So you can doimport Hello from '../components/hello.jsx
. This is done because Node.js doesn't know how to resolve.jsx
.