Avraam Mavridis Avraam Mavridis - 19 days ago 15
TypeScript Question

Import node module to typescript/systemjs

I am trying to use the react blueprint library, so I

npm install
it and then I tried to import it like:

import { Spinner } from "@blueprintjs/core"


I am getting
system.src.js:1051 GET http://localhost:8888/@blueprintjs/core 404 (Not Found)


I thought that it has to do with the typings and since there is a
ts
file on the module I tried

/// <reference path="../node_modules/@blueprintjs/core/dist/index.d.ts" />


or

/// <reference path="node_modules/@blueprintjs/core/dist/index.d.ts" />


I am still getting the same error. I am new to Typescript, how can I consume a node module like this?

Answer

You need to configure SystemJS so it can find and load all necessary modules in the browser. See this answer for general explanation. Here is complete minimal example that creates blueprint spinner:

install prerequisites

npm i @blueprintjs/core
npm i react
npm i react-dom
npm i react-addons-css-transition-group
npm i @types/react
npm i @types/react-dom
npm i @types/dom4
npm i typescript
npm i systemjs

example code in test.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Spinner } from "@blueprintjs/core";

const mySpinner = <Spinner/>;

ReactDOM.render(mySpinner, document.body);

example web page

<!doctype html>
<html>
<head>

<link href="node_modules/@blueprintjs/core/dist/blueprint.css" rel="stylesheet" />

<script src="node_modules/systemjs/dist/system.src.js"></script>

<script>
    window.process = { env: {}};
    System.config({
        map: {
            'react': 'node_modules/react',
            'react-dom': 'node_modules/react-dom',
            'react-addons-css-transition-group': 'node_modules/react-addons-css-transition-group/index.js',
            'fbjs': 'node_modules/fbjs',
            'tether': 'node_modules/tether/dist/js/tether.js',
            'dom4': 'node_modules/dom4/build/dom4.max.js',
            '@blueprintjs/core': 'node_modules/@blueprintjs/core/dist',
            'classnames': 'node_modules/classnames/index.js',
            'object-assign': 'node_modules/object-assign/index.js',
            'pure-render-decorator': 'node_modules/pure-render-decorator/index.js'
        },
        packages: {
            'react': { main: 'lib/React.js' },
            'react-dom': { main: 'lib/ReactDOM.js' },
            'fbjs': {},
            '@blueprintjs/core': { main: 'index.js' },
            '@blueprintjs/core/common': { main: 'index.js' },
            '@blueprintjs/core/components': { main: 'index.js' }
        }
    });
    System.import('./test.js').then(function(t) {
    }).catch(function(e) {
        console.error(e);
    });
</script>


</head>
<body>

</body>
</html>

Note: It looks like SystemJS is unable to load react and react-dom using their bundles provided in node_modules/react/dist/react.js and node_modules/react-dom/dist/react-dom.js. It can however load everything from individual source files from node_modules/react/lib and node_modules/react-dom/lib, provided that you define process variable in the browser.