CODEWITHSUNDEEP
reactjswebpackbabeljswebpack-isomorphic-tools
Kevin Danikowski
Kevin Danikowski

Reputation: 5196

can't import IMG_VAR from './images/name.jpg' with babel / React / Webpack

Background (possibly irrelevent): I have a large react project I'm changing gulp -> webpack. It's isomorphic so I'm using webpack-isomorphic-tools.

So I have this line which no longer works:

const CANDLE_JPG = require('./assets/candle.jpg'); which returns error:

.assets/candle.jpg should not be assigned to variable.

But if I change it to:

import CANDLE_JPG from './assets/candle.jpg' I get the error:

./assets/candle.jpg should not be imported using default imports.

Thoughts: I believe it could be some issue with babel compilation, but I'm not sure. I've used require('babel-register') and my ".bablerc" contains presets es2015, react, and stage-0 and includes plugins transform-runtime, and react-hot-loader/babel.

File Loader: 

const fileLoader = {
  loader: require.resolve('file-loader'),
  exclude: [/\.js$/, /\.html$/, /\.hbs$/, /\.json$/],
  options: {
    name: 'assets/images/[name].[hash:8].[ext]',
    emitFile: true
  }
};

Upvotes: 1

Views: 398

Answers (1)

Who Knows
Who Knows

Reputation: 101

Can you show us your webpack configuration? You probably need to use an image loader like this then use :

import CANDLE_JPG from './assets/candle.jpg'

and configure webpack like this:

{
     test: /\.(gif|png|jpg)$/,
     exclude: path.resolve(__dirname, 'node_modules/'),
     use: [
          'file-loader',
           {
               loader: 'image-webpack-loader',
               options: {
                   bypassOnDebug: true,
                }
            }
      ],
}

Upvotes: 1

Related Questions