CODEWITHSUNDEEP
vue.jsvue-componentvuejs3
Wojciech
Wojciech

Reputation: 643

Module parse failed: Unexpected character '�'

I have a problem with my application on vue.js When I added the variables with the path to the photos, I get this error:

ERROR in ./src/assets/violet.PNG 1:0
Module parse failed: Unexpected character '�' (1:0)
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
(Source code omitted for this binary file)
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ProductSlider.vue?vue&type=script&lang=js 29:15-45      
 @ ./src/components/ProductSlider.vue?vue&type=script&lang=js 1:0-205 1:0-205 1:206-400 1:206-400
 @ ./src/components/ProductSlider.vue 2:0-64 3:0-59 3:0-59 8:49-55
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js 1:0-59 5:4-17
 @ ./src/App.vue?vue&type=script&lang=js 1:0-189 1:0-189 1:190-368 1:190-368
 @ ./src/App.vue 2:0-54 3:0-49 3:0-49 8:49-55
 @ ./src/main.js 2:0-28 3:10-13

My data array:

slide: [
        {
          bgcolor:'blue',
          name:'Róża1',
          length:'27',
          color: 'examplecolor',
          material:'examplematerial',
          image: require('@/assets/blue.PNG'),
        },
       ]

I have read a lot of threads on this and that just recommend installing the appropriate loader and adding it to the web.config.js file that is in the root of the application. Unfortunately, I don't have the file here, but it is in node_modules/@vue/cli-service I added some code there that was supposed to load the loader, but unfortunately it doesn't work:

module.exports = {
  configureWebpack: {
      output: {
          publicPath: '/static/'
      },
      module: {
        test: /\.styl$/,
        loader: ['style-loader', 'css-loader', 'stylus-loader']
      }
      
  }
}

I tried to install style-loader and file-loader

Upvotes: 0

Views: 2209

Answers (1)

Dr4jw3r
Dr4jw3r

Reputation: 181

It does indeed look like you are missing an appropriate loader. I know you mention that you installed file-loader but the error clearly states that you are missing an appropriate loader. Perhaps it was misconfigured? Please install file-loader and add the following configuration to your webpack.config file:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

Upvotes: 1

Related Questions