Home > OS >  Error trying to init webpack with an empty ts project
Error trying to init webpack with an empty ts project

Time：11-09

I am a webpack newbie trying to set it up first time myself. After installing the necessary packages and creating an empty app.ts with just a console.log('hi'); I run npm run start, webpack should just compile and run smoothly.

However, I got a bunch of errors from webpack saying multiple lib files in node_modules don't exist. I rebuilt and double-checked the node_modules folder the lib files do exist and are just sitting there. So I am confused by the compile errors. It seems straight forward and these errors are not from me? Please Help?

enter image description here enter image description here enter image description here

Full error message here, if it helps...

$ npm run build

> demo@1.0.0 build
> webpack

asset bundle.js 655 bytes [compared for emit] (name: main)
./src/app.ts 58 bytes [built] [code generated]
webpack 5.62.1 compiled successfully in 1949 ms


$ npm run start

> demo@1.0.0 start
> webpack-dev-server --stats-error-details

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.138:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'E:\Udemy\typescript\CourseProject\public' directory
asset bundle.js 427 KiB [emitted] (name: main)
runtime modules 26.3 KiB 13 modules
modules by path ./node_modules/ 119 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 52.7 KiB 12 modules
  modules by path ./node_modules/webpack/hot/*.js 3.01 KiB
    ./node_modules/webpack/hot/dev-server.js 1.59 KiB [built] [code generated] 
    ./node_modules/webpack/hot/log.js 1.34 KiB [built] [code generated]        
    ./node_modules/webpack/hot/emitter.js 75 bytes [built] [code generated]    
  modules by path ./node_modules/url/ 37.1 KiB
    ./node_modules/url/url.js 22.8 KiB [built] [code generated]
    ./node_modules/url/node_modules/punycode/punycode.js 14.3 KiB [built] [code generated]
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/html-entities/lib/index.js 7.74 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
./src/app.ts 58 bytes [built] [code generated]

ERROR in ./node_modules/html-entities/lib/index.js 14:25-54
Module not found: Error: Can't resolve './named-references' in 'E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib'
resolve './named-references' in 'E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib'
  using description file: E:\Udemy\typescript\CourseProject\node_modules\html-entities\package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: E:\Udemy\typescript\CourseProject\node_modules\html-entities\package.json (relative path: ./lib/named-references)      no extension
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\named-references doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\named-references.ts doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\named-referencesjs doesn't exist
      as directory
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\named-references doesn't exist
 @ ./node_modules/webpack-dev-server/client/overlay.js 4:0-39 148:26-32
 @ ./node_modules/webpack-dev-server/client/index.js?protocol=ws:&hostname=0.0.0.0&port=8080&pathname=/ws&logging=info&reconnect=10 6:0-57 77:6-10 115:6-10 124:6-10 142:27-40 158:6-10 167:28-41 183:6-10 193:6-10

ERROR in ./node_modules/html-entities/lib/index.js 15:28-60
Module not found: Error: Can't resolve './numeric-unicode-map' in 'E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib'
resolve './numeric-unicode-map' in 'E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib'
  using description file: E:\Udemy\typescript\CourseProject\node_modules\html-entities\package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: E:\Udemy\typescript\CourseProject\node_modules\html-entities\package.json (relative path: ./lib/numeric-unicode-map)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\numeric-unicode-map doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\numeric-unicode-map.ts doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\numeric-unicode-mapjs doesn't exist
      as directory
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\numeric-unicode-map doesn't exist
 @ ./node_modules/webpack-dev-server/client/overlay.js 4:0-39 148:26-32
 @ ./node_modules/webpack-dev-server/client/index.js?protocol=ws:&hostname=0.0.0.0&port=8080&pathname=/ws&logging=info&reconnect=10 6:0-57 77:6-10 115:6-10 124:6-10 142:27-40 158:6-10 167:28-41 183:6-10 193:6-10

ERROR in ./node_modules/html-entities/lib/index.js 16:24-52
Module not found: Error: Can't resolve './surrogate-pairs' in 'E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib'
resolve './surrogate-pairs' in 'E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib'
  using description file: E:\Udemy\typescript\CourseProject\node_modules\html-entities\package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: E:\Udemy\typescript\CourseProject\node_modules\html-entities\package.json (relative path: ./lib/surrogate-pairs) 
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\surrogate-pairs doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\surrogate-pairs.ts doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\surrogate-pairsjs doesn't exist
      as directory
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\surrogate-pairs doesn't exist
 @ ./node_modules/webpack-dev-server/client/overlay.js 4:0-39 148:26-32
 @ ./node_modules/webpack-dev-server/client/index.js?protocol=ws:&hostname=0.0.0.0&port=8080&pathname=/ws&logging=info&reconnect=10 6:0-57 77:6-10 115:6-10 124:6-10 142:27-40 158:6-10 167:28-41 183:6-10 193:6-10

ERROR in ./node_modules/url/url.js 25:11-28
Module not found: Error: Can't resolve './util' in 'E:\Udemy\typescript\CourseProject\node_modules\url'
resolve './util' in 'E:\Udemy\typescript\CourseProject\node_modules\url'
  using description file: E:\Udemy\typescript\CourseProject\node_modules\url\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: E:\Udemy\typescript\CourseProject\node_modules\url\package.json (relative path: ./util)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\url\util doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\url\util.ts doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\url\utiljs doesn't exist
      as directory
        E:\Udemy\typescript\CourseProject\node_modules\url\util doesn't exist
 @ ./node_modules/webpack-dev-server/client/utils/parseURL.js 1:0-22 35:16-25
 @ ./node_modules/webpack-dev-server/client/index.js?protocol=ws:&hostname=0.0.0.0&port=8080&pathname=/ws&logging=info&reconnect=10 4:0-43 23:26-34

ERROR in ./node_modules/url/url.js 100:18-40
Module not found: Error: Can't resolve 'querystring' in 'E:\Udemy\typescript\CourseProject\node_modules\url'

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: { "querystring": require.resolve("querystring-es3") }'
        - install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "querystring": false }
resolve 'querystring' in 'E:\Udemy\typescript\CourseProject\node_modules\url'
  Parsed request is a module
  using description file: E:\Udemy\typescript\CourseProject\node_modules\url\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in E:\Udemy\typescript\CourseProject\node_modules\url\node_modules
        single file module
          using description file: E:\Udemy\typescript\CourseProject\node_modules\url\package.json (relative path: ./node_modules/querystring)            no extension
              Field 'browser' doesn't contain a valid alias configuration
              E:\Udemy\typescript\CourseProject\node_modules\url\node_modules\querystring doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              E:\Udemy\typescript\CourseProject\node_modules\url\node_modules\querystring.ts doesn't exist
            js
              Field 'browser' doesn't contain a valid alias configuration
              E:\Udemy\typescript\CourseProject\node_modules\url\node_modules\querystringjs doesn't exist
        E:\Udemy\typescript\CourseProject\node_modules\url\node_modules\querystring doesn't exist
      E:\Udemy\typescript\CourseProject\node_modules\node_modules doesn't exist or is not a directory
      looking for modules in E:\Udemy\typescript\CourseProject\node_modules
        single file module
          using description file: E:\Udemy\typescript\CourseProject\package.json (relative path: ./node_modules/querystring)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              E:\Udemy\typescript\CourseProject\node_modules\querystring is not a file
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              E:\Udemy\typescript\CourseProject\node_modules\querystring.ts doesn't exist
            js
              Field 'browser' doesn't contain a valid alias configuration
              E:\Udemy\typescript\CourseProject\node_modules\querystringjs doesn't exist
        existing directory E:\Udemy\typescript\CourseProject\node_modules\querystring
          using description file: E:\Udemy\typescript\CourseProject\node_modules\querystring\package.json (relative path: .)
            using description file: E:\Udemy\typescript\CourseProject\package.json (relative path: ./node_modules/querystring)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                E:\Udemy\typescript\CourseProject\node_modules\querystring is not a file
              .ts
                Field 'browser' doesn't contain a valid alias configuration
                E:\Udemy\typescript\CourseProject\node_modules\querystring.ts doesn't exist
              js
                Field 'browser' doesn't contain a valid alias configuration
                E:\Udemy\typescript\CourseProject\node_modules\querystringjs doesn't exist
              as directory
                existing directory E:\Udemy\typescript\CourseProject\node_modules\querystring
                  using description file: E:\Udemy\typescript\CourseProject\node_modules\querystring\package.json (relative path: .)
                    using path: E:\Udemy\typescript\CourseProject\node_modules\querystring\index
                      using description file: E:\Udemy\typescript\CourseProject\node_modules\querystring\package.json (relative path: ./index)
                        no extension
                          Field 'browser' doesn't contain a valid alias configuration
                          E:\Udemy\typescript\CourseProject\node_modules\querystring\index doesn't exist
                        .ts
                          Field 'browser' doesn't contain a valid alias configuration
                          E:\Udemy\typescript\CourseProject\node_modules\querystring\index.ts doesn't exist
                        js
                          Field 'browser' doesn't contain a valid alias configuration
                          E:\Udemy\typescript\CourseProject\node_modules\querystring\indexjs doesn't exist
      E:\Udemy\typescript\node_modules doesn't exist or is not a directory
      E:\Udemy\node_modules doesn't exist or is not a directory
      E:\node_modules doesn't exist or is not a directory
 @ ./node_modules/webpack-dev-server/client/utils/parseURL.js 1:0-22 35:16-25
 @ ./node_modules/webpack-dev-server/client/index.js?protocol=ws:&hostname=0.0.0.0&port=8080&pathname=/ws&logging=info&reconnect=10 4:0-43 23:26-34

ERROR in ./node_modules/webpack/hot/dev-server.js 11:11-27
Module not found: Error: Can't resolve './log' in 'E:\Udemy\typescript\CourseProject\node_modules\webpack\hot'
resolve './log' in 'E:\Udemy\typescript\CourseProject\node_modules\webpack\hot'
  using description file: E:\Udemy\typescript\CourseProject\node_modules\webpack\package.json (relative path: ./hot)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: E:\Udemy\typescript\CourseProject\node_modules\webpack\package.json (relative path: ./hot/log)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\log doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\log.ts doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\logjs doesn't exist
      as directory
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\log doesn't exist

ERROR in ./node_modules/webpack/hot/dev-server.js 30:4-33
Module not found: Error: Can't resolve './log-apply-result' in 'E:\Udemy\typescript\CourseProject\node_modules\webpack\hot'
resolve './log-apply-result' in 'E:\Udemy\typescript\CourseProject\node_modules\webpack\hot'
  using description file: E:\Udemy\typescript\CourseProject\node_modules\webpack\package.json (relative path: ./hot)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: E:\Udemy\typescript\CourseProject\node_modules\webpack\package.json (relative path: ./hot/log-apply-result)      
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\log-apply-result doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\log-apply-result.ts doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\log-apply-resultjs doesn't exist
      as directory
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\log-apply-result doesn't exist

ERROR in ./node_modules/webpack/hot/dev-server.js 50:18-38
Module not found: Error: Can't resolve './emitter' in 'E:\Udemy\typescript\CourseProject\node_modules\webpack\hot'
resolve './emitter' in 'E:\Udemy\typescript\CourseProject\node_modules\webpack\hot'
  using description file: E:\Udemy\typescript\CourseProject\node_modules\webpack\package.json (relative path: ./hot)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: E:\Udemy\typescript\CourseProject\node_modules\webpack\package.json (relative path: ./hot/emitter)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\emitter doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\emitter.ts doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\emitterjs doesn't exist
      as directory
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\emitter doesn't exist

webpack 5.62.1 compiled with 8 errors in 2878 ms

Thank you very much for your help!

EDIT:

I have run npm install, tried to delete and rebuild the node_modules folder a couple of times in case you wonder. enter image description here

CodePudding user response：

This is happening because you have to installs your dependencies first. Execute npm install before npm run

CodePudding user response：

After checking my setup carefully, I found my own propblem. I wrote extensions: ['.ts', 'js'] missing a DOT, it should be '.js'... That is why webpack didn't want to check the js files. Thank you everyone, question's closed.

Page link：https//www.codepudding.com/os/184382.html

Prev:Wildcard-like syntax in an eloquent Where clause to search between two strings
Next:ScriptExternalLoadError: Loading script failed. [email protected]
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding