Nuxt и Webpack: сбой модуля: неожиданный символ 'character' (1: 0)

Question

У меня есть компонент vue carousel, и я хочу создать список файлов .png в статической папке. После Динамический импорт изображений из каталога с помощью веб-пакета и После https://webpack.js.org/guides/dependency-management/#context-module-api мой компонент выглядит следующим образом:

<script>

  var cache = {};
  const images = require.context('../static/', false, /PNG$/);
  // const images = ["./52lv.PNG", "./Capture1.PNG", "./maps.PNG"]
  console.log(images.keys());
  console.log(images);
  var constructed = [];
  function constructItems(fileNames, constructed) {
    fileNames.forEach(fileName => {
      constructed.push({
        'src': fileName
      })
    });


    return constructed;
  }

  console.log(res);
  export default {
    data: function() {
      return {
        items: res
      };
    }
  };

</script>

Когда я бегу

$npm run dev

Понятно:

    √ Client
    Compiled successfully in 946.50ms

    √ Server
    Compiled successfully in 708.75ms


    WARN  Compiled with 2 warnings                                                               friendly-errors 20:54:28


    WARN  in ./static/91lv.PNG                                                                   friendly-errors 20:54:28

    Module parse failed: Unexpected character '�' (1:0)                                           friendly-errors 20:54:28
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
                                                                                                friendly-errors 20:54:28
    @ ./static sync nonrecursive \.PNG$
    @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/carousel.vue?vue&type=script&lang=js&
    @ ./components/carousel.vue?vue&type=script&lang=js&
    @ ./components/carousel.vue
    @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/default.vue?vue&type=script&lang=js&
    @ ./layouts/default.vue?vue&type=script&lang=js&
    @ ./layouts/default.vue
    @ ./.nuxt/App.js
    @ ./.nuxt/index.js
    @ ./.nuxt/client.js
    @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr/client ./.nuxt/client.js                                                                                              friendly-errors 20:54:28

    WARN  in ./static sync nonrecursive \.PNG$                                                   friendly-errors 20:54:28

    There are multiple modules with names that only differ in casing.                             friendly-errors 20:54:28
    This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
    Use equal casing. Compare these module identifiers:
    * ......\js\nuxt4\static sync nonrecursive /\.PNG$/
        Used by 1 module(s), i. e.
    ......\js\nuxt4\node_modules\babel-loader\lib\index.js??ref--2-0!......\js\nuxt4\node_modules\vue-loader\lib\index.js??vue-loader-options!......\js\nuxt4\components\carousel.vue?vue&type=script&lang=js&
    * ......\js\nuxt4\static sync nonrecursive /\.png$/
        Used by 2 module(s), i. e.
        ......\js\nuxt4\node_modules\babel-loader\lib\index.js??ref--2-0!......\js\nuxt4\node_modules\vue-loader\lib\index.js??vue-loader-options!......\js\nuxt4\pages\index.vue?vue&type=script&lang=js&
                                                                                                friendly-errors 20:54:28

Как я могу это исправить?

Answer 1

ОК, это странно - я изменил все файлы с именем * .PNG на * .png, и проблема исчезла.