Skip to content

fix: resolve dependency issues#11751

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

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

fix: resolve dependency issues #11751

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
45d3c45
fix(template-typescript): add missing dependency `@types/testing-libr…
merceyz Dec 14, 2021
9f3028e
fix(babel-preset): add missing dependency `@babel/plugin-proposal-pri…
merceyz Dec 14, 2021
5c9a90d
fix(react-scripts): `require.resolve` postcss plugins
merceyz Jan 24, 2022
cbddd5b
fix(eslint-config): add optional peer dependency `typescript`
merceyz Jan 24, 2022
074bf9c
fix(react-scripts): `require.resolve` jest watch plugins
merceyz Jan 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 22 additions & 38 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/babel-preset-react-app/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -28,6 +28,7 @@
"@babel/plugin-proposal-numeric-separator": "^7.16.0",
"@babel/plugin-proposal-optional-chaining": "^7.16.0",
"@babel/plugin-proposal-private-methods": "^7.16.0",
"@babel/plugin-proposal-private-property-in-object": "^7.16.0",
"@babel/plugin-transform-flow-strip-types": "^7.16.0",
"@babel/plugin-transform-react-display-name": "^7.16.0",
"@babel/plugin-transform-runtime": "^7.16.4",
Expand Down
1 change: 1 addition & 0 deletions packages/cra-template-typescript/template.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,6 +8,7 @@
"@types/node": "^16.7.13",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/testing-library__jest-dom": "^5.14.2",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
Expand Down
8 changes: 7 additions & 1 deletion packages/eslint-config-react-app/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,7 +17,13 @@
"jest.js"
],
"peerDependencies": {
"eslint": "^8.0.0"
"eslint": "^8.0.0",
"typescript": "^3.2.1 || ^4"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
},
"dependencies": {
"@babel/core": "^7.16.0",
Expand Down
12 changes: 6 additions & 6 deletions packages/react-scripts/config/webpack.config.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -143,9 +143,9 @@ module.exports = function (webpackEnv) {
config: false,

@await-ovoawait-ovoApr 13, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

We should also need to specify the path to the postcss:

{// Options for PostCSS as we reference these options twice// Adds vendor prefixing based on your specified browser support in// package.jsonloader: require.resolve('postcss-loader'),implementation: require.resolve("postcss"),options: {postcssOptions: {

@merceyzmerceyzApr 13, 2022

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

That's not necessary, postcss-loader declares postcss as a peer dependency so it will get it from the parent (react-scripts) on its own.

@await-ovoawait-ovoApr 13, 2022•
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Thanks for your reply, the problem I'm having is that under node_modules is postcss v7, but plugins like postcss-flexbugs-fixes depend on postcss v8, which causes errors when compiling.

So I think it might be better to specify implementation.

plugins: !useTailwind
? [
'postcss-flexbugs-fixes',
require.resolve('postcss-flexbugs-fixes'),
[
'postcss-preset-env',
require.resolve('postcss-preset-env'),
{
autoprefixer: {
flexbox: 'no-2009',
Expand All@@ -156,13 +156,13 @@ module.exports = function (webpackEnv) {
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
'postcss-normalize',
require.resolve('postcss-normalize'),
]
: [
'tailwindcss',
'postcss-flexbugs-fixes',
require.resolve('tailwindcss'),
require.resolve('postcss-flexbugs-fixes'),
[
'postcss-preset-env',
require.resolve('postcss-preset-env'),
{
autoprefixer: {
flexbox: 'no-2009',
Expand Down
4 changes: 2 additions & 2 deletions packages/react-scripts/scripts/utils/createJestConfig.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -62,8 +62,8 @@ module.exports = (resolve, rootDir, isEjecting) => {
ext => !ext.includes('mjs')
),
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
require.resolve('jest-watch-typeahead/filename'),
require.resolve('jest-watch-typeahead/testname'),
],
resetMocks: true,
};
Expand Down