I am getting the following error while trying to run ./watch

1

I changed to a new machine and from Visual Studio 2017 to Visual Studio 2019 I started getting the following errors when I was running watch command as below, which I used to do from the beginning

PS C:\GitSrsCodes\IMS\IMS.Ember> ./watch
npm WARN file-loader@4.2.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN less-loader@5.0.0 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.0 requires a peer of webpack@^4.36.0 but none is installed. You must install peer dependencies yourself.
npm WARN style-loader@1.0.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN uglifyjs-webpack-plugin@2.2.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@3.3.10 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.
npm WARN ims-ember@1.0.0 No description
npm WARN ims-ember@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

updated 2 packages and audited 2375 packages in 14.249s

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

found 348 vulnerabilities (17 low, 1 moderate, 330 high)
  run `npm audit fix` to fix them, or `npm audit` for details

webpack is watching the files…

(node:14388) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
(Use `node --trace-deprecation ...` to show where the warning was created)
assets by chunk 1.37 MiB (auxiliary name: app)
  assets by path *.png 4.17 KiB 5 assets
  assets by path *.svg 540 KiB 2 assets
  assets by path *.eot 182 KiB 2 assets
  assets by path *.ttf 206 KiB 2 assets
  assets by path *.woff 119 KiB 2 assets
  assets by path *.woff2 93 KiB 2 assets
  asset login-bg.jpg 248 KiB [compared for emit] (auxiliary name: app)
  asset loading.gif 8.28 KiB [compared for emit] (auxiliary name: app)
assets by path *.js 23.9 MiB
  asset libs.js 9.98 MiB [compared for emit] (name: libs)
  asset app.js 6.73 MiB [compared for emit] (name: app)
  asset templates.js 6.48 MiB [compared for emit] (name: templates)
  asset polyfill.js 681 KiB [compared for emit] (name: polyfill)
runtime modules 3.13 KiB 15 modules
modules by path ./app/ 3.05 MiB 584 modules
modules by path ./node_modules/ 4.6 MiB 495 modules
modules by path ./helpers/ember/*.js 49.7 KiB 37 modules
modules by path ./CSS/ 869 KiB
  modules by path ./CSS/lightbox2/images/ 176 bytes 4 modules
  modules by path ./CSS/*.less 869 KiB 2 modules
  modules by path ./CSS/chosen/*.png 107 bytes 2 modules
  ./CSS/img/login-bg.jpg 47 bytes [built] [code generated]
modules by path ./.webpack/*.js 57.2 KiB 6 modules

WARNING in ./node_modules/handlebars/lib/index.js 22:38-56
require.extensions is not supported by webpack. Use a loader instead.
 @ ./app/request/details/DetailsController.js 5:0-35
 @ ./.webpack/webpack-results.js 3:11112-11163
 @ ./.webpack/webpack-app.js 1:0-30

WARNING in ./node_modules/handlebars/lib/index.js 23:2-20
require.extensions is not supported by webpack. Use a loader instead.
 @ ./app/request/details/DetailsController.js 5:0-35
 @ ./.webpack/webpack-results.js 3:11112-11163
 @ ./.webpack/webpack-app.js 1:0-30

WARNING in ./node_modules/handlebars/lib/index.js 24:2-20
require.extensions is not supported by webpack. Use a loader instead.
 @ ./app/request/details/DetailsController.js 5:0-35
 @ ./.webpack/webpack-results.js 3:11112-11163
 @ ./.webpack/webpack-app.js 1:0-30

ERROR in ./app/application/ApplicationController.js 5:0-42
Module not found: Error: Can't resolve 'constants' in 'C:\GitSrsCodes\IMS\IMS.Ember\app\application'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "constants": require.resolve("constants-browserify") }'
        - install 'constants-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "constants": false }
 @ ./.webpack/webpack-results.js 3:46-97
 @ ./.webpack/webpack-app.js 1:0-30

ERROR in ./app/components/tuts-tests/tuts-tests.js 5:0-30
Module not found: Error: Can't resolve 'os' in 'C:\GitSrsCodes\IMS\IMS.Ember\app\components\tuts-tests'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "os": false }
 @ ./.webpack/webpack-results.js 3:9632-9682
 @ ./.webpack/webpack-app.js 1:0-30

ERROR in ./node_modules/ember-source/dist/ember.debug.js 6498:16-37
Module not found: Error: Can't resolve 'url' in 'C:\GitSrsCodes\IMS\IMS.Ember\node_modules\ember-source\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }
 @ ./.webpack/webpack-entry-dev.js 5:0-39

3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.38.1 compiled with 3 errors and 3 warnings in 23239 ms

Any help please if possible?

2

./watch is not a command that comes with Ember. The normal way to run a development server is ember serve.

If you have some customized setup that isn’t that, we will have a hard time helping unless you can say a lot more about it.

3

Sure can you please ask me what other details shall I provide, I am poor in JS frameworks, need some help please

4

I understand that watch is not ember command, but can we understand something from these errors? And how to resolve them?

ERROR in ./app/application/ApplicationController.js 5:0-42 Module not found: Error: Can’t resolve ‘constants’ in ‘C:\GitSrsCodes\IMS\IMS.Ember\app\application’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback ‘resolve.fallback: { “constants”: require.resolve(“constants-browserify”) }’ - install ‘constants-browserify’ If you don’t want to include a polyfill, you can use an empty module like this: resolve.fallback: { “constants”: false } @ ./.webpack/webpack-results.js 3:46-97 @ ./.webpack/webpack-app.js 1:0-30

ERROR in ./app/components/tuts-tests/tuts-tests.js 5:0-30 Module not found: Error: Can’t resolve ‘os’ in ‘C:\GitSrsCodes\IMS\IMS.Ember\app\components\tuts-tests’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback ‘resolve.fallback: { “os”: require.resolve(“os-browserify/browser”) }’ - install ‘os-browserify’ If you don’t want to include a polyfill, you can use an empty module like this: resolve.fallback: { “os”: false } @ ./.webpack/webpack-results.js 3:9632-9682 @ ./.webpack/webpack-app.js 1:0-30

ERROR in ./node_modules/ember-source/dist/ember.debug.js 6498:16-37 Module not found: Error: Can’t resolve ‘url’ in ‘C:\GitSrsCodes\IMS\IMS.Ember\node_modules\ember-source\dist’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback ‘resolve.fallback: { “url”: require.resolve(“url/”) }’ - install ‘url’ If you don’t want to include a polyfill, you can use an empty module like this: resolve.fallback: { “url”: false } @ ./.webpack/webpack-entry-dev.js 5:0-39

3 errors have detailed information that is not shown.

Any help please?

Use ‘stats.errorDetails: true’ resp. ‘–stats-error-details’ to show it.

5

The question is, why is webpack involved in building your ember app?

There are two well-supported ways to use webpack in an ember app. The first is ember-auto-import which uses webpack to handle only third-party node_modules, not the app itself. The second is @embroider/webpack, which is relatively new and does a lot of compatibility work to make ember apps legible to webpack. If you’re somehow using webpack without either of those driving, you’re going to have a rough time.

If it used to work, you should try to get back to the exact versions of dependencies you had on your old machine. This is why yarn.lock or package-lock.json is absolutely critical. If you still have access to the old machine, using it to generate one of those might save you. If you don’t, you may need to figure it out through trial and error. From the warnings you pasted, a lot of your setup expects to be on webpack 4 but it’s got webpack 5. That would be an area to explore first.

6

thanks for the awesome information.