Cannot find rxjs modules when using typescript/webpack build

Question

I'm trying to get rxjs to work within a typescript/webpack set up but after following the installation guide and starting up the webpack dev server it says it cannot find the module. I've looked around but can't seem to anything that can point me to a solution for my problem.

Just to clarify I've run the following commands npm install rxjs-es @types/es6-shim --save.

To set up typescript/webpack bundle, I referred to their installation guide.

tsconfig

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "target": "es6",
    "module": "es6",
    "jsx": "react",
    "allowJs": true
  }
}

webpack config

module.exports = {
    entry: './index.ts',
    output: {
        filename: 'bundle.js',
        path: __dirname
    },
    module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.js$/,
                loader: "source-map-loader"
            },
            {
                enforce: 'pre',
                test: /\.tsx?$/,
                use: "source-map-loader"
            }
        ],
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: [ 'babel-loader', 'ts-loader' ]
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    devtool: 'inline-source-map',
};

index

import * as d3 from 'd3';
import Rx from 'rxjs/Rx';


d3.select("body").append("span")
    .text("Hello, world!");

Rx.Observable.of(`Hello World`)
    .subscribe(result => console.log(result));

Error message:

I've tried using both rxjs and rxjs-es packages, and renaming the import to rxjs-es/Rx

Not sure if I'm missing something here, as it was very simple to install d3.js in comparison to this.

If you need any more info please say, any help is much appreciated, cheers!

Nikos Paraskevopoulos · Accepted Answer · 2017-05-29 13:00:46Z

1

What worked for me:

I started with the setup you describe, BUT changed the following:

npm installed rxjs, not rxjs-es
(EDIT) removed @types/es6-shim
added "moduleResolution": "node" to tsconfig.json
altered the import statement in index.ts as:
```
import * as Rx from 'rxjs';
```

...and it worked, both from within VSCode and from Webpack.

edited May 29, 2017 at 13:00

answered May 29, 2017 at 11:55

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

alexc Over a year ago

awesome - thanks! Also, having @types/es6-shim installed was unnecessary and threw a compiler error after using your solution. Just in case anyone else uses this

Nikos Paraskevopoulos Over a year ago

Ooops, yes I forgot: I too removed @types/es6-shim - adding to answer!

Collectives™ on Stack Overflow

Cannot find rxjs modules when using typescript/webpack build

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related