CODEWITHSUNDEEP
javascriptreactjswebpack
tatmanblue
tatmanblue

Reputation: 1227

webpack compile error on require(imagePath)

I'm trying to dymaically load an image in ReactJS. So far, what I've found on the internet has not worked.

My react component looks like this:

class ReadOnlyTableRow extends React.Component {
    render() {
        let optionImage = require('../assets/option.jpg');
        return (
            <tr>
                <td>
                <img src={optionImage} />
                    {this.props.data.type}
                </td>
                <td>{this.props.data.symbol}</td>
            </tr> 
        );
    }
}

and the webpack error I get is this:

ERROR in ./src/assets/option.jpg Module parse failed: C:\Java\src\options\web\src\assets\option.jpg Unexpected character '?' (1:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected character '?' (1:0)

I tried adding a loader to my webpack, but that gave different errors. So I removed it from my webconfig file.

and my webpack.config file

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: [ 'es2015', 'react' ] }
      }   
    ]
  }
};

What am I missing? or doing wrong? Thnx, Matt

Addendum: When I include this in my webpack.config

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: [ 'es2015', 'react' ] }
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=25000'
      }         
    ]
  }

I get another error:

WARNING in Loader C:\Java\src\options\web\node_modules\url\url.js?limit=25000 didn't return a function

The structure of my project is such: src

|---Components
     ---ReadOnlyTableRow 
|---assets
     ---option.jpb

here's the package.config file

{
  "name": "engine",
  "version": "1.0.0",
  "description": "engine UI written in React",
  "main": "index.js",
  "private": true,
  "scripts": {
    "start": "webpack-dev-server --progress --inline --port 8112",
    "build": "webpack"
  },
  "keywords": [],
  "author": "mpr",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "moment": "^2.18.1",
    "react": "^0.14.6",
    "react-bootstrap": "^0.30.5",
    "react-currency-input": "^1.2.6",
    "react-date-picker": "^5.3.28",
    "react-dom": "^0.14.6",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.16.2"
  },
  "devDependencies": {
    "file-loader": "^1.1.5"
  }
}

Thnx, Matt

Upvotes: 0

Views: 218

Answers (1)

tatmanblue
tatmanblue

Reputation: 1227

To solve this problem, I used file-loader, per @Emad suggestion in the comments above. Additionally, I needed to use a different web.config which is different than the directions provided for file-loader. The web.config changes are as follows.

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {   
    loaders: [     
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: [ 'es2015', 'react' ] }
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader',
        exclude: /node_modules/,
        options: {}
      }        
    ]     
  }
};

I changed my javascript code to pull in the image via the import statement: 

import reloadImage from './../assets/reload-sm.png';

Thnx Matt

Upvotes: 1

Related Questions