Importing es6 npm package - Syntax error: Unexpected token export

help
1

How to import a npm package that uses es6?

Tried to import react-icons package installed from npm but it says:
modules.js?hash=936f5e2…:51650 Uncaught SyntaxError: Unexpected token export

710×408 39.3 KB

I am importing it like this:
import FaBeer from ‘react-icons/fa/beer’;

Like it said here:

2

It seems babel transformations have not been applied. What’s your package list ?

3

Here’re the package listings. How to apply babel transformations? Should I config babel for npm modules somehow?

$ meteor list

accounts-password              1.1.11* Password support for accounts
accounts-ui                    1.1.9  Simple templates to add login widgets to an app
autopublish                    1.0.7  (For prototyping only) Publish the entire database to all clients
blaze-html-templates           1.0.4* Compile HTML templates into reactive UI with Meteor Blaze
ecmascript                     0.4.5* Compiler plugin that supports ES2015+ in all .js files
es5-shim                       4.5.12* Shims and polyfills to improve ECMAScript 5 support
fourseven:scss                 3.4.3* Style with attitude. Sass and SCSS support for Meteor.js (with autoprefixe...
insecure                       1.0.7  (For prototyping only) Allow all database writes from the client
jquery                         1.11.9  Manipulate the DOM using CSS selectors
meteor-base                    1.0.4  Packages that every Meteor app needs
mobile-experience              1.0.4  Packages for a great mobile user experience
mongo                          1.1.9* Adaptor for using MongoDB and Minimongo over DDP
orgztion:meteor-global-tether  1.0.0  HupSpot Tether exposed on global Meteor 1.3
react-meteor-data              0.2.9  React mixin for reactively tracking Meteor data
reactive-var                   1.0.10  Reactive variable
standard-minifier-css          1.0.7* Standard css minifier used with Meteor apps by default.
standard-minifier-js           1.0.7* Standard javascript minifiers used with Meteor apps by default.
tracker                        1.0.14* Dependency tracker to allow reactive callbacks

$ cat package.json

{
  "name": "web",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "axios": "^0.15.0",
    "bootstrap": "^4.0.0-alpha.4",
    "meteor-node-stubs": "~0.2.0",
    "react": "^15.3.2",
    "react-addons-pure-render-mixin": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-icons": "^2.2.1",
    "react-router": "^2.8.1"
  }
}
4

Could someone give me some hint, isn’t there already babel compiler in meteor?
Should it be somehow configured compiling imported npm modules also?

vjau mentioned above: “It seems babel transformations have not been applied”. How can I apply those?

Thanks.

5

Try importing it like this:

import FaBeer from 'react-icons/lib/fa/beer';
6

Thanks for reply Rob.

That works. That’s my workaround too.
I am just curious how could I import non-compiled icon from 'react-icons/fa/beer'; and use it with meteor?
If some other npm package would not provide compiled files for example. How to do that?

7

Usually, that’s determined by the package’s package.json file with the main stanza, which “tells” import where to get the correct code. This package has no main stanza, so you’re pretty much on your own there. The build script stanza shows that babel is used to put the transcoded ES into lib/. However, Meteor doesn’t do any additional processing on npm modules, so without a main you won’t be able to automatically import it within your Meteor code.

Maybe you could contact the author and request main: './lib/IconBase.js' in the package.json?