Update package.json

[nelak]

@BjornMelgaard Let keep tracking your issues here.
I'm adding the missing loader.
I've been able to run your sample properly without issues doing npm link next after npm link your other repository.

[nelak]

@BjornMelgaard You can find me online on the zeit-community slack

[srghma]

wow, eeee, with ts-loader it works)

[srghma]

@nelak thank you very much)

[nelak]

Happy to have been able to help.
It'd be best if we can clean up the comments on the zeit thread and also state that the solution has worked for you so we can push the acceptance of the PR :)

[srghma]

@nelak yep cleaned)

[srghma]

@nelak , can you help one more time
I want to import App from 'containers/App', but paths from tsconfig doesnt work
P.S. just pushed new version

[nelak]

@BjornMelgaard I don't see an easy way out of this right now.
We would need to be able to somehow specify the aliases at the transform method of the emit-file-loader plugin. Since we are piggybacking on the existing emit-file-loader that is out of scope.
This is not an easy case for copy and paste as the the biggest problem for emulating the functionality relies on the next.config.js being ES5 while the rest of the code is built around ES6 and transformed with babel to ES5.
To be able to override the transform you'd need to emulate the same functionally from the webpack.js definition which I don't recommend because you'll probably end up losing the aliases to the next components.

[srghma]

@nelak ok, thanks, kind of get it

[srghma]

@nelak, what do you think about using awesome-typescript-loader?
it has https://github.com/s-panferov/awesome-typescript-loader#advanced-path-resolution-in-typescript-20 that can be useful

P.S. updated, dont work, same error

[nelak]

@BjornMelgaard I believe this should really be handled by webpack when it does the module resolution through aliases to minimize configuration and points of failure. The problem is that the files are emitted with the unresolved path although typescript was able to resolve the references. I don't know if it's possible but another option would be to emit the resolved path at compile time, so that compiled files have their paths already resolved, which probably involves looking at the typescript compiler options.

[srghma]

@nelak I cant, just updated

it says

 ✘  ~/projects/nextjs-typescript-boilerplate   master ●  yrd
yarn run v0.28.4
$ node server/index.js
> Using "webpack" config function defined in next.config.js.
{ pages: '/home/bjorn/projects/nextjs-typescript-boilerplate/pages',
  components: '/home/bjorn/projects/nextjs-typescript-boilerplate/app/components',
  containers: '/home/bjorn/projects/nextjs-typescript-boilerplate/app/containers' }


 DONE  Compiled successfully in 2665ms                                                                                        3:28:47 PM

> Ready on http://localhost:3000
Client pings, but there's no entry for page: /
> Building page: /
ts-loader: Using typescript@2.5.1 and /home/bjorn/projects/nextjs-typescript-boilerplate/tsconfig.json


 DONE  Compiled successfully in 3459ms                                                                                        3:28:52 PM

{ Error: Cannot find module 'containers/App'
    at Function.Module._resolveFilename (module.js:489:15)
    at Function.Module._load (module.js:439:25)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/bjorn/projects/nextjs-typescript-boilerplate/.next/dist/pages/index.js:5:13)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3) code: 'MODULE_NOT_FOUND' }

---

tried

    config.resolve.alias = {
      ...config.resolve.alias,
      'pages':      path.resolve(ROOT_PATH, '.next/dist/pages'),
      'components': path.resolve(ROOT_PATH, '.next/dist/app/components'),
      'containers': path.resolve(ROOT_PATH, '.next/dist/app/containers')
    }

says

 ~/projects/nextjs-typescript-boilerplate   master  yrd
yarn run v0.28.4
$ node server/index.js
> Using "webpack" config function defined in next.config.js.
{ pages: '/home/bjorn/projects/nextjs-typescript-boilerplate/.next/dist/pages',
  components: '/home/bjorn/projects/nextjs-typescript-boilerplate/.next/dist/app/components',
  containers: '/home/bjorn/projects/nextjs-typescript-boilerplate/.next/dist/app/containers' }


 DONE  Compiled successfully in 2618ms                                                                                        3:34:12 PM

> Ready on http://localhost:3000
> Building page: /
ts-loader: Using typescript@2.5.1 and /home/bjorn/projects/nextjs-typescript-boilerplate/tsconfig.json


 ERROR  Failed to compile with 1 errors                                                                                       3:34:18 PM

This module was not found:

* containers/App in ./pages/index.tsx?entry

To install it, you can run: npm install --save containers/App
(node:9422) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead
{ Error: Cannot find module 'containers/App'
    at Function.Module._resolveFilename (module.js:489:15)
    at Function.Module._load (module.js:439:25)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/bjorn/projects/nextjs-typescript-boilerplate/.next/dist/pages/index.js:5:13)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3) code: 'MODULE_NOT_FOUND' }

[nelak]

@BjornMelgaard I know, I had already tried that before that was what my previous comment was referring to when I mentioned that you need to override the emit-file-loader transform since it's where the webpack aliases are being resolved.
If I have time next week I'll try to look into it, but I don't see it a blocker since typescript works and this is just to avoid having to write the relative paths.

[nelak]

@BjornMelgaard PS: I believe next.js suffers from this same issues also

[srghma]

are you saying that I want to change my typescriptLoader in next.config.js so it will look like this, but for ts, not js?

P.S. will really appreciate if you look

[nelak]

Not the typescriptLoader but the emitLoader. The problem of overriding the transform method is again that next.config.js is ES5 which will give tons of headaches. I see two options, modifying next to allow passing other aliases (I think this may work), or figure out how to make typescript output the relative paths in the compiled js.

[nelak]

@BjornMelgaard I understand what you are trying to do but I think it won't work unless you can add alias the paths in webpack as next is doing for their components. Considering the typescript docs I'd say having typescript output the relative paths is probably not supported.
From the typescript docs: http://www.typescriptlang.org/docs/handbook/module-resolution.html

Base URL
Using a baseUrl is a common practice in applications using AMD module loaders where modules are >“deployed” to a single folder at run-time. The sources of these modules can live in different directories, >but a build script will put them all together.

[srghma]

The problem of overriding the transform method is again that next.config.js is ES5 which will give tons of headaches
are rewriting nextjs to use universal-webpack will resolve this issue? its in plans right now
P.S. trying it out right now

[nelak]

@BjornMelgaard I've just experimented a little bit and as I said before the solution seems to be to provide the aliases to webpack, the problem is that those aliases need to be calculated relative to the folder location or you'll start getting failures again.
Next does something like this for its components, if I understood correctly they use the relativeResolve method to calculate the relative component location.
So besides a config for passing the aliases you'd need something like that to resolve the paths relative to components, relative references will work but you will get failures when referencing a component located in folder1 from folder2. See example:
components
|- folder1
|- folder2 (referencing components in folder1 will fail)

pages
|-index (referencing components will work, but not when components reference each other)

[nelak]

@BjornMelgaard Check #3 for a possible solution