Search code examples
javascriptwebpackwebpack-hmrreact-boilerplate

Syntax error in react-boilerplate after adding new dependencies

I have a hard time adding dependencies to a newly generated react-boilerplate project. I face this error: 

node.js:122 Uncaught SyntaxError: Unexpected token :
(anonymous function)    @   reactBoilerplateDeps.dll.js:340
__webpack_require__ @   reactBoilerplateDeps.dll.js:21
(anonymous function)    @   application.js:7
...

after adding this dependency to package.json like this: 

"feathers-client": "^1.6.1",

and to an existing index.html such as app/containers/App/index.js

import feathers from 'feathers-client';

If I remove the import statement from index.js the error disappears.

I have no clue what is happening so any suggestion will be appreciated.

Some more details:

I started cloning this repository:

https://github.com/mxstbr/react-boilerplate

Then I ran npm run setup. Then I added the dependency to feathers-client and I get the error.

I should also mention that I get similar errors when I add dependencies such as request, feathers-rest and request-promise.

I do not face the error if I add dependencies such as bluebird.

I haven't found a clear pattern into what dependencies gives this error.

Solution

  • It looks like the issue is caused by import feathers from "feathers-client" resolving node_modules/feathers-client/lib/client.js instead of the pre-compiled node_modules/feathers-client/dist/feathers.js. To fix this, use:

    import feathers from "feathers-client/dist/feathers"