TypeScript and Webpack import errors

This is related to #649

I’m trying to use Raven in a Typescript project and I can’t get the import to work correctly - I think there is something strange in the typings setup.

In my app I have the following:

import Raven from 'raven-js'
Raven.config('my dsn).install()

This code compiles correctly, but fails at runtime:

Uncaught TypeError: Cannot read property 'config' of undefined(anonymous function) @ index.tsx:12

My first thought was I was including the type definitions for raven-js, but not the code, but if I inspect the compiled JavasScript file I can verify that the raven-js is present.

If I try to import like this:

import * as Raven from 'raven-js'
Raven.config('my dsn').install()

I get a syntax error: error TS2339: Property 'config' does not exist on type 'typeof 'raven-js''., but this does install Raven into the page (it’s not null):

import * as Raven from 'raven-js'
console.log(Raven)

produces:

raven Raven {_hasJSON: true, _hasDocument: true, _lastCapturedException: null, _lastEventId: null, _globalServer: null…}

So when I import Raven one way the type definitions work, but runtime fails, and if I import the other way the type definitions work but runtime fails.

Versions

• typescript: 2.0.3
• webpack: 1.13.2
• npm: 3.9.3
• node: v6.2.1

tsconfig

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "jsx": "react",
    "noImplicitAny": true,
    "noImplicitThis": true,
    "sourceMap": true,
    "allowJs": true,
    "strictNullChecks": false // TODO - enable this
  },
  "exclude": [
    "custom_typings", "node_modules"
  ]
}

typings

{
  "globalDependencies": {
    ...
    "ravenjs": "registry:dt/ravenjs#0.0.0+20160907111239",
    ...
}

[marcomorain]

OK, something really odd is up - if I don’t use typings to install type definitions, but instead include a copy of raven.d.ts directly in my project everything works as expected, using import * as Raven from 'raven-js'.

[kleeb]

Thanks Chris. I am doing it slightly different in the Ionic project:

in copy.config.js I added copy job

  copyRaven: {
    src: ['{{ROOT}}/node_modules/raven-js/dist/raven.min.js', '{{ROOT}}/node_modules/raven-js/dist/raven.min.js.map'],
    dest: '{{BUILD}}'
  }

and simply added raven.min.js to the index.html.