Cannot Import ES2015 Module

- 1 answer

I'm trying to develop an npm library, but when I use it in another app, e.g.:

import React from 'react';
import SmallGrid from 'react-smallgrid';

export default class Library extends React.Component{

I get the following error:

$ grunt browserify
Running "browserify:jsx" (browserify) task
>> /Users/me/code/myapp/node_modules/react-smallgrid/src/smallgrid.jsx:1
>> import React from 'react';
>> ^
>> ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Warning: Error running grunt-browserify. Use --force to continue.

The library starts with:

import React from 'react';
import _ from 'lodash';

export default class SmallGrid extends React.Component{

Is there anybody here that knows what these horrible javascript errors mean?



Currently it is not possible to import code from node_modules written in ES2015. You have to compile code in your library to ES5. For example using babel (via npm script):

"scripts": {
    "compile": "babel --presets es2015,stage-0 -d lib/ src/"

This script expects your ES2015 code to be placed in src/ directory and outputs compiled code into lib/ directory