CODEWITHSUNDEEP
typescriptwebpackrxjs
alexc
alexc

Reputation: 1310

Cannot find rxjs modules when using typescript/webpack build

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:

enter image description here

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!

Upvotes: 1

Views: 843

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40328

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.

Upvotes: 1

Related Questions