Nuxt and Webpack: Module parse failed: Unexpected character '�' (1:0)

Question

I have a vue carousel component and I want to generate a list of The .png files in the static folder. Following Dynamically import images from a directory using webpack and Following https://webpack.js.org/guides/dependency-management/#context-module-api my component looks like:

<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>

When I run

$npm run dev

I see:

    √ 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

How can I fix this?

Usually this happens when illegal character is found in text which is supposed to be of unicode format. So your file at hand is not in unicode format. Check your file encodings. — Agnius Vasiliauskas, Jan 09 '19 at 13:57
file-loader or url-loader should be used for PNG type instead, seems somehow vue-loader is used in this case — William Chong, Jan 09 '19 at 14:08
@WilliamChong, Can you give me any advice based on https://nuxtjs.org/guide/assets/. — user1592380, Jan 09 '19 at 14:22

score 0 · Answer 1 · answered Jan 09 '19 at 15:18

0

OK, so this is weird - I changed all the files named *.PNG to *.png and the problem disappeared.

answered Jan 09 '19 at 15:18

user1592380

34,265
92
284
515

probably due to nuxt used a [case sensitive regex](https://github.com/nuxt/nuxt.js/blob/4d5274215a8ac424d03f74d9998fdfa80699b289/packages/webpack/src/config/base.js#L287) for file name matching – William Chong Jan 09 '19 at 17:45

Nuxt and Webpack: Module parse failed: Unexpected character '�' (1:0)

1 Answers1