Webpack loader with mixed TS and JS

Hey guys,

I’m trying to get both TS and JS being picked up by our loader, fun extra - we have shared files (both TS and JS) in our node_modules as well.

expo diagnostics:

  Expo CLI 3.11.7 environment info:
    System:
      OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
      Shell: 4.4.20 - /bin/bash
    Binaries:
      Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
      npm: 6.11.1 - ~/.nvm/versions/node/v10.16.3/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    npmPackages:
      @types/react: ^16.9.11 => 16.9.16 
      @types/react-native: ^0.60.22 => 0.60.25 
      @xstate/react: ^0.8.1 => 0.8.1 
      expo: ^36.0.0 => 36.0.0 
      react: 16.9.0 => 16.9.0 
      react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4 
      react-navigation: ^3.11.1 => 3.13.0 
    npmGlobalPackages:
      expo-cli: 3.11.7

Here’s my current webpack file:

const path = require('path')
const createExpoWebpackConfigAsync = require('@expo/webpack-config')

// source: https://docs.expo.io/versions/latest/guides/customizing-webpack/
// Expo CLI will await this method so you can optionally return a promise.

``module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv)
  // If you want to add a new alias to the config.
  // config.resolve.alias['moduleA'] = 'moduleB';
  // Maybe you want to turn off compression in dev mode.
  if (config.mode === 'development') {
    config.devServer.compress = false
  }

  // Or prevent minimizing the bundle when you build.
  if (config.mode === 'production') {
    config.optimization.minimize = false
  }
  config.resolve = {
    extensions: [".ts", ".tsx", ".js", ".json"]
  }
  config.module.rules = [{
    // Include ts, tsx, js, and jsx files.
    test: /\.(ts|jsx|js)x?$/,
    // exclude: /node_modules/,
    loader: 'ts-loader'
  }]
  config.output = {
    filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
  }

  return config
}

It still doesn’t parse a .ts file in node_module correctly. Saying:

Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export enum DiscountReasons {
|   Referral = 'Referral',
|   Incentive = 'Incentive',

I’m really at a loss. Have no idea where to start.

You can try including the module names for the expo babel loader to transpile. Normally you wouldn’t want to use TS node_modules though.

1 Like

Thanks Evan! What it was is I was stupid and thought I could just rename my webpack from .js to .ts and it would work! Huzzah! It didn’t, but I didn’t catch that it was the cause - apparently my config was fine.

As an aside, I agree about the TS files in node - but we have a monorepo we share code through node_modules, and I won’t want to have to install or compile on each change of these packages to get it running or updating :slight_smile: