Skip to content

Commit bf8848d

Browse files
authored
fix(webpack): add extension alias support for handling ESM libs (#30513)
<!-- Please make sure you have read the submission guidelines before posting an PR --> <!-- https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr --> <!-- Please make sure that your commit message follows our format --> <!-- Example: `fix(nx): must begin with lowercase` --> <!-- If this is a particularly complex change or feature addition, you can request a dedicated Nx release for this pull request branch. Mention someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they will confirm if the PR warrants its own release for testing purposes, and generate it for you if appropriate. --> ## Current Behavior <!-- This is the behavior we have today --> Currently, if you have a webpack application that uses out NxWebpackAppPlugin and has a non-buildable lib that has exports with extension enabled for example:`export * from './lib/lib8446520.js';`. The app fails to build. ## Expected Behavior <!-- This is the behavior we should expect with the changes in this PR --> When using webpack and including libraries that contain extension it should resolve. ## Related Issue(s) <!-- Please link the issue being fixed so it gets closed when this is merged. --> Fixes #30492
1 parent 90ff03d commit bf8848d

File tree

3 files changed

+58
-1
lines changed

3 files changed

+58
-1
lines changed

e2e/react/src/react-ts-solution.test.ts

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import {
2+
checkFilesExist,
23
cleanupProject,
4+
getPackageManagerCommand,
35
newProject,
6+
readFile,
47
readJson,
58
runCLI,
9+
runCommand,
610
uniq,
11+
updateFile,
12+
updateJson,
713
} from '@nx/e2e/utils';
814

915
describe('React (TS solution)', () => {
@@ -38,4 +44,47 @@ describe('React (TS solution)', () => {
3844
`Successfully ran target test for project ${lib}`
3945
);
4046
}, 90000);
47+
48+
it('should be able to use Webpack to build apps with an imported lib', async () => {
49+
const appName = uniq('app');
50+
const libName = uniq('lib');
51+
52+
runCLI(
53+
`generate @nx/react:app packages/${appName} --bundler=webpack --no-interactive --skipFormat --linter=eslint --unitTestRunner=none`
54+
);
55+
runCLI(
56+
`generate @nx/js:lib libs/${libName} --bundler=none --no-interactive --unit-test-runner=none --skipFormat --linter=eslint`
57+
);
58+
59+
const mainPath = `packages/${appName}/src/main.tsx`;
60+
updateFile(
61+
mainPath,
62+
`
63+
import {${libName}} from '@${workspaceName}/${libName}';
64+
${readFile(mainPath)}
65+
console.log(${libName}());
66+
`
67+
);
68+
69+
runCLI('sync');
70+
71+
// Add library to package.json to make sure it is linked (not needed for npm package manager)
72+
updateJson(`packages/${appName}/package.json`, (json) => {
73+
return {
74+
...json,
75+
devDependencies: {
76+
...(json.devDependencies || {}),
77+
[`@${workspaceName}/${libName}`]: 'workspace:*',
78+
},
79+
};
80+
});
81+
82+
runCommand(
83+
`cd packages/${appName} && ${getPackageManagerCommand().install}`
84+
);
85+
86+
runCLI(`build ${appName}`);
87+
88+
checkFilesExist(`packages/${appName}/dist/index.html`);
89+
}, 90_000);
4190
});

e2e/react/src/react-webpack.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
updateFile,
1111
} from '@nx/e2e/utils';
1212

13-
describe('Build React applications and libraries with Vite', () => {
13+
describe('Build React applications and libraries with Webpack', () => {
1414
beforeAll(() => {
1515
newProject({
1616
packages: ['@nx/react'],

packages/webpack/src/plugins/nx-webpack-plugin/lib/apply-base-config.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ const IGNORED_WEBPACK_WARNINGS = [
2626
/could not find any license/i,
2727
];
2828

29+
const extensionAlias = {
30+
'.js': ['.ts', '.js'],
31+
'.mjs': ['.mts', '.mjs'],
32+
};
2933
const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
3034
const mainFields = ['module', 'main'];
3135

@@ -356,6 +360,10 @@ function applyNxDependentConfig(
356360
config.resolve = {
357361
...config.resolve,
358362
extensions: [...(config?.resolve?.extensions ?? []), ...extensions],
363+
extensionAlias: {
364+
...(config.resolve?.extensionAlias ?? {}),
365+
...extensionAlias,
366+
},
359367
alias: {
360368
...(config.resolve?.alias ?? {}),
361369
...(options.fileReplacements?.reduce(

0 commit comments

Comments
 (0)