Search code examples
node.jsreactjstypescriptsystemjs

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 tsfile 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?

Solution

  • 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.