Unexpected token, You may need an appropriate loader to handle this file type

Ionic Framework ionic-v3
1

I installed a custom npm package and I try to integrate this js files into my ionic2 RC.4 project.

I tried to load the javascript files in this two ways
import * as rtsp from '../../../../node_modules/html5_rtsp_player/src/rtsp_player';
or
var rtsp = require('../../../../node_modules/html5_rtsp_player/src/rtsp_player');

But I always get this error:

Error: Module parse failed: /abc/web-client-ionic/node_modules/html5_rtsp_player/src/rtsp/message.js Unexpected token (2:20)
You may need an appropriate loader to handle this file type.
| export class RTSPMessage {
|     static RTSP_1_0 = 'RTSP/1.0';

So the “/” is not allowed, what can I do? Have I to use a custom loader for the module? And if yes, how I can do this and which one I have to use?

On the github repo for the module there is written this:
ES6 Modules support is required. You can use webpack with babel loader to build this script:

loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'stage-3', 'stage-2', 'stage-1', 'stage-0']
                }
            }
        ]

this is the module I try to include

thx
Michael

2

thats not really the correct way to import such a library.

You’d really want to do

import * as rtsp from 'rtsp_player';

As stated in the projects README file.

3

okay thx you, but for doing this I have to declare an alias for the module in my webpack.config file.

Right?

How can I do this? Should I change the webpack.config.js file in hte app-script node module folder? Or how is that implemented? there is no more config file in ionic2?

thx

4

No, editing things underneath node_modules should be avoided if at all possible. Using custom configuration files is documented here.

1 Like
5

@mhartington @rapropos I’m still not sure which is the best way to implement a js.

I have here a simple example af a javascript lib which is in the component subfolder assets/js and his name is test.js

(function (global, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals
        global.BlaBla = factory();
}
}(this, function () {
  'use strict';

  const ABCDEF = "ABCDEF";

  class BlaBla {

      constructor() {
          console.log('Bla is working');
      }

  }

  return BlaBla;

}));

my component is something like this

import BlaBla from './assets/js/test';

export class MyComponent {
    constructor() {
         new BlaBla();
    }
}

Test this with ionic serve anything is working fine, but i’m still not sure if this is the right way to include a plane simple JavaScript library.
But test this with ionic emulator I got the error SyntaxError: Use of const in strict mode.

So perhaps I’m not include the javascript file in the right way or is there anything else I do wrong and misunderstood.

image
image371×650 31.8 KB