TypeScript2+Webpack3 works when installing the same library as a normal module, but fails when installing @types type definition only

I'm trying to create an application using TypeScript2+Webpack3 that uses an external library (module), and I'm going to talk about a certain library A

Library A itself can be successfully built by installing npm install
Build fails when installing library A type definition only (@types/A) with npm install

This phenomenon has occurred, and I'm worried because I don't know how to solve it.
I'm sorry to trouble you, but if anyone knows how to solve this problem, could you please let me know?

私 My guess is that we should probably tell Webpack the location of @types, but
　I don't know how to do this.

Typescript 2.6.1
Webpack 3.8.1
npm 5.5.1

Open source files on Visual Studio Code with no specific error
Verify library (jQuery) input completion also works

import* as $from "jquery";

function test() {
    return$('#TEST').text();
}

{
  "name": "webpacktest1",
  "version": "1.0.0",
  "description":",
  "main": "index.js",
  "scripts": {
    "test": "echo\" Error: no test specified\"&exit1"
  },
  "author":",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "@types/jquery": "^2",
    "awesome-typescript-loader": "^3.3.0",
    "typescript": "^2.6.1"
  }
}

module.exports={
    entry: "./src/index.ts",
    output: {
        filename: "bundle.js",
        path —__dirname+"/dist"
    },
    resolve: {
        // Add '.ts' to resolvable extension
        extensions: [ ".ts", ".js", ".json" ]
    },
    module: {
        loaders:
            // Handle all files in '.ts' with 'awesome-typescript-loader'
            { test://\.ts$/, loader: "awesome-typescript-loader"}
        ]
    }
};

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny"—true,
        "module": "commonjs",
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}

$webpack -- verbose

[at-loader] Using typescript @2.6.1 from typescript and "tsconfig.json" from C:\work\webpacktest1/tsconfig.json.


[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.073 sec.
Hash: ba68d05679d08d7b9f26
Version—webpack 3.8.1
Time: 1626ms
    Asset Size Chunk Names
bundle.js 2.79kB0 [emitted] main
Entrypoint main=bundle.js
chunk {0} bundle.js(main) 160 bytes [entry] [rendered]
    >main[0]./src/index.ts
    [0] ./src/index.ts160 bytes {0} [depth0] [build]

ERROR in./src/index.ts
Module not found: Error: Can't resolve 'jquery' in 'C:\work\webpacktest1\src'
resolve 'jquery' in 'C:\work\webpacktest1\src'
  Parsed request is a module
  using description file: C:\work\webpacktest1\package.json (relative path:./src)
    Field'browser' does not contain a valid alias configuration
  after using description file: C:\work\webpacktest1\package.json (relative path:./src)
    resolve as module
      C:\work\webpacktest1\src\node_modules doesn't exist or is not a directory
      C:\work\node_modules doesn't exist or is not a directory
      C:\node_modules does not exist is not a directory
      looking for modules in C:\work\webpacktest1\node_modules
        using description file: C:\work\webpacktest1\package.json (relative path:./node_modules)
          Field'browser' does not contain a valid alias configuration
        after using description file: C:\work\webpacktest1\package.json (relative path:./node_modules)
          using description file: C:\work\webpacktest1\package.json (relative path:./node_modules/jquery)
            no extension
              Field'browser' does not contain a valid alias configuration
              C:\work\webpacktest1\node_modules\jquery doesn't exist
            .ts
              Field'browser' does not contain a valid alias configuration
              C:\work\webpacktest1\node_modules\jquery.ts doesn't exist
            .js
              Field'browser' does not contain a valid alias configuration
              C:\work\webpacktest1\node_modules\jquery.js doesn't exist
            .json
              Field'browser' does not contain a valid alias configuration
              C:\work\webpacktest1\node_modules\jquery.json doesn't exist
            as directory
              C:\work\webpacktest1\node_modules\jquery doesn't exist
C:\work\webpacktest1\src\node_modules
C:\work\node_modules
C:\node_modules
C:\work\webpacktest1\node_modules\jquery
[C:\work\webpacktest1\node_modules\jquery.ts]
[C:\work\webpacktest1\node_modules\jquery.js]
[C:\work\webpacktest1\node_modules\jquery.json]
C:\work\webpacktest1\node_modules\jquery
 @ ./src/index.ts3—8-25

javascript typescript webpack

2022-09-30 20:12

1 Answers

Sorry, I may have solved myself.

I noticed that adding externals to webpack.config.js seems to work properly.(In this case, jQuery will be used as the external library, so jQuery will be added to external.)
Sorry for the trouble.

module.exports={
    // (omitted)

    externals: {
        "jquery": "jQuery"
    },
};

If you feel that this is not the right solution, I would appreciate it if you could give me additional comments and answers.

2022-09-30 20:12

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656