Next.js: Using Typescript loader with web pack

[chrismatheson]

I have a project which I'm having great success embedding next.js into.

currently i use web pack for my from end build, which uses the ts-loader to covert typescript => js.

Im trying to add the ladder to the next.js web pack config so that ts is transpired to ES6 before handing off to the standard build pipeline. I figure this should be reasonably safe, mostly i just want it to strip the type info out.

I have seen there is a typescript example, but it relies on doing the ts -> js separately from the next.js step which feels like a lot of unnecessary hitting of the disk.

so far i have

module.exports = {
  webpack: (config, { dev }) => {
    // Perform customizations to webpack config
    // config.resolve.extenstions =  [".js"]

    config.resolveLoader.modules.push("node_modules");
    config.module.rules.unshift({ test: /\.ts$/, loader: 'ts-loader' });
    return config
  }
}

however when i un-comment the line explaining to resolve extensions (which ill need to add ts to but haven't yet) the whole pipeline seems to stall & break down.

Id really love to get this working, I'm hopping someone has some advice on how to, debug the webpack pipeline (gain insight into whats going on) pr any other advise that might help.

Thanks in advance ! 😄

[interpfister]

Spent a few ours on this this morning - seems to still be failing on relative paths.

`// Still getting the following error with this configuration
// { Error: Cannot find module '../app/redux/global-reducer'
// at Function.Module._resolveFilename (module.js:469:15)
// at Function.Module._load (module.js:417:25)
// at Module.require (module.js:497:17)
// at require (internal/module.js:20:19)
// at Object. (.next\dist\pages\login.js:69:22)

// next.config.js
const path = require("path");

module.exports = {
webpack: (config, { dev }) => {
config.devtool = 'cheap-module-eval-source-map';
config.module.rules.push(
{
test: /.tsx?$/,
loaders: ['react-hot-loader/webpack', 'awesome-typescript-loader'],
}
);
if (!config.resolve.extensions) {
config.resolve.extensions = [];
}

config.resolve.extensions.push('.ts');
config.resolve.extensions.push('.tsx');
config.resolve.extensions.push('.js');
config.resolve.extensions.push('.jsx');
if (!config.resolve.root) {
  config.resolve.modules = [];
}

config.resolve.modules.push(path.resolve('./app'));
// Other module resolutions for your app go here.
config.resolve.modules.push(path.resolve('./node_modules'));

console.log(JSON.stringify(config));

return config;

}
}`

[chrismatheson]

Ive narrowed this down (kind of) to the fact that setting config.resolve.extenstions = [".js", ".json"] breaks the build pipeline (with no feedback)

the value by default is undefined and the web pack docs say that the default value is [".js", ".json"] so I'm not sure why this breaks everything

[drejohnson]

Would love to see first class typescript support!

[timneutkens]

This will only be possible when https://github.com/zeit/next.js/issues/1245 lands. Lets keep track of it there 👌