Problems with craco 7 and CRA5

[arsdragonfly]

CRA5 has been released and craco 7 is in alpha stage. This is my hodgepodge workaround to get it working:

// TODO: this is copied from craco-purescript-loader, eventually fixes here should be integrated upstream.

const path = require("path");
const util = require("util")
const { addBeforeLoader, loaderByName, getLoader, throwUnexpectedConfigError } = require("@craco/craco");

// Detect watch
// <https://github.com/purescript/spago#get-started-from-scratch-with-webpack-frontend-projects>
const isWatch = process.argv.some((a) => a === "--watch");
const isWebpackDevServer = process.argv.some(
  (a) => path.basename(a) === "webpack-dev-server"
);

const throwError = (message, githubIssueQuery) =>
  throwUnexpectedConfigError({
    packageName: "craco-purescript-loader",
    githubRepo: "andys8/craco-purescript-loader",
    message,
    githubIssueQuery,
  });

module.exports = {
  overrideWebpackConfig: ({ webpackConfig, pluginOptions }) => {
    // Resolve purescript extension
    if (
      !webpackConfig ||
      !webpackConfig.resolve ||
      !webpackConfig.resolve.extensions ||
      typeof webpackConfig.resolve.extensions !== "object"
    ) {
      throwError("No valid webpackConfig.resolve.extensions");
    }
    webpackConfig.resolve.extensions.push(".purs");

    // Allow imports outside of `src` folder for purescript dependencies
    if (
      !webpackConfig ||
      !webpackConfig.resolve ||
      !webpackConfig.resolve.plugins ||
      typeof webpackConfig.resolve.plugins !== "object"
    ) {
      throwError("No valid webpackConfig.resolve.plugins");
    }
    webpackConfig.resolve.plugins = webpackConfig.resolve.plugins.filter(
      ({ constructor }) =>
        !constructor || constructor.name !== "ModuleScopePlugin"
    );

    // PureScript loader
    const defaultOptions = {
      spago: true,
      watch: isWebpackDevServer || isWatch,
    };

    // Append purs-loader before file-loader
    // const pursLoader = {
    //   loader: "purs-loader",
    //   test: /\.purs$/,
    //   exclude: /node_modules/,
    //   options: Object.assign({}, defaultOptions, pluginOptions),
    // };

    // const fileLoader = loaderByName("file-loader");
    // const { isFound, match } = getLoader(webpackConfig, fileLoader);
    // if (!isFound) {
    //   throwError("Didn't find expected 'file-loader'");
    // }
    // addBeforeLoader(webpackConfig, fileLoader, pursLoader);

    // console.error(util.inspect(webpackConfig.module.rules[1], false, null, true))

    // temporary workaround
    webpackConfig.module.rules[1].oneOf.splice(0, 0, {
        test: /\.purs$/,
        exclude: /node_modules/,
        use: [
            {
                loader: "purs-loader",
                options: Object.assign({}, defaultOptions, pluginOptions),
            },
        ],
    });

    return webpackConfig;
  },
};

[andys8]

Could you add more information about the errors you're running in? Is it a breaking change in craco, did it stop working or does it crash?

[andys8]

Did you run into this error?

Failed to compile.

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[1] should be one of these:
   ["..." | object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]
   -> A rule.
   Details:
    * configuration.module.rules[1].oneOf[2].use[1] has an unknown property 'test'. These properties are valid:
      object { ident?, loader?, options? }
    * configuration.module.rules[1].oneOf[2].use[1] has an unknown property 'exclude'. These properties are valid:
      object { ident?, loader?, options? }
    * configuration.module.rules[1].oneOf[2].use[1] has an unknown property 'query'. These properties are valid:
      object { ident?, loader?, options? }

[andys8]

I pushed changes using react-scripts v5 and craco v7 alpha. Could you give them a try by using the github branch as npm dependency?

"craco-purescript-loader": "andys8/craco-purescript-loader#cra-v5",

• Changes to loader: https://github.com/andys8/craco-purescript-loader/compare/cra-v5
• Changes to example app: https://github.com/andys8/create-react-app-purescript/compare/cra-v5

If these are fine, I'll publish a new version when craco released v7 (to be compatible with react-scripts v5)

[arsdragonfly]

Yes it's working now. Thanks!

[andys8]

Status

As of today craco 7 is still not released.