[SOLVED] Webpack warning: You may need an appropriate loader to handle this file type (date-fns)

Webpack warning: You may need an appropriate loader to handle this file type (date-fns)

I have a problem with my application. I have a website. I use date-fns to show a formatted date based on the user language.

It works great, but I have updated date-fns and since then I have a warning. In my JavaScript code I use:

const locale = require(`date-fns/locale/${props.match.params.lang}`)

And with this, I can generate the right format like this:

format(new Date(), 'D MMMM YYYY', { locale })

It works, but I dislike this warning I get when webpack is building. Can you help me to understand what's wrong with my code? If it's in the webpack config or the include.

 You may need an appropriate loader to handle this file type.
>frontend         | > declare module 'date-fns/locale/fr' { }
>frontend         | | 
>frontend         |  @ ./node_modules/date-fns/locale sync ^\.\/.*$ ./fr/index.d.ts
>frontend         |  @ ./assets/javascripts/features/weather/components/home-header.js
>frontend         |  @ ./assets/javascripts/features/weather/components/home.js
>frontend         |  @ ./assets/javascripts/features/weather/containers/home-container.js
>frontend         |  @ ./assets/javascripts/features/weather/containers/app.js
>frontend         |  @ ./assets/javascripts/features/weather/index.js
>frontend         |  @ ./assets/javascripts/app/router.js
>frontend         |  @ ./assets/javascripts/index.js
>frontend         |  @ multi (webpack)-dev-server/client?http://0.0.0.0:3000 ./assets/javascripts/index

Solution

Try this: const locale = require(date-fns/locale/${props.match.params.lang}/index.js)