Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(react): add fast refresh support for webpack 5 (#6529)
- Loading branch information
1 parent
b1eca69
commit 749c640
Showing
14 changed files
with
283 additions
and
37 deletions.
There are no files selected for viewing
50 changes: 50 additions & 0 deletions
50
packages/node/src/generators/migrate-to-webpack-5/migrate-to-webpack-5.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import { readJson, Tree, updateJson } from '@nrwl/devkit'; | ||
import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing'; | ||
import { nodeMigrateToWebpack5Generator } from './migrate-to-webpack-5'; | ||
|
||
describe('nodeMigrateToWebpack5Generator', () => { | ||
let tree: Tree; | ||
|
||
beforeEach(() => { | ||
tree = createTreeWithEmptyWorkspace(); | ||
updateJson(tree, 'package.json', (json) => { | ||
json.devDependencies = { | ||
'@nrwl/cli': '100.0.0', | ||
'@nrwl/jest': '100.0.0', | ||
'@nrwl/node': '100.0.0', | ||
'@nrwl/workspace': '100.0.0', | ||
}; | ||
return json; | ||
}); | ||
}); | ||
|
||
it('should add packages needed by Node', async () => { | ||
await nodeMigrateToWebpack5Generator(tree, {}); | ||
|
||
const json = readJson(tree, '/package.json'); | ||
|
||
expect(json.devDependencies['webpack']).toMatch(/\^5/); | ||
}); | ||
|
||
it('should add packages needed by Web if used', async () => { | ||
updateJson(tree, 'package.json', (json) => { | ||
json.devDependencies = { | ||
'@nrwl/cli': '100.0.0', | ||
'@nrwl/jest': '100.0.0', | ||
'@nrwl/node': '100.0.0', | ||
'@nrwl/react': '100.0.0', | ||
'@nrwl/web': '100.0.0', | ||
'@nrwl/workspace': '100.0.0', | ||
}; | ||
return json; | ||
}); | ||
|
||
await nodeMigrateToWebpack5Generator(tree, {}); | ||
|
||
const json = readJson(tree, '/package.json'); | ||
|
||
expect( | ||
json.devDependencies['@pmmmwh/react-refresh-webpack-plugin'] | ||
).toMatch(/^0\.5/); | ||
}); | ||
}); |
53 changes: 43 additions & 10 deletions
53
packages/node/src/generators/migrate-to-webpack-5/migrate-to-webpack-5.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
module.exports = function (useShim = true) { | ||
const webpack = require('webpack'); | ||
webpack.webpack = webpack; | ||
|
||
return { | ||
ReactRefreshPlugin: require('@pmmmwh/react-refresh-webpack-plugin'), | ||
webpack, | ||
}; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { logger, stripIndents } from '@nrwl/devkit'; | ||
import chalk = require('chalk'); | ||
|
||
import { requireShim } from './require-shim'; | ||
import packageJson = require('../../package.json'); | ||
|
||
function validateVersion(path) { | ||
if ( | ||
packageJson.dependencies[path] === | ||
requireShim(`${path}/package.json`).version | ||
) { | ||
logger.warn(`Found an outdated version of ${chalk.bold(path)}\n`); | ||
|
||
logger.info(stripIndents` | ||
If you want to use webpack 5, try installing compatible versions of the plugins. | ||
See: https://nx.dev/guides/webpack-5 | ||
`); | ||
|
||
throw new Error('Incompatible version'); | ||
} | ||
} | ||
|
||
module.exports = function (onFallback) { | ||
try { | ||
validateVersion('@pmmmwh/react-refresh-webpack-plugin'); | ||
} catch { | ||
logger.info( | ||
`NX Falling back to webpack 4 due to incompatible plugin versions` | ||
); | ||
onFallback(); | ||
return require('./bundle4')(); | ||
} | ||
|
||
return { | ||
ReactRefreshPlugin: requireShim('@pmmmwh/react-refresh-webpack-plugin'), | ||
webpack: requireShim('webpack'), | ||
}; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
TODO(jack): Delete for Nx 13 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { requireShim } from './require-shim'; | ||
|
||
const result = requireShim('webpack/package.json'); | ||
const version = result?.version; | ||
|
||
exports.default = undefined; | ||
|
||
const forceWebpack4 = process.env.NX_FORCE_WEBPACK_4; | ||
|
||
exports.isWebpack5 = !forceWebpack4 && /^5\./.test(version); | ||
|
||
if (exports.isWebpack5) { | ||
Object.assign( | ||
exports, | ||
require('./bundle5')(() => { | ||
exports.isWebpack5 = false; | ||
}) | ||
); | ||
} else { | ||
Object.assign(exports, require('./bundle4')()); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { appRootPath } from '@nrwl/tao/src/utils/app-root'; | ||
import { join } from 'path'; | ||
|
||
export function requireShim(path: string) { | ||
try { | ||
return require(join(appRootPath, 'node_modules', path)); | ||
} catch { | ||
return require(path); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
packages/web/src/generators/migrate-to-webpack-5/migrate-to-webpack-5.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { readJson, Tree, updateJson } from '@nrwl/devkit'; | ||
import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing'; | ||
import { webMigrateToWebpack5Generator } from './migrate-to-webpack-5'; | ||
|
||
describe('webMigrateToWebpack5Generator', () => { | ||
let tree: Tree; | ||
|
||
beforeEach(() => { | ||
tree = createTreeWithEmptyWorkspace(); | ||
}); | ||
|
||
it('should add packages needed by Web ', async () => { | ||
updateJson(tree, 'package.json', (json) => { | ||
json.devDependencies = { | ||
'@nrwl/cli': '100.0.0', | ||
'@nrwl/jest': '100.0.0', | ||
'@nrwl/node': '100.0.0', | ||
'@nrwl/react': '100.0.0', | ||
'@nrwl/web': '100.0.0', | ||
'@nrwl/workspace': '100.0.0', | ||
}; | ||
return json; | ||
}); | ||
|
||
await webMigrateToWebpack5Generator(tree, {}); | ||
|
||
const json = readJson(tree, '/package.json'); | ||
|
||
expect(json.devDependencies['webpack']).toMatch(/\^5/); | ||
expect( | ||
json.devDependencies['@pmmmwh/react-refresh-webpack-plugin'] | ||
).toMatch(/^0\.5/); | ||
}); | ||
}); |
39 changes: 27 additions & 12 deletions
39
packages/web/src/generators/migrate-to-webpack-5/migrate-to-webpack-5.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.