[@uppy/locales] Module parse failed: Unexpected token

[bperel]

Hello,

Until now I was using version 1.16.0 of @uppy/locales. Today I tried to update to the latest 1.16.* version. The install worked fine, but when launching my local server (the project is using Nuxt), the following warning appeared in the console :

 WARN  Compiled with 35 warnings                                                     friendly-errors 12:53:59
 WARN  in ./node_modules/@uppy/locales/lib/ar_SA.js.map                              friendly-errors 12:53:59

Module parse failed: Unexpected token (1:10)                                         friendly-errors 12:53:59
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> {"version":3,"sources":["ar_SA.js"],"names":["ar_SA","strings","addMore","addMoreFiles","addingMoreFiles","allowAccessDescription","allowAccessTitle","authenticateWith","authenticateWithTitle","back","browse","browseFiles","cancel","cancelUpload","chooseFiles","closeModal","companionError","complete","connectedToInternet","copyLink","copyLinkToClipboardFallback",
...
 return  return 1\n}\n\nif (typeof window !== 'undefined' && typeof window.Uppy !== 'undefined') {\n  window.Uppy.locales.zh_TW = zh_TW\n}\n\nmodule.exports = zh_TW\n"]}
                                                                                     friendly-errors 12:53:59
 @ ./node_modules/@uppy/locales/lib sync ^\.\/.*$
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/Upload.vue?vue&type=script&lang=js&
 @ ./components/Upload.vue?vue&type=script&lang=js&
 @ ./components/Upload.vue
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/upload.vue?vue&type=script&lang=js&
 @ ./pages/upload.vue?vue&type=script&lang=js&
 @ ./pages/upload.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/url-polyfill/url-polyfill.min.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
                                                                                     friendly-errors 12:53:59

(ellipsis added by me, all the contents of node_modules/@uppy/locales/lib is written there)

It looks like the error is related to Webpack (as far as I understand from googling around), but I don't understand why the version change would trigger this issue (it shows up from version 1.16.1, but I didn't see any code changes compared to 1.16.0 apart from locale translations). Despite the warning, my application runs fine but I would still like not to see this gigantic warning each time the application gets hot-reloaded :-)

If it helps to track the source of the issue, the Upload.vue component that is mentionned in the stack trace looks like :

<template>
  <div>
    <div class="DashboardContainer" />
  </div>
</template>

<script>

require('@uppy/core/dist/style.css')
require('@uppy/dashboard/dist/style.css')

const Uppy = require('@uppy/core')
const Dashboard = require('@uppy/dashboard')

export default {
  name: 'Upload',
  mounted() {
    const uppy = new Uppy({
      debug: true,
      locale: require(`@uppy/locales/lib/fr_FR`),
      allowMultipleUploads: false,
      restrictions: {
        minNumberOfFiles: 1,
        maxNumberOfFiles: 1,
        allowedFileTypes: ['image/png'],
      },
    })
    uppy
      .use(Dashboard, {
        inline: true,
        target: '.DashboardContainer',
        replaceTargetContent: true,
        height: 470,
        browserBackButtonClose: true,
        proudlyDisplayPoweredByUppy: false,
      })
  }
}
</script>

<style scoped>
</style>

[goto-bus-stop]

Hmm that is a bit puzzling. Why would it try to load the source map file at all?

Is this line actually verbatim what causes the error?

      locale: require(`@uppy/locales/lib/fr_FR`),

or are you doing something like require(`@uppy/locales/lib/${currentLanguage}`)?

I ask because from the stack trace, it looks like webpack is looking at the entire directory and not just the fr_FR file:

 @ ./node_modules/@uppy/locales/lib sync ^\.\/.*$

I don't know too much about webpack but this could explain why it's loading the source map files too.

If that is the case, you could try something like require(`@uppy/locales/lib/${currentLanguage}.js`) (with the .js extension) to make sure it only looks at the js files.

If that is not the case, I don't have many ideas 😅 it would be really helpful if you could prepare a repository with a minimal reproduction that I could npm install and try out.

[bperel]

Very well spotted @goto-bus-stop ! Indeed, I simplified the line to make my issue as clear as possible, but in the original source code the path is interpolated. And like you sugggest, the problem vanishes if I append the .js extension to the require call.

So, is the conclusion that it's a Webpack problem? I'm not familiar enough with Webpack to be confortable creating an issue in their repo.

[goto-bus-stop]

This is (probably) intended behaviour in webpack. It's just that if you do

require('some/directory/' + filename)

webpack has to assume that filename could be anything, including 'ar_AR.js.map', so it will bundle every file in that directory and decide the correct one at runtime.

If you do

require('some/directory/' + filename + '.js')

filename could still be anything, but the result must end in .js, so webpack knows to only bundle the JS files.

[bperel]

Alright, thanks! Closing.