Start of jsx extension support

server/build/webpack.js

@@ -48,7 +48,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false,
       ]
     }
 
-    const pages = await glob('pages/**/*.js', { cwd: dir })
+    const pages = await glob('pages/**/*.js*', { cwd: dir })
     const devPages = pages.filter((p) => p === 'pages/_document.js' || p === 'pages/_error.js')
 
     // In the dev environment, on-demand-entry-handler will take care of
@@ -178,22 +178,22 @@ export default async function createCompiler (dir, { dev = false, quiet = false,
   }
 
   const rules = (dev ? [{
-    test: /\.js(\?[^?]*)?$/,
+    test: /\.jsx?(\?[^?]*)?$/,
     loader: 'hot-self-accept-loader',
     include: [
       join(dir, 'pages'),
       nextPagesDir
     ]
   }, {
-    test: /\.js(\?[^?]*)?$/,
+    test: /\.jsx?(\?[^?]*)?$/,
     loader: 'react-hot-loader/webpack',
     exclude: /node_modules/
   }] : [])
   .concat([{
     test: /\.json$/,
     loader: 'json-loader'
   }, {
-    test: /\.(js|json)(\?[^?]*)?$/,
+    test: /\.(jsx?|json)(\?[^?]*)?$/,
     loader: 'emit-file-loader',
     include: [dir, nextPagesDir],
     exclude (str) {
@@ -205,8 +205,8 @@ export default async function createCompiler (dir, { dev = false, quiet = false,
       // webpack knows how to handle them. (That's how it can do tree-shaking)
       // But Node.js doesn't know how to handle them. So, we have to transpile them here.
       transform ({ content, sourceMap, interpolatedName }) {
-        // Only handle .js files
-        if (!(/\.js$/.test(interpolatedName))) {
+        // Only handle .js/.jsx files
+        if (!(/\.jsx?$/.test(interpolatedName))) {
           return { content, sourceMap }
         }
 
@@ -259,7 +259,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false,
       presets: [require.resolve('./babel/preset')]
     }
   }, {
-    test: /\.js(\?[^?]*)?$/,
+    test: /\.jsx?(\?[^?]*)?$/,
     loader: 'babel-loader',
     include: [dir],
     exclude (str) {
@@ -289,6 +289,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false,
       chunkFilename: '[name]'
     },
     resolve: {
+      extensions: ['.js', '.json', '.jsx'],
       modules: [
         nextNodeModulesDir,
         'node_modules',

server/resolve.js

@@ -27,18 +27,22 @@ function getPaths (id) {
   const i = sep === '/' ? id : id.replace(/\//g, sep)
 
   if (i.slice(-3) === '.js') return [i]
+  if (i.slice(-4) === '.jsx') return [i]
   if (i.slice(-5) === '.json') return [i]
 
   if (i[i.length - 1] === sep) {
     return [
       i + 'index.js',
+      i + 'index.jsx',
       i + 'index.json'
     ]
   }
 
   return [
     i + '.js',
     join(i, 'index.js'),
+    i + '.jsx',
+    join(i, 'index.jsx'),
     i + '.json',
     join(i, 'index.json')
   ]

test/integration/basic/pages/jsx-extension.jsx

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export default () => <h1>JSX Extension</h1>

test/integration/basic/test/rendering.js

@@ -36,6 +36,11 @@ export default function ({ app }, suiteName, render) {
       expect(style.text()).toMatch(/color:blue/)
     })
 
+    test('renders jsx extension', async () => {
+      const html = await render('/jsx-extension')
+      expect(html.includes('JSX Extension')).toBeTruthy()
+    })
+
     test('renders properties populated asynchronously', async () => {
       const html = await render('/async-props')
       expect(html.includes('Diego Milito')).toBeTruthy()

test/isolated/resolve.test.js

@@ -16,6 +16,11 @@ describe('Resolve', () => {
     expect(p).toBe(join(dataPath, 'two.json'))
   })
 
+  it('should resolve a .jsx path', async () => {
+    const p = await resolve(join(dataPath, 'three.jsx'))
+    expect(p).toBe(join(dataPath, 'three.jsx'))
+  })
+
   it('should resolve a module without an extension', async () => {
     const p = await resolve(join(dataPath, 'one'))
     expect(p).toBe(join(dataPath, 'one.js'))
@@ -36,11 +41,16 @@ describe('Resolve', () => {
     expect(p).toBe(join(dataPath, 'bb', 'index.json'))
   })
 
-  it('should resolve give priority to index.js over index.json', async () => {
+  it('should resolve give priority to index.js over index.json and index.jsx', async () => {
     const p = await resolve(join(dataPath, 'cc'))
     expect(p).toBe(join(dataPath, 'cc', 'index.js'))
   })
 
+  it('should resolve a .jsx module in a directory', async () => {
+    const p = await resolve(join(dataPath, 'dd'))
+    expect(p).toBe(join(dataPath, 'dd', 'index.jsx'))
+  })
+
   it('should throw an error for non existing paths', async () => {
     try {
       await resolve(join(dataPath, 'aaa.js'))