80 lines
3.0 KiB
JavaScript
80 lines
3.0 KiB
JavaScript
const webpack = require('webpack');
|
|
const WorkBoxPlugin = require('workbox-webpack-plugin');
|
|
|
|
module.exports = function override(config) {
|
|
// @astryxdesign/core ships as ESM with relative imports missing extensions
|
|
// (e.g. '../Tooltip/Tooltip'), which webpack 5 rejects under strict ESM
|
|
// resolution. Relax it for this package only rather than globally.
|
|
config.module.rules.push({
|
|
test: /\.m?js$/,
|
|
include: /node_modules[\\/]@astryxdesign/,
|
|
resolve: { fullySpecified: false }
|
|
});
|
|
|
|
// react-scripts routes all other node_modules JS through
|
|
// babel-preset-react-app/dependencies (a lighter preset than the one used
|
|
// for src/), which doesn't include the import-attributes syntax plugin.
|
|
// @astryxdesign/core's i18n module uses `import x from './en.json' with
|
|
// { type: 'json' }` — the webpack version react-scripts@5 bundles predates
|
|
// native import-attributes support, so even once Babel can *parse* that
|
|
// syntax (via the syntax plugin) it still needs to be stripped from the
|
|
// output, or webpack's own parser trips on the untouched `with {...}`
|
|
// clause in babel-loader's output. Insert a dedicated oneOf rule ahead of
|
|
// the generic node_modules js/mjs rule — oneOf rules are mutually
|
|
// exclusive (first match wins), so the generic rule won't also try to
|
|
// process these files.
|
|
const stripImportAttributes = () => ({
|
|
visitor: {
|
|
ImportDeclaration(path) {
|
|
if (path.node.attributes) path.node.attributes = [];
|
|
if (path.node.assertions) path.node.assertions = [];
|
|
}
|
|
}
|
|
});
|
|
const oneOfRule = config.module.rules.find((rule) => Array.isArray(rule.oneOf));
|
|
if (oneOfRule) {
|
|
oneOfRule.oneOf.unshift({
|
|
test: /\.m?js$/,
|
|
include: /node_modules[\\/]@astryxdesign/,
|
|
resolve: { fullySpecified: false },
|
|
loader: require.resolve('babel-loader'),
|
|
options: {
|
|
babelrc: false,
|
|
configFile: false,
|
|
compact: false,
|
|
presets: [[require.resolve('babel-preset-react-app/dependencies'), { helpers: true }]],
|
|
plugins: [require.resolve('@babel/plugin-syntax-import-attributes'), stripImportAttributes],
|
|
cacheDirectory: true,
|
|
cacheCompression: false
|
|
}
|
|
});
|
|
}
|
|
|
|
config.resolve.fallback = {
|
|
process: require.resolve('process/browser'),
|
|
// zlib: require.resolve('browserify-zlib'),
|
|
stream: require.resolve('stream-browserify'),
|
|
crypto: require.resolve('crypto-browserify'),
|
|
util: require.resolve('util'),
|
|
buffer: require.resolve('buffer')
|
|
// asset: require.resolve('assert')
|
|
};
|
|
|
|
// https://stackoverflow.com/questions/69135310/workaround-for-cache-size-limit-in-create-react-app-pwa-service-worker
|
|
config.plugins.forEach((plugin) => {
|
|
if (plugin instanceof WorkBoxPlugin.InjectManifest) {
|
|
plugin.config.maximumFileSizeToCacheInBytes = 50 * 1024 * 1024;
|
|
}
|
|
});
|
|
|
|
config.plugins = [
|
|
...config.plugins,
|
|
new webpack.ProvidePlugin({
|
|
process: 'process/browser.js',
|
|
Buffer: ['buffer', 'Buffer']
|
|
})
|
|
];
|
|
|
|
return config;
|
|
};
|