Implementing the module pattern with typescript?

[rylnd]

Hi! First off, thanks for the great library.

The main thing I'm looking for is confirmation/denial of this as a possibility; I simply don't have enough knowledge to know whether this is conceptually sound. If there are examples or tips you could provide, all the better.

I'm relatively new to the latest generation of frontend build tools, so pardon any ignorance displayed here :wink:.

The Problem

I'm trying to integrate builder into a monorepo of ours, and I'm having an issue with typescript. I haven't seen any mention of typescript in the issues or the documentation, so here I am.

The Setup

We're using webpack to build our applications, and have a rule like the following:

// webpack.config.js
// ... rules: [
{
  test: /\.tsx?$/,
  use: ['babel-loader', 'awesome-typescript-loader'],
  include: [path.resolve(__dirname, '../src')],
  exclude: ['node_modules', '__tests__'],
}

The issue as I see it is thus: if I have a .ts(x) file with something like:

import dep from 'archetype-dev/dep';

then when awesome-typescript-loader sees this file, it simply doesn't know how to resolve 'archetype-dev/dep' and we get a Cannot find module 'archetype-dev/dep' from at-loader. The babel and webpack plugins don't factor into it, because the error comes from typescript.

The (non-) Solution

I played a bit with the (sort of broken) useBabel option for awesome-typescript-loader, thinking that perhaps we could do it all in one pass:

// webpack.config.js
// ... rules: [
{
  test: /\.tsx?$/,
  use: [
    {
      loader: 'awesome-typescript-loader?useBabel=true',
      options: {
        babelOptions: {
          babelrc: false,
          presets: [['es2015']],
          plugins: [
            [
              'replace-require',
              {
                'web-apps': "require('web-apps/require')",
              },
            ],
          ],
        },
      },
    },
  ],
  include: [path.resolve(__dirname, '../src')],
  exclude: ['node_modules', '__tests__'],
},

but I was still unable to get past the typescript errors; the best I got was an additional error (it seemed like the plugin produced invalid code):

ERROR in ./src/index.tsx
Module not found: Error: Can't resolve 'require' in '/Users/ryland/code/project/src'
 @ ./src/index.tsx 19:14-32

That's where I'm at. Thanks in advance for any help.

[ryan-roemer]

Hi @rylnd -- If you can create a minimal repository with install + error reproduction steps, I can jump in and see if I can figure out a solution for you.

[rylnd]

@ryan-roemer thanks for the fast response; I'll get that up as soon as I can.

[rylnd]

@ryan-roemer in the process of trying to build a problematic example with typescript, I hit a problem with the babel plugin and straight .js files. rylnd/module-pattern-typescript-demo#1 demonstrates the issue I'm currently seeing; once that's resolved I can continue with the typescript example.

Thanks again for your help.

[ryan-roemer]

Thanks @rylnd ! Will dive into this when I get a chance (this week or next) -- I've been a bit swamped lately...

[rylnd]

@ryan-roemer awesome! I'll probably give it another pass myself to see if I can't figure out what this intermediate problem is; I'm still not sure if it's a configuration issue or a legitimate bug.