Use with create-react-app

[apenab]

I want to use this package with create-react-app but I have the following problem:
1- When I run yarn start in create-react-app, it runs in development mode and mounts all the files in localhost:3000
There is some way to consume those files.

[nickpolet]

You can run yarn eject and it will eject all the config files and everything out into the directory.

[towry]

I think this is not the problem of django-webpack-loader.

[apenab]

@towry may not be a django-webpack-loader problem, but I do not recommend yarn eject, before doing that it is preferable to use nwb

[jhoover4]

Well technically its not "its problem", but since this is a default React configuration, I think it would make sense to at least have documentation on steps to take to change the configuration.

Actually now that I think about it, its kind of incredulous that you think there's no reason to address integration with the default settings of the frontend framework with 75%+ market share.

[apenab]

@nickpolet one of the reasons

I recommend following these steps

Alternatives to Ejecting

[Flui]

try react-app-rewired

[apenab]

Currently I'm using this package: craco, it's a Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.

Here my craco.config.js:

const path = require("path");
const {getLoader, loaderByName} = require("@craco/craco");
// For django-webpack-loader:
const BundleTracker = require("webpack-bundle-tracker");
// Extract CSS into a separate file:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CracoLessPlugin = require("craco-less");

const packages = [];
packages.push(path.join(__dirname, "../meridian"));

// Documentation for CRACO config
// https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#webpack-api
const conf = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                modifyLessRule(lessRule, {env}) {
                    if (env === "development") {
                        lessRule.use.splice(0, 1);
                        lessRule.use.unshift({loader: MiniCssExtractPlugin.loader, options: {}});
                    }
                    // This is a known problem with Less and CSS modules regarding relative file paths in url(...) statements.
                    // Good explanation: https://github.com/webpack-contrib/less-loader/issues/109#issuecomment-253797335
                    // Solution inspired by: https://github.com/webpack-contrib/less-loader/issues/109#issuecomment-358008310
                    const lessLoader = lessRule.use.find(loaderByName("less-loader"));
                    lessLoader.options.lessOptions = {relativeUrls: false};

                    return lessRule;
                },
                modifyLessModuleRule(lessModuleRule, context) {
                    return lessModuleRule;
                },
            },
        },
    ],
    devServer: (config) => {
        // Config required to work with the django-webpack-loader:
        config.headers = {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET,OPTIONS,HEAD,PUT,POST,DELETE,PATCH",
            "Access-Control-Allow-Headers": "Origin, Content-Type, Accept, Authorization, X-Request-With",
            "Access-Control-Allow-Credentials": "true",
        };
        // this causes problems some times, so you may wanna disable it, NOTE: this is note liveReload
        config.hot = !process.env.NO_HOT;
        return config;
    },
    webpack: {
        plugins: [new BundleTracker({filename: "../../core/webpack-stats.json", indent: 4})],
        configure: (webpackConfig, {env, paths}) => {
            // Config required to import external workspaces:
            let {isFound, match} = getLoader(webpackConfig, loaderByName("babel-loader"));
            if (isFound) {
                const include = Array.isArray(match.loader.include) ? match.loader.include : [match.loader.include];
                match.loader.include = include.concat(packages);
            }
            ({isFound, match} = getLoader(webpackConfig, loaderByName("file-loader")));
            if (isFound) {
                match.loader.options = {name: "[name].[ext]"};
            }

            if (env === "development") {
                // Config required to work with django-webpack-loader package:
                const port = process.env.PORT || "3000";
                const ip = process.env.IP || "localhost";
                webpackConfig.output.publicPath = `http://${ip}:${port}/`;
                webpackConfig.plugins.push(
                    new MiniCssExtractPlugin({
                        filename: "[name].[contenthash].css",
                        chunkFilename: "[id].[contenthash].css",
                    })
                );
            }
            if (env === "production") {
                paths.appBuild = webpackConfig.output.path = path.resolve("../dist");
            }
            return webpackConfig;
        },
    },
};

// Documentation for CRACO config
// https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configuration
module.exports = conf;

With this configuration I can work well with "django-webpack-loader"

[fjsj]

Not specific to django-webpack-loader.