Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CCI] Update webpack to v5 #770

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

[CCI] Update webpack to v5 #770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
46a45e9
Update webpack to v5 (#584)
andreymyssak Apr 22, 2023
5252cd4
Bump cssnano to 6.0.1 (#584)
andreymyssak May 20, 2023
21851bb
Update devServer in webpack.config.js (#584)
andreymyssak May 21, 2023
9d4545b
Set import/no-unresolved to off (#584)
andreymyssak May 21, 2023
bd34706
Remove import/no-unresolved from .eslintrc.js (#584)
andreymyssak May 29, 2023
d7b1113
Remove null from resolve() in icon.test.tsx (#584)
andreymyssak May 29, 2023
d8bfe20
Update webpack commands in compile-oui.js (#584)
andreymyssak May 29, 2023
0f07baf
Adjust resolutions (#584)
andreymyssak Jul 13, 2023
60f986e
Replace 'master' with 'main' in the comment in changelog.js (#584)
andreymyssak Jul 13, 2023
ed5773e
Update CHANGELOG.md (#584)
andreymyssak Jul 13, 2023
22fb706
Merge branch 'main' into 584-update-webpack
joshuarrrr Sep 13, 2023
9306612
update yarn.lock
joshuarrrr Sep 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 2 additions & 7 deletions .babelrc-test-env.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,6 @@
*/

module.exports = {
"extends": "./.babelrc.js",
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-transform-async-to-generator",
"@babel/plugin-syntax-dynamic-import",
"dynamic-import-node"
],
extends: './.babelrc.js',
plugins: ['dynamic-import-node'],
};
55 changes: 27 additions & 28 deletions .babelrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,38 +13,37 @@ module.exports = {
// We need to preserve comments as they are used by webpack for
// naming chunks during code-splitting. The compression step during
// bundling will remove them later.
"comments": true,
comments: true,

"presets": [
["@babel/env", {
// `targets` property set via `.browserslistrc`
"useBuiltIns": process.env.NO_COREJS_POLYFILL ? false : "usage",
"corejs": 3,
"modules": process.env.BABEL_MODULES ? process.env.BABEL_MODULES === 'false' ? false : process.env.BABEL_MODULES : "commonjs" // babel's default is commonjs
}],
["@babel/typescript", { isTSX: true, allExtensions: true }],
"@babel/react"
presets: [
[
'@babel/preset-env',
{
// `targets` property set via `.browserslistrc`
useBuiltIns: process.env.NO_COREJS_POLYFILL ? false : 'usage',
corejs: 3,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my testing, this line needed to be changed to

corejs: process.env.NO_COREJS_POLYFILL ? undefined : 3,

I think because it doesn't want the corejs version unless 'usage' is specified for useBuiltIns. Did you run into the same thing at all?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just confirmed, a warning pops up when this line isn't changed:

WARNING (@babel/preset-env): The `corejs` option only has an effect when the `useBuiltIns` option is not `false`

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

corejs: process.env.NO_COREJS_POLYFILL ? undefined : 3,

I'm not sure about changing false to undefined because there is no difference between them. According to the documentation, the default value for useBuiltIns is false (https://babeljs.io/docs/babel-preset-env#usebuiltins). I guess it is worth leaving false because using values that are expected by the field will help avoid surprise issues in the future.

I think because it doesn't want the corejs version unless 'usage' is specified for useBuiltIns. Did you run into the same thing at all?

Yes, I get the same warning message. The reason for this is that we purposely do not include polyfill imports in our build (see https://github.com/opensearch-project/oui/blob/main/scripts/compile-oui.js#L190-L219). As far as I understand, this solution was inherited from here elastic/eui#1982.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can any of you help me with why we need any polyfills?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked the code of babel/preset-env and @BSFishy's solution is a valid one.

modules: process.env.BABEL_MODULES
? process.env.BABEL_MODULES === 'false'
? false
: process.env.BABEL_MODULES
: 'commonjs', // babel's default is commonjs
},
],
['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
'@babel/preset-react',
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"pegjs-inline-precompile",
"./scripts/babel/proptypes-from-ts-props",
"add-module-exports",
// stage 3
"@babel/proposal-object-rest-spread",
// stage 2
"@babel/proposal-class-properties",
plugins: [
'pegjs-inline-precompile',
'./scripts/babel/proptypes-from-ts-props',
'add-module-exports',
[
"inline-react-svg",
'inline-react-svg',
{
"ignorePattern": "images/*",
"svgo": {
"plugins": [
{ "cleanupIDs": false },
{ "removeViewBox": false }
]
}
}
ignorePattern: 'images/*',
svgo: {
plugins: [{ cleanupIDs: false }, { removeViewBox: false }],
},
},
],
],
};
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
- Fix next light color guidelines ([#1030](https://github.com/opensearch-project/oui/pull/1030))

### 🛠 Maintenance
- Bump webpack to v5

### 🪛 Refactoring

Expand Down
10 changes: 4 additions & 6 deletions generator-oui/documentation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ module.exports = class extends Generator {
name: 'folderName',
type: 'input',
store: true,
default: answers => answers.name,
default: (answers) => answers.name,
});

prompts.push({
Expand All @@ -71,7 +71,7 @@ module.exports = class extends Generator {
});
}

return this.prompt(prompts).then(answers => {
return this.prompt(prompts).then((answers) => {
this.answers = answers;
});
}
Expand All @@ -96,9 +96,7 @@ module.exports = class extends Generator {
fileName,
});

const documentationPagePath = (config.documentationPagePath = `${path}/${
config.name
}/${config.name}_example.js`);
const documentationPagePath = (config.documentationPagePath = `${path}/${config.name}/${config.name}_example.js`);

this.fs.copyTpl(
this.templatePath('documentation_page.js'),
Expand Down Expand Up @@ -163,7 +161,7 @@ module.exports = class extends Generator {
`${chalk.magenta(
'const'
)} ${componentExamplePrefix}Source = require(${chalk.cyan(
`'!!raw-loader!./${fileName}'`
`'./${fileName}?raw'`
)});\n` +
`${chalk.magenta(
'const'
Expand Down
2 changes: 1 addition & 1 deletion generator-oui/documentation/templates/documentation_page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
} from '../../../../src/components';

import <%= componentExampleName %> from './<%= fileName %>';
const <%= componentExamplePrefix %>Source = require('!!raw-loader!./<%= fileName %>');
const <%= componentExamplePrefix %>Source = require('./<%= fileName %>?raw');
const <%= componentExamplePrefix %>Html = renderToHtml(<%= componentExampleName %>);

export const <%= componentExampleName %>Example = {
Expand Down
8 changes: 4 additions & 4 deletions i18ntokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3533,14 +3533,14 @@
"highlighting": "string",
"loc": {
"start": {
"line": 267,
"line": 269,
"column": 12,
"index": 7947
"index": 8035
},
"end": {
"line": 270,
"line": 272,
"column": 14,
"index": 8069
"index": 8157
}
},
"filepath": "src/components/selectable/selectable_templates/selectable_template_sitewide.tsx"
Expand Down
79 changes: 27 additions & 52 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"*.scss"
],
"scripts": {
"start": "cross-env BABEL_MODULES=false webpack-dev-server --inline --hot --config=src-docs/webpack.config.js",
"start": "cross-env BABEL_MODULES=false webpack serve --hot --config=src-docs/webpack.config.js",
"test-docker": "node ./scripts/test-docker.js",
"sync-docs": "node ./scripts/docs-sync.js",
"build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js",
Expand All @@ -30,7 +30,7 @@
"test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
"test-a11y": "node ./scripts/a11y-testing",
"test-staged": "yarn lint && node scripts/test-staged.js",
"start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack-dev-server --config src-docs/webpack.config.js --port 9999",
"start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack serve --config src-docs/webpack.config.js --port 9999",
"yo-component": "yo ./generator-oui/app/component.js",
"start-test-server-and-a11y-test": "cross-env WAIT_ON_TIMEOUT=600000 start-server-and-test start-test-server http-get://localhost:9999 test-a11y",
"yo-doc": "yo ./generator-oui/app/documentation.js",
Expand All @@ -45,31 +45,18 @@
},
"resolutions": {
"**/semver": "^7.5.3",
"@babel/cli/**/ansi-regex": "^5.0.1",
"@babel/cli/**/minimist": "^1.2.6",
"@babel/cli/chokidar/glob-parent": "^6.0.1",
"@elastic/charts/**/d3-color": "^3.1.0",
"@types/jest/**/ansi-regex": "^5.0.1",
"babel-plugin-add-module-exports/chokidar/glob-parent": "^6.0.1",
"babel-plugin-inline-react-svg/**/ansi-regex": "^5.0.1",
"babel-plugin-inline-react-svg/svgo/js-yaml": "^3.13.1",
"babel-template/**/ansi-regex": "^5.0.1",
"codesandbox/**/ansi-regex": "^5.0.1",
"codesandbox/**/got": "^11.8.5",
"codesandbox/axios": "^0.22.0",
"codesandbox/pacote": "^12.0.0",
"cssnano/**/css-select/nth-check": "^2.0.1",
"cssnano/**/postcss": "^7.0.39",
"enzyme/cheerio/cheerio-select-tmp/css-select/css-what": "^6.1.0",
"enzyme/cheerio/cheerio-select-tmp/css-what": "^6.1.0",
"html-webpack-plugin/**/ansi-regex": "^5.0.1",
"jest-cli/**/ansi-regex": "^5.0.1",
"jest-cli/**/tough-cookie": "^4.1.3",
"jest/**/node-notifier": "^10.0.1",
"jest/**/tough-cookie": "^4.1.3",
"node-sass/sass-graph/scss-tokenizer": "^0.4.3",
"postcss-cli/chokidar/glob-parent": "^6.0.1",
"postcss-inline-svg/css-select/nth-check": "^2.0.1",
"react-view/**/ansi-regex": "^5.0.1",
"react-view/**/minimist": "^1.2.6",
"react-view/@miksu/prettier/minimatch": "^3.0.8",
Expand All @@ -81,11 +68,6 @@
"sass-lint/front-matter": "^4.0.2",
"sass-lint/merge": "^2.1.1",
"start-server-and-test/**/minimist": "^1.2.6",
"webpack-dev-server/**/ansi-regex": "^5.0.1",
"webpack-dev-server/chokidar/glob-parent": "^6.0.1",
"webpack-dev-server/selfsigned": "^2.0.1",
"webpack/**/chokidar/glob-parent": "^6.0.1",
"webpack/terser-webpack-plugin/serialize-javascript": "^3.1.0",
"yo/**/find-versions": "^4.0.0",
"yo/**/got": "^11.8.5",
"yo/meow": "^9.0.0"
Expand Down Expand Up @@ -135,16 +117,12 @@
"devDependencies": {
"@faker-js/faker": "^8.0.1",
"@axe-core/puppeteer": "4.6.1",
"@babel/cli": "^7.10.5",
"@babel/core": "^7.11.4",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-object-rest-spread": "^7.11.0",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-async-to-generator": "^7.10.4",
Comment on lines -140 to -143
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These plugins are included in @babel/preset-env

"@babel/plugin-transform-runtime": "^7.11.0",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not strictly necessary to use @babel/plugin-transform-runtime if we are already using core-js with useBuiltIns: 'usage' in @babel/preset-env

"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.12.1",
"@babel/cli": "^7.21.5",
"@babel/core": "^7.21.8",
"@babel/preset-env": "^7.21.5",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.5",
"@babel/template": "^7.20.7",
"@elastic/charts": "^30.2.0",
"@elastic/eslint-config-kibana": "^0.15.0",
"@opensearch/datemath": "file:./packages/opensearch-datemath",
Expand All @@ -163,26 +141,23 @@
"@types/uuid": "^9.0.1",
"@typescript-eslint/eslint-plugin": "^4.8.1",
"@typescript-eslint/parser": "^4.8.1",
"autoprefixer": "^9.8.6",
"babel-core": "7.0.0-bridge.0",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed in favor of @babel/core

"autoprefixer": "^10.4.14",
"babel-eslint": "^10.1.0",
"babel-jest": "^24.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-add-module-exports": "^1.0.2",
"babel-loader": "^9.1.2",
"babel-plugin-add-module-exports": "^1.0.4",
"babel-plugin-dynamic-import-node": "^2.3.3",
"babel-plugin-inline-react-svg": "^1.1.1",
"babel-plugin-inline-react-svg": "^2.0.2",
"babel-plugin-pegjs-inline-precompile": "^0.1.1",
"babel-template": "^6.26.0",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed in favor of @babel/template

"cache-loader": "^4.1.0",
"chalk": "^4.1.2",
"chokidar": "^3.5.3",
"circular-dependency-plugin": "^5.2.0",
"circular-dependency-plugin": "^5.2.2",
"codesandbox": "^2.2.3",
"core-js": "^3.29.1",
"cross-env": "^7.0.3",
"css-loader": "^4.2.2",
"cssnano": "^4.1.11",
"deasync": "^0.1.28",
"cssnano": "^6.0.1",
"dedent": "^0.7.0",
"dts-generator": "^3.0.0",
"enzyme": "^3.11.0",
Expand All @@ -202,27 +177,27 @@
"eslint-plugin-react": "^7.21.3",
"eslint-plugin-react-hooks": "^4.1.2",
"expose-gc": "^1.0.0",
"file-loader": "^6.1.0",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DEPRECATED for v5 (https://v4.webpack.js.org/loaders/file-loader/)

"findup": "^0.1.5",
"fork-ts-checker-webpack-plugin": "^6.5.3",
"fork-ts-checker-webpack-plugin": "^8.0.0",
"get-port": "^5.1.1",
"glob": "^8.1.0",
"html": "^1.0.0",
"html-format": "^1.0.2",
"html-webpack-plugin": "^4.4.1",
"html-webpack-plugin": "^5.5.1",
"jest": "^24.1.0",
"jest-cli": "^24.1.0",
"moment": "^2.29.4",
"moment-timezone": "^0.5.41",
"node-polyfill-webpack-plugin": "^2.0.1",
"node-sass": "npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5",
"pegjs": "^0.10.0",
"postcss-cli": "^7.1.2",
"postcss-inline-svg": "^4.1.0",
"postcss-loader": "^4.0.1",
"postcss": "^8.4.23",
"postcss-cli": "^10.1.0",
"postcss-inline-svg": "^6.0.0",
"postcss-loader": "^7.3.0",
"pre-commit": "^1.2.2",
"prettier": "^2.1.2",
"puppeteer": "^19.11.1",
"raw-loader": "^4.0.1",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DEPRECATED for v5 (https://v4.webpack.js.org/loaders/file-loader/). It was replaced with asset/source type (https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax)

"react": "^16.14.0",
"react-docgen-typescript": "^1.22.0",
"react-dom": "^16.12.0",
Expand All @@ -243,13 +218,13 @@
"sass-vars-to-js-loader": "^2.1.1",
"shelljs": "^0.8.5",
"start-server-and-test": "^2.0.0",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^4.1.0",
"typescript": "4.0.5",
"style-loader": "^3.3.2",
"terser-webpack-plugin": "^5.3.9",
"typescript": "4.1.6",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typescript v4.0.5 gives an error below because @types/express-serve-static-core uses TypeScript v4.1 syntax, so I had to update it

node_modules/@types/express-serve-static-core/index.d.ts:104:68 - error TS1110: Type expected.

"url-loader": "^4.1.0",
"webpack": "npm:@amoo-miki/webpack@4.46.0-rc.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack": "^5.83.1",
"webpack-cli": "^5.1.1",
"webpack-dev-server": "^4.15.0",
"yeoman-generator": "^5.8.0",
"yo": "^4.3.1"
},
Expand Down