Allow custom extensions #2699

nelak · 2017-08-02T03:09:45Z

#2391 This PR adds support for custom extensions (.ts .tsx) based on the previous proposal: https://github.com/zeit/next.js/pull/2250/files#diff-0f2f34c098f5954f99483c9bd61e439dR51
Hope this also helps support .jsx

D1no · 2017-08-06T15:09:57Z

I would love to see this getting merged!

timneutkens · 2017-08-06T17:26:09Z

@nelak could you add tests for this? ❤️

nelak · 2017-08-06T21:16:36Z

@timneutkens I added an integration test for the custom extensions showcasing the usage of JSX and I added a new sample with-jsx to show how to use it.

timneutkens · 2017-08-06T21:22:46Z

@nelak than you very much! Looks good 👌 The test will help when Arunoda has time to take a look at it 👍 ❤️

nelak · 2017-08-17T13:29:02Z

@timneutkens @arunoda Anything else I can do to help so this can be merged

valorloff · 2017-08-25T14:09:09Z

Please, add integration sample for the JSX extensions showcasing in context of Firebase-Function hosting specificity!

ulrikstrid · 2017-08-28T10:28:33Z

If there is anything blocking this I would love to help

anaisbetts · 2017-09-05T19:13:50Z

This is looking pretty good for us, except that static HTML export is broken:

> next build && next export

> Using "webpack" config function defined in next.config.js.
ts-loader: Using typescript@2.5.2 and C:\Users\paulb\code\pulumi\pulumi-service\cmd\service-web\tsconfig.json
> Failed to build on C:\Users\paulb\AppData\Local\Temp\2d8827ed-3f74-4494-aaa3-a9fee5903a69
{ Error: C:\Users\paulb\code\pulumi\pulumi-service\cmd\service-web\out\_next\6c4331cd-421a-4bf7-80bc-ea271c311ce9\page\index.tsx
(2,18): error TS2339: Property '__NEXT_REGISTER_PAGE' does not exist on type 'Window'.
    at C:\Users\paulb\code\pulumi\pulumi-service\cmd\service-web\node_modules\@paulcbetts\next\dist\server\build\index.js:182:21
    at emitRecords.err (C:\Users\paulb\code\pulumi\pulumi-service\cmd\service-web\node_modules\webpack\lib\Compiler.js:269:13)
    at Compiler.emitRecords (C:\Users\paulb\code\pulumi\pulumi-service\cmd\service-web\node_modules\webpack\lib\Compiler.js:375:38)
    at emitAssets.err (C:\Users\paulb\code\pulumi\pulumi-service\cmd\service-web\node_modules\webpack\lib\Compiler.js:262:10)
    at applyPluginsAsyncSeries1.err (C:\Users\paulb\code\pulumi\pulumi-service\cmd\service-web\node_modules\webpack\lib\Compiler.js:368:12)
    at next (C:\Users\paulb\code\pulumi\pulumi-service\cmd\service-web\node_modules\tapable\lib\Tapable.js:218:11)
    at Compiler.compiler.plugin (C:\Users\paulb\code\pulumi\pulumi-service\cmd\service-web\node_modules\webpack\lib\performance\SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (C:\Users\paulb\code\pulumi\pulumi-service\cmd\service-web\node_modules\tapable\lib\Tapable.js:222:13)
    at Compiler.afterEmit (C:\Users\paulb\code\pulumi\pulumi-service\cmd\service-web\node_modules\webpack\lib\Compiler.js:365:9)
    at require.forEach.err (C:\Users\paulb\code\pulumi\pulumi-service\cmd\service-web\node_modules\webpack\lib\Compiler.js:360:15)
  errors:
   [ 'C:\\Users\\paulb\\code\\pulumi\\pulumi-service\\cmd\\service-web\\out\\_next\\6c4331cd-421a-4bf7-80bc-ea271c311ce9\\page\\index.tsx\n\u001b[37m(\u001b[39m\u001b[36m2\u001b[39m,\u001b[36m18\u001b[39m): \u001b[31merror TS2339: Property \'__NEXT_REGISTER_PAGE\' does not exist on type \'Window\'.\u001b[39m',
     'C:\\Users\\paulb\\code\\pulumi\\pulumi-service\\cmd\\service-web\\out\\_next\\6c4331cd-421a-4bf7-80bc-ea271c311ce9\\page\\index.tsx\n\u001b[37m(\u001b[39m\u001b[36m4\u001b[39m,\u001b[36m1\u001b[39m): \u001b[31merror TS2304: Cannot find name \'webpackJsonp\'.\u001b[39m' ],

This file probably needs to be index.jsx maybe?

          window.__NEXT_REGISTER_PAGE('/', function() {
            var comp = module.exports =
webpackJsonp([2],[],[534]);
            return { page: comp.default }
          })

srghma · 2017-09-05T19:25:16Z

also _document.tsx is ignored, reproduction

I wrote about that actually

nelak · 2017-09-06T00:11:14Z

@paulcbetts Can you provide me some context or sample and I'll try to take a look at it when I can

nelak · 2017-09-06T03:30:13Z

@paulcbetts I just gave this a try and at least for the with-typescript example you can get it to build and export properly the first time, excluding the out folder in the tsconfig.json will avoid it being recompiled on subsequent runs.

"exclude":[
        "node_modules",
        "out/**"
    ]

anaisbetts · 2017-09-06T17:22:19Z

@nelak What tsconfig.json are you using? It could be that yours isn't strict enough maybe?

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "moduleResolution": "node",
    "declaration": true,
    "sourceMap": true,
    "stripInternal": true,
    "experimentalDecorators": true,
    "pretty": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "forceConsistentCasingInFileNames": true,
    "strictNullChecks": true,
    "jsx": "react",
    "lib": [ "dom", "es2017" ]
  }
}

Another option you could try is to disable compiler errors during export entirely, since build will be picking them up already

nelak · 2017-09-06T17:48:59Z

@paulcbetts I've updated the PR to include the sample with the export functionality, which should work.
My guess on the issue, it seems that ts-loader is picking up the out/ folder and trying to compile it causing the issue you are seeing. With the tsconfig.json change I was able to produce more than one export.
Can you try excluding the out/ folder from the in tsconfig.json configuration as shown below:

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "moduleResolution": "node",
    "declaration": true,
    "sourceMap": true,
    "stripInternal": true,
    "experimentalDecorators": true,
    "pretty": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "forceConsistentCasingInFileNames": true,
    "strictNullChecks": true,
    "jsx": "react",
    "lib": [ "dom", "es2017" ]
  },
  "exclude":[
        "node_modules",
        "out/**"
    ]
}

D1no · 2017-09-16T11:55:48Z

Any ETA on this :/ ?

lednhatkhanh · 2017-09-19T15:10:29Z

This should be merged asap

kulshekhar · 2017-09-21T06:37:00Z

I need this for a project that I'm going to be using TypeScript for, and I'm willing to spend time on this if it helps. If there's anything I can do to help speed up the merging of this PR, let me know.

srghma · 2017-09-21T06:59:09Z

just want to remind that _document.tsx is ignored

timneutkens · 2017-09-28T20:53:32Z

server/resolve.js

-    join(i, 'index.js'),
-    i + '.json',
-    join(i, 'index.json')
+    ...getPagesPaths(config.pagesExtensions)


Why use a generator here 🤔

Because I wanted to leave open the possibility of handling multiple extensions.
Let say you want to support ts, tsx, jsx, etc... this avoids having to concat each of the combinations just having the generator yield all of the possibilities, since the generator is iterable you can concat it as shown above.

langri-sha · 2017-10-04T10:10:15Z

examples/with-jsx/next.config.js

+
+module.exports = {
+  // Add extensions
+  pagesExtensions: [


Would it be more convenient for users to be able to specify extensions as .${ext}?

https://webpack.js.org/configuration/resolve/#resolve-extensions

https://eslint.org/docs/user-guide/command-line-interface#--ext

D1no · 2017-10-24T20:30:46Z

@nelak @valorloff @ulrikstrid @paulcbetts @BjornMelgaard @lednhatkhanh @kulshekhar
Since this PR is kind of dead, go checkout static-react — we're looking into bringing a very modular and reacty typescript implementation to life: react-static/react-static#8

Contributions are very welcome !

kulshekhar · 2017-10-25T02:39:05Z

@D1no just curious - is that project used in production by anyone at all? I mean, it doesn't have a single test (which makes the travis badge somewhat baffling)

D1no · 2017-10-25T10:23:58Z

@kulshekhar yes, the project comes from an production environment. We do use it in an internal environment for a client and are very happy. And soon will lay over our own system on top of it. And of course by noozle.

Anyhow, the project is fairly young. But since it is build completely on top of well tested frameworks (React 16, React-Router, Webpack) with a very thin layer of stringing those together, without project proprietary implementations, E2E tests are something that should come in as soon the version settles. The leap forward here is really through React 16 hydration and React-Router v4 ability to create a AST of all routes used in the code.

I'd suggest just to try it out.

joslarson · 2017-10-25T15:18:02Z

@D1no why do you say this pull request is dead? I don't see any mention of that. What am I missing?

chingyawhao · 2017-11-21T07:09:54Z

Is this pull request still in consideration?
How can we help to have this merge asap?
There is this property pagesGlobPattern in the config of canary branch, isn't it in a way conflicting with pagesExtensions?

JeremyJonas · 2017-11-30T00:40:23Z

@nelak Any update on getting this merged in?

nelak · 2017-11-30T18:37:46Z

@JeremyJonas I once went through some bits of the code with @timneutkens so my guess is that this or some kind of variant will make it in at some point in the future.
Before it was possible to rebase and use this branch as needed but I can't confirm if it'll work since I haven't been keeping to date for a while now.

voydz · 2017-12-20T08:14:22Z

@timneutkens Are there any further updates on this, you got for us?

renehauck · 2018-01-30T08:22:59Z

any updates? 😿

timneutkens · 2018-01-30T14:32:09Z

This is superseded by #3578

…ary/examples/with-typescript Waiting for vercel/next.js#2250 and vercel/next.js#2699 and vercel/next.js#2391 to land to add proper support via Webpack

D1no mentioned this pull request Aug 23, 2017

Allow custom extensions (.ts .tsx .jsx) #2391

Closed

Florian-R mentioned this pull request Aug 25, 2017

Moving .jsx components from Create-React-App #2847

Closed

nelak added 5 commits September 6, 2017 00:27

Added support for typescript

48c2c06

Added support for multiple extensions

51e0114

Fixing failing resolve tests

6817da7

Adding custom extensions integration test

47a5d90

Adding with JSX example

708b2cc

nelak force-pushed the v3-beta branch from d3620d7 to 708b2cc Compare September 6, 2017 03:35

Adding export to sample

785b274

nelak changed the base branch from v3-beta to master September 6, 2017 03:38

Added exclude to avoid compiling unnecessary files

eee1f4f

nelak force-pushed the v3-beta branch from ee41e8b to eee1f4f Compare September 6, 2017 03:47

timneutkens mentioned this pull request Sep 8, 2017

Compile typescript to dist directory #2567

Closed

timneutkens reviewed Sep 28, 2017

View reviewed changes

langri-sha mentioned this pull request Oct 4, 2017

Allow use of filenames in exportPathMap #2973

Merged

langri-sha reviewed Oct 4, 2017

View reviewed changes

D1no mentioned this pull request Oct 8, 2017

Add example that shows TypeScript usage react-static/react-static#8

Closed

Merge branch 'master' into v3-beta

e1839c7

arunoda force-pushed the master branch 2 times, most recently from 647a42d to 33f8f28 Compare January 13, 2018 15:26

timneutkens closed this Jan 30, 2018

lock bot locked as resolved and limited conversation to collaborators Jan 30, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow custom extensions #2699

Allow custom extensions #2699

nelak commented Aug 2, 2017

D1no commented Aug 6, 2017

timneutkens commented Aug 6, 2017

nelak commented Aug 6, 2017

timneutkens commented Aug 6, 2017

nelak commented Aug 17, 2017

valorloff commented Aug 25, 2017

ulrikstrid commented Aug 28, 2017

anaisbetts commented Sep 5, 2017 •

edited

Loading

srghma commented Sep 5, 2017

nelak commented Sep 6, 2017

nelak commented Sep 6, 2017

anaisbetts commented Sep 6, 2017

nelak commented Sep 6, 2017

D1no commented Sep 16, 2017

lednhatkhanh commented Sep 19, 2017

kulshekhar commented Sep 21, 2017

srghma commented Sep 21, 2017

timneutkens Sep 28, 2017

nelak Sep 28, 2017

langri-sha Oct 4, 2017

D1no commented Oct 24, 2017

kulshekhar commented Oct 25, 2017

D1no commented Oct 25, 2017 •

edited

Loading

joslarson commented Oct 25, 2017

chingyawhao commented Nov 21, 2017 •

edited

Loading

JeremyJonas commented Nov 30, 2017

nelak commented Nov 30, 2017

voydz commented Dec 20, 2017

renehauck commented Jan 30, 2018

timneutkens commented Jan 30, 2018

Allow custom extensions #2699

Allow custom extensions #2699

Conversation

nelak commented Aug 2, 2017

D1no commented Aug 6, 2017

timneutkens commented Aug 6, 2017

nelak commented Aug 6, 2017

timneutkens commented Aug 6, 2017

nelak commented Aug 17, 2017

valorloff commented Aug 25, 2017

ulrikstrid commented Aug 28, 2017

anaisbetts commented Sep 5, 2017 • edited Loading

srghma commented Sep 5, 2017

nelak commented Sep 6, 2017

nelak commented Sep 6, 2017

anaisbetts commented Sep 6, 2017

nelak commented Sep 6, 2017

D1no commented Sep 16, 2017

lednhatkhanh commented Sep 19, 2017

kulshekhar commented Sep 21, 2017

srghma commented Sep 21, 2017

timneutkens Sep 28, 2017

Choose a reason for hiding this comment

nelak Sep 28, 2017

Choose a reason for hiding this comment

langri-sha Oct 4, 2017

Choose a reason for hiding this comment

D1no commented Oct 24, 2017

kulshekhar commented Oct 25, 2017

D1no commented Oct 25, 2017 • edited Loading

joslarson commented Oct 25, 2017

chingyawhao commented Nov 21, 2017 • edited Loading

JeremyJonas commented Nov 30, 2017

nelak commented Nov 30, 2017

voydz commented Dec 20, 2017

renehauck commented Jan 30, 2018

timneutkens commented Jan 30, 2018

anaisbetts commented Sep 5, 2017 •

edited

Loading

D1no commented Oct 25, 2017 •

edited

Loading

chingyawhao commented Nov 21, 2017 •

edited

Loading