1

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
  }
};
Kevin Danikowski
  • 4,620
  • 6
  • 41
  • 75

1 Answers1

1

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,
                }
            }
      ],
}
Who Knows
  • 101
  • 7
  • Hey @whoknows, I just added my code, I will try to add yours and see what happens – Kevin Danikowski May 29 '18 at 15:06
  • I was unsuccessful with adding that data, still received the same error – Kevin Danikowski May 29 '18 at 15:11
  • https://www.npmjs.com/package/webpack-isomorphic-tools#configuration-examples heres a sample of webpack-isomorphic-tools configuration for jpg. It's natively supported with no further configuration. – Who Knows May 29 '18 at 15:25
  • You are correct, it is natively supported, however my config seems to still cause it to break. I'm comparing to https://github.com/erikras/react-redux-universal-hot-example to try to solve my issue – Kevin Danikowski May 29 '18 at 15:32