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.

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

chore(server): remove dev middlewares + merge start:{dev-server,server} scripts #8950

Merged
merged 9 commits into from
Jul 18, 2023

Conversation

OnkarRuikar
Copy link
Contributor

@OnkarRuikar OnkarRuikar commented May 27, 2023

(Original description below)

Summary

Cleans up the server.

Problem

We added dev middlewares in #5664 that were actually only loaded under specific circumstances (if NODE_ENV was explicitly set to "development"), and this was not necessary to achieve hot module reloading.

Solution

Remove the dev middlewares and merge the start:dev-server and start:server scripts.


How did you test this change?

Tried both yarn dev and yarn start separately, verifying that changes to index.tsx and/or index.scss are hot-reloaded on http://localhost:3000/.


(Original description as follows:)

Summary

Getting a typeerror during yarn dev:

7:20:48 AM web.1        |  Starting the development server...
7:20:48 AM server.1     |  TypeError: Cannot read properties of undefined (reading 'publicPath')
7:20:48 AM server.1     |      at file:///mdn/yari/server/dev.ts:29:40
7:20:48 AM server.1     |  [ERROR] 21:50:48 TypeError: Cannot read properties of undefined (reading 'publicPath')

After

7:24:16 AM web.1        |  Starting the development server...
7:24:18 AM server.1     |  [HPM] Proxy created: /  -> http://localhost:8080
7:24:18 AM server.1     |  [HPM] Proxy created: /  -> https://developer.mozilla.org
7:24:18 AM server.1     |  [HPM] Proxy created: /  -> https://developer.allizom.org

How did you test this change?

yarn dev before and after fix

@caugner caugner self-assigned this Jul 17, 2023
@caugner
Copy link
Contributor

caugner commented Jul 17, 2023

@OnkarRuikar Are you still experiencing this issue? I cannot reproduce it locally, so I'm wondering whether your node_modules folder might just be corrupt? But then again I guess you've already tried rm -rf node_modules && yarn.

@OnkarRuikar
Copy link
Contributor Author

OnkarRuikar commented Jul 17, 2023

@OnkarRuikar Are you still experiencing this issue? I cannot reproduce it locally, so I'm wondering whether your node_modules folder might just be corrupt? But then again I guess you've already tried rm -rf node_modules && yarn.

I am still getting the error. Just ran following:

$ du -sh node_modules                                                               (base) 
851M    node_modules

$ rm -rf node_modules                                                               (base) 

$ yarn                                                                              (base) 
yarn install v1.22.19
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
warning Pattern ["wrap-ansi@^7.0.0"] is trying to unpack in the same destination "/home/onkar/.cache/yarn/v6/npm-wrap-ansi-cjs-7.0.0-67e145cff510a6a6984bdf1152911d69d2eb9e43-integrity/node_modules/wrap-ansi-cjs" as pattern ["wrap-ansi-cjs@npm:wrap-ansi@^7.0.0"]. This could result in non-deterministic behavior, skipping.
[4/5] Linking dependencies...
warning "@codemirror/lang-css > @codemirror/autocomplete@6.4.2" has unmet peer dependency "@codemirror/view@^6.0.0".
warning " > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5".
warning " > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9".
warning " > remark-prettier@2.0.0" has incorrect peer dependency "prettier@^2".
warning " > stylelint-a11y@1.2.3" has incorrect peer dependency "stylelint@^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0".
warning " > stylelint-config-prettier@9.0.5" has incorrect peer dependency "stylelint@>= 11.x < 15".
warning Workspaces can only be enabled in private projects.
[5/5] Building fresh packages...
$ husky install && yarn install:all && yarn install:all:npm
husky - Git hooks installed
yarn run v1.22.19
$ find . -mindepth 2 -name 'yarn.lock' ! -wholename '**/node_modules/**' -print0 | xargs -n1 -0 sh -cx 'yarn --cwd $(dirname $0) install'
++ dirname ./client/pwa/yarn.lock
+ yarn --cwd ./client/pwa install
[1/4] Resolving packages...
[2/4] Fetching packages...
warning @zip.js/zip.js@2.7.20: The engine "deno" appears to be invalid.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
++ dirname ./libs/slug-utils/yarn.lock
+ yarn --cwd ./libs/slug-utils install
[1/4] Resolving packages...
success Already up-to-date.
++ dirname ./libs/locale-utils/yarn.lock
+ yarn --cwd ./libs/locale-utils install
[1/4] Resolving packages...
success Already up-to-date.
++ dirname ./libs/pong/yarn.lock
+ yarn --cwd ./libs/pong install
[1/4] Resolving packages...
success Already up-to-date.
++ dirname ./cloud-function/src/internal/slug-utils/yarn.lock
+ yarn --cwd ./cloud-function/src/internal/slug-utils install
[1/4] Resolving packages...
success Already up-to-date.
++ dirname ./cloud-function/src/internal/locale-utils/yarn.lock
+ yarn --cwd ./cloud-function/src/internal/locale-utils install
[1/4] Resolving packages...
success Already up-to-date.
++ dirname ./cloud-function/src/internal/pong/yarn.lock
+ yarn --cwd ./cloud-function/src/internal/pong install
[1/4] Resolving packages...
success Already up-to-date.
Done in 6.13s.
yarn run v1.22.19
$ find . -mindepth 2 -name 'package-lock.json' ! -wholename '**/node_modules/**' -print0 | xargs -n1 -0 sh -cx 'npm --prefix $(dirname $0) install'
++ dirname ./cloud-function/package-lock.json
+ npm --prefix ./cloud-function install

> mdn-function@0.0.1 prepare
> ([ ! -e ../libs ] || npm run copy-internal)


> mdn-function@0.0.1 copy-internal
> rm -rf ./src/internal && cp -R ../libs ./src/internal


changed 5 packages, and audited 325 packages in 3s

62 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
Done in 3.63s.
Done in 89.41s.

$ yarn dev                                                                          (base) 
yarn run v1.22.19
$ yarn build:prepare && nf -j Procfile.dev start
$ yarn build:client && yarn build:ssr && yarn tool optimize-client-build && yarn tool google-analytics-code && yarn tool popularities && yarn tool spas && yarn tool gather-git-history && yarn tool build-robots-txt
$ cd client && cross-env NODE_ENV=production BABEL_ENV=production INLINE_RUNTIME_CHUNK=false node scripts/build.js
Creating an optimized production build...
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
  
Compiled successfully.

File sizes after gzip:

  428.54 kB         build/static/js/482.57849c26.chunk.js
  169.47 kB (-6 B)  build/static/js/main.59abae20.js
  43.62 kB          build/static/js/274.4da088dd.chunk.js
  28.25 kB          build/static/css/main.76ba4ef8.css
  26.26 kB          build/static/js/966.3f90d3e3.chunk.js
  10.94 kB          build/static/js/341.3d32b309.chunk.js
  6.75 kB           build/static/js/768.40509498.chunk.js
  6.3 kB            build/static/js/68.bd5e344e.chunk.js
  6.13 kB (+481 B)  build/static/js/685.419dc5c5.chunk.js
  5.88 kB           build/static/js/browser-compatibility-table.7ba9c730.chunk.js
  5.47 kB           build/static/js/693.13ed530e.chunk.js
  5.18 kB           build/static/js/996.bf624561.chunk.js
  4.55 kB (+103 B)  build/static/js/606.753df577.chunk.js
  4.29 kB           build/static/js/69.d07492fb.chunk.js
  4.12 kB           build/static/js/211.c7d57a96.chunk.js
  4.11 kB           build/static/js/863.e0bc1e7b.chunk.js
  3.5 kB            build/static/js/57.f5df3bc2.chunk.js
  3.48 kB           build/static/js/717.fae76663.chunk.js
  3.11 kB           build/static/js/662.0d1c5c1b.chunk.js
  1.88 kB           build/static/js/791.c4a8d43f.chunk.js
  1.75 kB (+61 B)   build/static/css/685.22a7c73e.chunk.css
  1.54 kB           build/static/css/341.5caecd32.chunk.css
  1.34 kB           build/static/css/606.06cbf8c8.chunk.css
  1.32 kB           build/static/css/57.57c96ebf.chunk.css
  1.15 kB           build/static/css/518.614dbbf1.chunk.css
  846 B             build/static/js/979.80842b35.chunk.js
  814 B             build/static/js/507.a20b1659.chunk.js
  721 B             build/static/css/693.90ea2bbb.chunk.css
  654 B             build/static/css/996.feade3fe.chunk.css
  621 B             build/static/css/768.32df508f.chunk.css
  560 B             build/static/js/419.1bff5d09.chunk.js
  526 B             build/static/css/211.02c1c08f.chunk.css
  296 B             build/static/css/662.631950ad.chunk.css
  196 B             build/static/css/419.794c818f.chunk.css
  186 B             build/static/js/518.a5b6aabb.chunk.js
  145 B             build/static/css/979.7bf6dfc6.chunk.css
  132 B             build/static/css/507.933c43f0.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

$ cd ssr && webpack --mode=production
webpack compiled successfully
$ ts-node tool/cli.ts optimize-client-build
(node:32532) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
info: Hashed 4 files in client/build/index.html
$ ts-node tool/cli.ts google-analytics-code
(node:32565) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
info: No Google Analytics code file generated
$ ts-node tool/cli.ts popularities
(node:32598) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
info: Reusing exising /home/onkar/GitHub/mdn/yari/popularities.json (Thu Jun 02 2022 08:11:12 GMT-0400 (Eastern Daylight Time)) for popularities.
info: Reset /home/onkar/GitHub/mdn/yari/popularities.json by running: yarn tool popularities --refresh
$ ts-node tool/cli.ts spas
(node:32631) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
error running rg: undefined: No such file or directory (os error 2)

error running rg: undefined: No such file or directory (os error 2)

In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol is broken! (redirects to /en-US/docs/Web/CSS/CSS_multicol_layout/Basic_concepts)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Columns/Styling_Columns is broken! (redirects to /en-US/docs/Web/CSS/CSS_multicol_layout/Styling_columns)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Columns/Spanning_Columns is broken! (redirects to /en-US/docs/Web/CSS/CSS_multicol_layout/Spanning_balancing_columns)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol is broken! (redirects to /en-US/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol is broken! (redirects to /en-US/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax is broken! (redirects to /en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts is broken! (redirects to /en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout is broken! (redirects to /en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid is broken! (redirects to /en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines is broken! (redirects to /en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout is broken! (redirects to /en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout is broken! (redirects to /en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes is broken! (redirects to /en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility is broken! (redirects to /en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement is broken! (redirects to /en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout is broken! (redirects to /en-US/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation is broken! (redirects to /en-US/docs/Web/CSS/CSS_lists/Consistent_list_indentation)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts is broken! (redirects to /en-US/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning is broken! (redirects to /en-US/docs/Web/CSS/CSS_logical_properties_and_values/Floating_and_positioning)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding is broken! (redirects to /en-US/docs/Web/CSS/CSS_logical_properties_and_values/Margins_borders_padding)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Logical_Properties/Sizing is broken! (redirects to /en-US/docs/Web/CSS/CSS_logical_properties_and_values/Sizing)
In CSSRef the smartLink to /en-US/docs/Web/CSS/Media_Queries/Using_media_queries is broken! (redirects to /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
In CSSRef the smartLink to /en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility is broken! (redirects to /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility)
In CSSRef the smartLink to /en-US/docs/Web/CSS/Media_Queries/Testing_media_queries is broken! (redirects to /en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index is broken! (redirects to /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes is broken! (redirects to /en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes)
In CSSRef the smartLink to /en-US/docs/Web/CSS/CSS_Text/Wrapping_Text is broken! (redirects to /en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text)
Built 34 SPA related files
$ ts-node tool/cli.ts gather-git-history
(node:32668) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Wrote 1 _githistory.json files
$ ts-node tool/cli.ts build-robots-txt
(node:32703) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
info: Generated client/build/robots.txt based on ALWAYS_ALLOW_ROBOTS=false
[OKAY] Loaded ENV .env File as KEY=VALUE Format
7:28:07 PM server.1     |  $ node-dev --experimental-loader ts-node/esm server/index.ts
7:28:07 PM type-check.1 |  9:58:07 AM - Starting compilation in watch mode...
7:28:07 PM ssr.1        |  $ cd ssr && webpack --mode=production --watch
7:28:07 PM web.1        |  $ cd client && cross-env NODE_ENV=development BABEL_ENV=development BROWSER=none PORT=3000 node scripts/start.js
7:28:09 PM web.1        |  Setting up a Proxy to localhost:5042
7:28:11 PM web.1        |  [HPM] Proxy created: !**/*.hot-update.json  -> http://localhost:5042
7:28:12 PM web.1        |  Starting the development server...
7:28:12 PM server.1     |  TypeError: Cannot read properties of undefined (reading 'publicPath')
7:28:12 PM server.1     |      at file:///home/onkar/GitHub/mdn/yari/server/dev.ts:29:40
7:28:12 PM server.1     |  [ERROR] 09:58:12 TypeError: Cannot read properties of undefined (reading 'publicPath')
...

@caugner I am also seeing this warning twice:

One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

@caugner
Copy link
Contributor

caugner commented Jul 18, 2023

error running rg: undefined: No such file or directory (os error 2)

error running rg: undefined: No such file or directory (os error 2)
(...)
7:28:12 PM server.1 | TypeError: Cannot read properties of undefined (reading 'publicPath')
7:28:12 PM server.1 | at file:///home/onkar/GitHub/mdn/yari/server/dev.ts:29:40

@OnkarRuikar Are you on Windows?

@caugner
Copy link
Contributor

caugner commented Jul 18, 2023

It seems that you have NODE_ENV = "development" in your environment (or .env file), and that I missed in #5664 to assume that NODE_ENV is "development" unless specified otherwise.

@caugner caugner changed the title fix: Cannot read properties of undefined (reading 'publicPath') fix(server/dev): avoid TypeError "Cannot read properties of undefined (reading 'publicPath')" Jul 18, 2023
@caugner caugner changed the title fix(server/dev): avoid TypeError "Cannot read properties of undefined (reading 'publicPath')" fix(server/dev): use dev middlewares by default + cleanup config Jul 18, 2023
@caugner caugner changed the title fix(server/dev): use dev middlewares by default + cleanup config chore(server): remove dev middlewares + merge start:{dev-server,server} scripts Jul 18, 2023
@caugner
Copy link
Contributor

caugner commented Jul 18, 2023

@OnkarRuikar Sorry for "taking over" this PR, but one change lead to another. 😉

Would you mind checking out my changes? It seems that the dev middlewares weren't necessary, after all.

@github-actions github-actions bot added the dependencies Pull requests that update a dependency file label Jul 18, 2023
Copy link
Collaborator

@queengooborg queengooborg left a comment

Choose a reason for hiding this comment

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

Confirming that everything's working as expected, both with NODE_ENV set to development and unset -- LGTM!

@caugner caugner merged commit 2805415 into mdn:main Jul 18, 2023
11 checks passed
@OnkarRuikar OnkarRuikar deleted the dev_conf branch July 19, 2023 01:39
@OnkarRuikar
Copy link
Contributor Author

@OnkarRuikar Sorry for "taking over" this PR

Please do take over when needed. Thanks for fixing this quickly!
In my environment after deleting node_module and yarn install it works with and without development set. I haven't tested hot loading in both.

but one change lead to another. 😉

You nerd sniped yourself! 😃


$ ts-node tool/cli.ts spas
error running rg: undefined: No such file or directory (os error 2)

The error is because BLOG_ROOT is not set in .env file. 🤦 The repo is not public...
The current error message is not helpful at all. I spent time looking into the PATH and environment variables. Sending a PR to avoid the error and for logging better error messages.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Pull requests that update a dependency file
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants