Add .jsx extension support #3376
Conversation
| @@ -0,0 +1,3 @@ | |||
| export const World = () => ( | |||
There was a problem hiding this comment.
The filepath for this test contains custom-extensions text. Since this is just JSX, it'd simply write a testcase in the basictest 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.
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.
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.
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.
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.
Add another case where we are importing with ../components/world.jsx
Implements part of #2391
Fixes #200
What it does
Allows components to be created with the
.jsxextension.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
.nextthere will only be.jsfiles.On the server side we make sure
.jsxis 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.