d74ab4e9d6
With strict package managers such as pnpm or Yarn PnP, transitive dependencies are *not* hoisted to the root node_modules folder. This means that a webpack config defined within a package like '@nrwl/cypress' cannot resolve loaders like 'ts-loader', unless 'ts-loader' is declared in the workspace's own package.json. This is a problem because the workspace might define a different version of 'ts-loader', incompatible with the version declared by '@nrwl/cypress/package.json'. The workspace should not need to declare a dependency on 'ts-loader' anyway. See also: * https://github.com/pnpm/pnpm/issues/801 * https://github.com/webpack/webpack/issues/5087
53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import { Configuration } from 'webpack';
|
|
|
|
// Add React-specific configuration
|
|
function getWebpackConfig(config: Configuration) {
|
|
config.module.rules.push(
|
|
{
|
|
test: /\.(png|jpe?g|gif|webp)$/,
|
|
loader: require.resolve('url-loader'),
|
|
options: {
|
|
limit: 10000, // 10kB
|
|
name: '[name].[hash:7].[ext]',
|
|
},
|
|
},
|
|
{
|
|
test: /\.svg$/,
|
|
oneOf: [
|
|
// If coming from JS/TS file, then transform into React component using SVGR.
|
|
{
|
|
issuer: {
|
|
test: /\.[jt]sx?$/,
|
|
},
|
|
use: [
|
|
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
|
|
{
|
|
loader: require.resolve('url-loader'),
|
|
options: {
|
|
limit: 10000, // 10kB
|
|
name: '[name].[hash:7].[ext]',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
// Fallback to plain URL loader.
|
|
{
|
|
use: [
|
|
{
|
|
loader: require.resolve('url-loader'),
|
|
options: {
|
|
limit: 10000, // 10kB
|
|
name: '[name].[hash:7].[ext]',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
);
|
|
|
|
return config;
|
|
}
|
|
|
|
module.exports = getWebpackConfig;
|