Getting npm packages to work with babel (babel-loader)

Question

I'm really new to webpack, babel, React and all this stuff. So I'm probably missing something really obvious. To get a jumpstart on my React project I'm using react-redux-bootstrap-webpack-starter. It all works well, but now my lack of understanding really shows with my latest problem.

The problem:

I'm trying to import jwtDecode from 'jwt-decode' and it throws the following error:

./src/app/redux/modules/login.js
Module not found: Error: Can't resolve 'jwt-decode/build/jwt-decode' in 
'/usr/src/app/src/app/redux/modules'
 @ ./src/app/redux/modules/login.js 12:17-55
 @ ./src/app/redux/modules/reducers.js
 @ ./src/app/redux/store/configureStore.dev.js
 @ ./src/app/redux/store/configureStore.js
 @ ./src/app/Root.js
 @ ./src/app/index.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client 
./src/app/index.js

What have I done:

I've Docker-ized the frontend app, so I just added the jwt-decode package to package.json and rebuilt the image. The Docker build executes npm install.
I've tried to import jwtDecode from 'jwt-decode' then I tried import jwtDecode from 'jwt-decode/build/jwt-decode
I made sure I can reference other npm packages similarly installed. On a new docker instance I installed lodash, imported it in the same file and there was no problem.

My hypotheses:

There's something about the particular jwt-decode package that makes it not work well with babel.
To make it work I need either to modify the jwt-decode package or to configure webpack and the babel-loader differently. How?

Maybe wrong path? The path seems diferent from other packages — Òscar Raya

ardev ardev · Accepted Answer · 2017-07-11T19:46:27

Babel doesnt transpile anything for JWT-decode and I dont think webpack has any extra configuration for it either.

It looks like the places that you are trying to use jwt-decode, like: './src/app/redux/modules/login.js ', in your app cannot find the directory and so are failing. Make sure that whatever module loader you're using is referencing the correct path to the jwt-decode directory. Try loading it like this ( if you are using ES2015 via Babel transpilation):

import jwt_decode from "jwt_decode";

Getting npm packages to work with babel (babel-loader)

1 Answers