1

I think this is a general question about how to make a library usable with ES6's import:

I want to use DimpleJS (a JS library for charts) in my React app.

  1. I ran npm install --save dimple-js
  2. I added import * from 'dimple-js' to my React component

At this point I get a Syntax Error: Unexpected token (2:9) which is the space after my import *.

Why do I get this error? How should I correctly import this into my project?

Don P
  • 60,113
  • 114
  • 300
  • 432
  • 1
    Webpack, Broswerify ... – Wainage Mar 31 '16 at 22:01
  • Thanks, this application is using Webpack. Is there anything in particular about it I should look at? – Don P Mar 31 '16 at 22:02
  • See this [link](http://www.2ality.com/2015/04/webpack-es6.html) – peteb Mar 31 '16 at 22:07
  • Thanks @peteb - most of the time when I get a package from npm, it works fine. However when I looked at examples (like Lodash) they have "export" in their main files. This package does not. Should I be adding 'export' to `/node_modules/dimple-js/dist/dimple.latest.js` manually? I'm assuming not since it will get wiped out on an npm update. So should I be forking this library and making it webpack compatible, or am I missing something? – Don P Mar 31 '16 at 22:10
  • 1
    Do you have [`babel-loader`](https://github.com/babel/babel-loader) installed? – Paolo Moretti Mar 31 '16 at 22:16
  • I believe so, although it doesn't look like it includes my /node_modules/ folder. Here is a jsfiddle of my webpack.config.js: https://jsfiddle.net/kt9a0h6u/. My project structure is simple it's just dist, src, and node_modules folder. – Don P Mar 31 '16 at 22:17
  • Yeah, that's fine, because `DimpleJS` doesn't have to be transpiled (it's written in ES5). You have `include: path.join(__dirname, 'src')`, so `babel-loader` is only transpiling files inside that folder. Make sure that your React component is in `src`, or change it to `exclude: 'node_modules'` – Paolo Moretti Mar 31 '16 at 22:24
  • Thanks for the help @PaoloMoretti, really appreciate it! My React component is inside 'src' – Don P Mar 31 '16 at 22:25
  • One more thing: If you use babel 6 you need to add a `.babelrc` file to the root of you project and install the [es2015 preset](https://babeljs.io/docs/plugins/preset-es2015/). See http://stackoverflow.com/a/33608835/63011 – Paolo Moretti Mar 31 '16 at 22:32
  • Hmm, but again this isn't a general problem with node_modules, all the others work fine. It's just this one. – Don P Mar 31 '16 at 22:40
  • 4
    Your syntax is invalid. It must include an `as` clause, as in `import * as dimple from 'dimple-js';`. –  Apr 01 '16 at 04:23
  • I bet simplle import dimple from 'dimple-js' should work – Petr Averyanov Apr 01 '16 at 09:05

0 Answers0