So, the error is cause by webpack being confused about what kind of loader to use for your custom library. You need to teel it what kind of loader to use. I've decided that the best way would be to use react-app-rewired package to do that. This package allows you to make final tweeks to webpack configuration, before it start's to compile everything.
Before you start this tutorial, you should have model-driven-data already linked and dependencies installed.
So the first thing you need to do is install react-app-rewired in your project using this command: npm i -D react-app-rewired
The next thing you need to do is replace "react-scripts" with "react-app-rewired" in your "scripts" commands. This will allow us to inject custom webpack config changes before it executes.
Your package.json should now look like this:
.
You are now ready to create config-overrides.js in your root folder (same folder as package.json).
In the config-overrides.js should be this code:
const path = require("path");
const fs = require("fs");
// Helper functions for folder join
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
// I don't know what this does, but it's stole from original webconfig here: https://raw.githubusercontent.com/facebook/create-react-app/9673858a3715287c40aef9e800c431c7d45c05a2/packages/react-scripts/config/paths.js (raw link, cuz until somebody goes crazy with rebase, it will be valid)
const hasJsxRuntime = (() => {
if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") {
return false;
}
try {
require.resolve("react/jsx-runtime");
return true;
} catch (e) {
return false;
}
})();
// Inject changes to webpack
module.exports = function override(config, env) {
config.module.rules[1].oneOf.push({
test: /\.(js|mjs|jsx|ts|tsx)$/, // Regex for matching file endings
include: resolveApp("node_modules/model-driven-data"), // Joined path to your custom library
loader: require.resolve("babel-loader"), // Defautl resolver for js(x)/ts(x) files
options: {
customize: require.resolve("babel-preset-react-app/webpack-overrides"),
presets: [
[
require.resolve("babel-preset-react-app"),
{
runtime: hasJsxRuntime ? "automatic" : "classic",
},
],
],
},
});
// Return newly edited config and execute it
return config;
};
You can now run npm run build normally and it should work as expected. If you have any issues don't hesitate to write a comment :D
