1

I have the following problem: I import a library uploaded to npm, OpenDolphin, which seems to be implemented in TS with a main.js with all the export declarations.

I try to use the library in my TypeScript code like following: 

import { OpenDolphin, ClientDolphin } from 'openDolphin/main';

Then I try to use this: 

    let builder = OpenDolphin.makeDolphin();

After transpiling this to ES5, I get the following error in chrome: 

SyntaxError: Unexpected token export

It seems, that the main.js of the library containing the export statements, are somehow not processed and just append to the final dist file: 

//snipped from the final js file
/* 469 */
/***/ function(module, exports) {

export { Attribute } from './js/dolphin/Attribute'; 
    ...all the rest of OpenDolphin export statements.

}

For me, as a TS (JS Toolchain) beginner, it seems, that this library is somehow not correctly processed/transpiled or something similiar.

My setup:

package.json:

{
  "name": "FrontendExample",
  "version": "1.0.0",
  "private": false,
  "description": "",
  "author": "<AUTHOR>",
  "license": "MIT",
  "preferGlobal": false,
  "scripts": {
    "build": "webpack --display-error-details"
  },
  "dependencies": {
    "@cycle/rxjs-run": "3.2",
    "@cycle/dom": "12.2.0",
    "@cycle/isolate": "1.4.x",
    "OpenDolphin": "1.0.1",
    "core-js": "2.4.1",
    "rxjs": "5.0.1",
    "ts-helpers": "1.1.2",
    "xstream": "9.2"
  },
  "devDependencies": {
    "@types/node": "6.0.42",
    "ts-node": "1.2.1",
    "tslint": "4.1.1",
    "typescript": "2.0.3",
    "typings": "2.1.0",
    "ts-loader": "^0.8.2",
    "webpack": "^1.13.1"
  }
}

webpack.config.js:

var webpack = require('webpack');
module.exports = {
    entry: './src/app.ts',
    output: {
        filename: './dist/main.js'
    },
    // Turn on sourcemaps
    devtool: 'source-map',
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
    },
    // Add minification
    // plugins: [
    //     new webpack.optimize.UglifyJsPlugin()
    // ],
    module: {
        loaders: [
            { test: /\.ts$/, loader: 'ts' }
        ]
    }
};

Update 1:

Only importing 

import { OpenDolphin, ClientDolphin, ClientPresentationModel, ClientAttribute, Tag } from 'openDolphin';

doesn't help, the same error remains. But, Intellij will additionally mark the import in the TS-File red. I'm... unsure if the OpenDolphin npm package is correct: It only contains a main.js, main.d.ts, a package.json with no hint of browserify, babelify or something else, a js folder with all the *.ts files...?

morpheus05
  • 4,772
  • 2
  • 32
  • 47
  • Just `import { OpenDolphin, ClientDolphin } from 'openDolphin';` if that doesn't import the compiled file then you can modify your webpack config to load it through TypeScript or Babel and also file an issue against the repository in that case – Aluan Haddad Feb 12 '17 at 13:00
  • I tried your idea and updated the post – morpheus05 Feb 12 '17 at 13:21
  • 1
    Yeah, looks like something is definitely wrong with their publish process. They have a `main.js` file that re-exports files from a directory named `js` which contains only `.ts` files. I would say file a bug. In the meantime, you can compile it yourself in various ways, including through Webpack. – Aluan Haddad Feb 12 '17 at 13:33

0 Answers0