With TypeScript the meteor packages can't be found

[arichter83]

How can I let the ts-loader be aware of the Meteor packages? If I have a ts / tsx file, I get the following error when using import { withTracker } from 'meteor/react-meteor-data';:

ERROR in /example.tsx
[tsl] ERROR in /example.tsx(3,29)
TS2307: Cannot find module 'meteor/react-meteor-data'.

This is my webpack.config.js:

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const meteorExternals = require('webpack-meteor-externals');
// const nodeExternals = require('webpack-node-externals');

/**
 * currently does not compileOnSave
 * https://github.com/TypeStrong/ts-loader/issues/40
 * https://github.com/jcoreio/crater/issues/157 - more complex settings?
 */
const clientConfig = {
  entry: './client/main.tsx',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
//  devtool: 'inline-source-map',
  plugins: [
    new HtmlWebpackPlugin({
      template: './client/main.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  resolve: {
    extensions: ['*', '.js', '.jsx', '.tsx', '.ts']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    hot: true
  },
  externals: [
    meteorExternals()
  ]
};

const serverConfig = {
  entry: [
    './server/main.js'
  ],
  target: 'node',
  module: {
    rules: [{
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  /*
  devServer: {
    hot: true
  },
  */
  externals: [
    meteorExternals(),
//    nodeExternals() // in order to ignore all modules in node_modules folder
  ]
};

module.exports = [clientConfig, serverConfig];

And this my tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["DOM", "ES6", "ScriptHost"],
    "module": "commonjs",
    "moduleResolution": "node",
    "alwaysStrict": true,
    "sourceMap": true,
    "jsx": "react",
    "allowJs": true,
    "noImplicitAny": false,
    "strictNullChecks": false,
    "allowSyntheticDefaultImports": true,
    "rootDir": ".",
    "baseUrl": ".",
    "outDir": "./.tscout/",
    "paths": {
      "*": ["*"]
    }
  },
  "compileOnSave": true,
  "include": [
    "client/**/*",
    "server/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "files": [
    "imports/types/declarations.d.ts",
    "lib/router.js"
  ]
}

Any thoughts? Help is appreciated.

[ardatan]

It is related to TypeScript, so you have to install required typings. I am not sure if there is a correct typing package or something like that. But for now, you can add

declare module 'meteor/react-meteor-data' {
 var x: any;
 export = x;
}

to your declarations.d.ts file.

[arichter83]

Great! Thank you.