1

I have a functional React app which has multiple files (image, csv, and manifest.json) in my /public folder. A local build runs perfectly and I get all those public files working correctly. However, once I build and look into my /build/public folder, these files are absent (manifest.json, the image file, and the csv file) which returns an error saying Resource not found.

My public folder is:

enter image description here

While my build/public doesn't have these files:

enter image description here

My webpack.prod.config.js looks like:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const InterpolateHtmlPlugin = require('interpolate-html-plugin');
const path = require('path');
const webpack = require('webpack');


module.exports = {
    entry: './src/index.tsx',
    mode: 'production',
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'],
    },
    devtool: 'inline-source-map',
    output: {
        clean: true,
        filename: '[name].bundle.[fullhash].js',
        chunkFilename: '[id].[name].[fullhash].js',
        path: path.resolve(__dirname, 'build/public'),
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
        nodeEnv: 'production',
        minimize: true,
    },
    performance: {
        maxAssetSize: 50000,
        maxEntrypointSize: 50000,
    },
    module: {
        rules: [
            {
                oneOf: [
                    {
                        test: /\.(ttf|woff|woff2|woff?|woff2?)/,
                        type: 'asset/resource',
                        exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.tsx?$/],
                    },
                    {
                        test: /\.svg$/,
                        type: 'asset/resource',
                        exclude: /node_modules/,
                    },
                    {
                        test: /\.ts$|\.tsx$/,
                        loader: 'ts-loader',
                        exclude: /node_modules/,
                    },
                    {
                        test: /\.js$|\.jsx$/,
                        use: 'babel-loader',
                        exclude: /node_modules/,
                    },
                    {
                        test: /\.(c|sc|sa)ss$/,
                        use: [
                            'style-loader',
                            {
                                loader: 'css-loader',
                                options: {
                                    importLoaders: 1,
                                },
                            },
                            {
                                loader: 'sass-loader',
                                options: {
                                    sassOptions: {
                                        includePaths: ['app', 'node_modules'],
                                    },
                                },
                            },
                        ],
                    },
                ],
            },
        ],
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            favicon: 'public/favicon.ico',
            manifest: 'public/manifest.json',
            robots: 'public/robots.txt',
            GridFactsData: 'public/GridFactsData.csv'
        }),
        new InterpolateHtmlPlugin({
            PUBLIC_URL: 'static',
        }),

        new webpack.HotModuleReplacementPlugin(),
    ],
};

I don't understand enough of webpack to fix this issue? Any tips? Thank you

ReactNewbie123
  • 143
  • 6
  • What makes you think anything in the `public` folder should be copied to the build output? – Phil Feb 15 '23 at 01:10
  • Wouldn't webpack try bundling everything up including the public folder? I thought that you would create static resources in the /public folder and this way it would be passed onto the /public directory in the build. Is there a way I can include this public folder into my build? – ReactNewbie123 Feb 15 '23 at 01:17
  • 1
    Webpack doesn't do anything it's not configured to do. Perhaps you're thinking of how [Create React App](https://create-react-app.dev/docs/using-the-public-folder/) handles the `public` folder via `react-scripts` but you're not using that since you've got a custom Webpack config – Phil Feb 15 '23 at 01:19
  • So if I add a `{test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3|csv)$/, loader: "file" },` into my module -> rules -> oneOf this should work? – ReactNewbie123 Feb 15 '23 at 01:25
  • 1
    In your case I don't think its gonna do what you want, first I think you should move your assets into another folder eg. `assets`and then you can use a library which webpack already using it under the hood called: `copy-webpack-plugin` to copy everything you have in a specific folder into your build folder, I have a working example here: https://github.com/hamzahsn/react-best-practice/blob/master/config/webpack.config.js#L118 – Hamza Hsn Feb 15 '23 at 01:30
  • @HamzaHsn thank you so much for the help. So I create another folder at the root of my project called assets (and it will contain only two files: GridFacts.csv and manifest.json), now from there, I would have to add in the following code: `new CopyWebpackPlugin({ patterns: [{ from: paths.root + '/assets/GridFactsData.csv' }] }), ],` – ReactNewbie123 Feb 15 '23 at 01:36
  • @HamzaHsn yes!! I used the CopyWebpackplugin although I changed a bit after looking at the documentation to: `new CopyWebpackPlugin({patterns: [{ from: './public/GridFactsData.csv', to: "public" }]}),`. If the question wasn't closed, I would have given you the credit! Thanks for the help – ReactNewbie123 Feb 15 '23 at 17:36

0 Answers0