Error when starting Nodemon for React app?

A

aznhautroalvyl2018-11-29 13:55:19

Images

aznhautroalvyl, 2018-11-29 13:55:19

When I run the command in the project directory,
npm run nodemon
I get the following error:

How can I fix it? You can start Nodemon only by commenting out all the lines associated with images.
I add pictures to my React application as follows:

import Logo from '../../images/logo.jpg';

class TestPage extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <body>        
        <Link to='/'>
          <img src={Logo} alt=''/>
        </Link>         
      </body>
    );
  }
}

Webpack.config.js looks like this:

webpack.config.js

global.Promise = require('bluebird');
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const publicPath = 'localhost:8050/public/assets';
const cssName = process.env.NODE_ENV === 'production' ? 'styles-[hash].css' : 'styles.css';
const jsName = process.env.NODE_ENV === 'production' ? 'bundle-[hash].js' : 'bundle.js';
const plugins = [
new webpack.DefinePlugin({
'process.env': {
BROWSER: JSON.stringify(true),
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
}
}),
new ExtractTextPlugin(cssName)
];
if (process.env.NODE_ENV === 'production') {
plugins.push(
new CleanWebpackPlugin([ 'public/assets/' ], {
root: __dirname,
verbose: true,
dry: false
})
);
plugins.push(new webpack.optimize.DedupePlugin());
plugins.push(new webpack.optimize.OccurenceOrderPlugin());
}
module.exports = {
entry: ['babel-polyfill', './src/client.js'],
debug: process.env.NODE_ENV !== 'production',
resolve: {
root: path.join(__dirname, 'src'),
modulesDirectories: [ 'node_modules' ],
extensions: ['', '.js', '.jsx']
},
plugins,
output: {
path: `${__dirname}/public/assets/`,
filename: jsName,
publicPath
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!less-loader')
},
{ test: /\.gif$/, loader: 'url-loader?limit=10000&mimetype=image/gif' },
{ test: /\.jpg$/, loader: 'url-loader?limit=10000&mimetype=image/jpg' },
{ test: /\.png$/, loader: 'url-loader?limit=10000&mimetype=image/png' },
{ test: /\.svg/, loader: 'url-loader?limit=26000&mimetype=image/svg+xml' },
{ test: /\.(woff|woff2|ttf|eot)/, loader: 'url-loader?limit=1' },
{
test: /\.jsx?$/, loader: process.env.NODE_ENV !== 'production' ? 'react-hot!babel!eslint-loader' : 'babel',
exclude: [/node_modules/, /public/] },
{ test: /\.json$/, loader: 'json-loader' }
]
},
eslint: { configFile: '.eslintrc' },
devtool: process.env.NODE_ENV !== 'production' ? 'source-map' : null,
devServer: {
headers: { 'Access-Control-Allow-Origin': '*' }
}
};

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

aznhautroalvyl, 2018-11-29
@aznhautroalvyl

The problem is solved by changing the img tag:
<img src={require('../../images/logo.jpg')} />