0

I am building my application using webpack and so far its getting better. It seems none of my modules are corrupted. Aside: I only suspected that as I was so confused as to how this thing turned my 150mb React app into 2mbs and barely know how this thing works.

The issue I am having is that none of my images or much of my CSS is loading properly. Here is an example element

<img class="searched-user-icon bump-icon" src="export default __webpack_public_path__ + &amp;quot;src/static/pointingfinger.svg&amp;quot;;" alt="pointingfinger">

This does not render the image. It gives me a 404. Now if I change this to this within the browser dev tools:

<img class="searched-user-icon bump-icon" src="src/static/pointingfinger.svg" alt="pointingfinger">

It works which makes sense. But of course I need to resolve this issue so that images show normally after build. I am importing my images like so in my react component files: import pointingfinger from '../static/pointingfinger.svg';

I didn't find much documentation on this strange phenomenon. I was wondering if someone who knows could explain to me whats happening that would be appreciated. Also I would like to simply copy my css over based on wherever that css file is found relatively during build time like I am doing with file-loader. I could set it up manually to put all css it finds into one folder but that seems less "dynamic". Below is my webpack config

module.exports = {
    entry: "./src/index.js", // The entry point for the application
    output: {
        path: path.join(__dirname, '/dist'),
        publicPath: '/',
        filename: 'index_bundle.js' // This will be the created bundle file that webpack creates for react to use in production
    },
    module: {
        rules: [
            { 
                test: /\.jsx?$/, 
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.svg$/, use: 'svg-inline-loader'
            },
            {
                test: /\.css$/i, use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i, loader: 'file-loader', options: { name: '[path][name].[ext]' }
            }
        ]
    },
    target: ['web', 'es5'],
    plugins: [
        new HtmlWebpackPlugin({ template: './public/index.html'}),
        new webpack.ProvidePlugin({
            process: 'process/browser'
        })
    ],
    mode: 'production' // Can be set to development or production. Webpack will minify code and strip warnings
}

edit: It looks like the configuration is taking issue with me referencing sources like this <img src={pointingfinger}></img> in my code. I'm betting a simple plugin will suffice. I will update when I find something.

edit2: Using the plugin "plugin-transform-react-jsx" does not seem to be solving this problem.

lovgrandma
  • 133
  • 1
  • 9
  • Does this help? https://stackoverflow.com/questions/32612912/dynamically-add-images-react-webpack – V Maharajh Mar 17 '21 at 17:30
  • @VivekMaharajh it adds some context. I was on there a while ago. What I did was I changed src={pointingfinger} on the img element to src={require(pointingfinger)} and then src={require(`${pointingfinger}`)} and they both gave me "Uncaught Error: Cannot find module 'export default __webpack_public_path__ + "src/static/pointingfinger.svg";'" So "import pointingfinger from '../static/pointingfinger.svg';" really is giving the build this weird string that needs to be resolved but is outputting that unusual string. – lovgrandma Mar 17 '21 at 17:44
  • 1
    I have no idea what Im doing lol. I removed "{ test: /\.svg$/, use: 'svg-inline-loader' }," from my rules and all my svg's started working again. Just have a few css errors to fix and I should be good – lovgrandma Mar 17 '21 at 18:21

1 Answers1

1

I fixed this by removing

{
   test: /\.svg$/, use: 'svg-inline-loader'
}

While many other tutorials said to use this, my React app primarily uses them as img's with src references to them . They are mostly imported at the top of the components import theimgvar from 'a/path/to/img.svg';and referenced to like so src={theimgvar}

So it was just necessary to define the file loader to load svg's aswell as I already had up there

{
   test: /\.(png|jpe?g|gif|svg)$/i,
   loader: 'file-loader', 
   options: { name: '[path][name].[ext]' }
}
lovgrandma
  • 133
  • 1
  • 9