Issue with React component and webpack

I’m trying to use uppy but I get a webpack error whenever I try to use a UI element.

I have tried import { Dashboard } from '@uppy/react'; import { Dashboard } from '@uppy/dashboard'; import Dashboard from '@uppy/react/lib/Dashboard' but I keep getting several errors like these:

ERROR in ./node_modules/@uppy/status-bar/src/StatusBar.js 117:4
Module parse failed: Unexpected token (117:4)
You may need an appropriate loader to handle this file type.
| 
|   return (
>     <div class={statusBarClassNames} aria-hidden={isHidden}>
|       <div class={progressClassNames}
|         style={{ width: width + '%' }}

Whenever I try to import a UI element these errors pop up. I’m totally stuck, does anybody have an idea what the issue might be? Thanks!

[hscharitzer]

@goto-bus-stop you were spot on, removing that key made the import work. Thank you! (I now have a new issue with the Uppy() component for which I will open a new issue.)

[goto-bus-stop]

ERROR in ./node_modules/@uppy/status-bar/src/StatusBar.js 117:4

It should be including lib/StatusBar.js, not src/StatusBar.js. The problem is probably that we’re using jsnext:main incorrectly in our package.json. You’ve probably configured webpack to use that as a main field?

We should remove the jsnext:main keys from our own package.json files. In the mean time, you could remove ‘jsnext:main’ from the list of resolve.mainFields in your webpack config to work around the issue.