解决Webpack /反应错误

Question

This is a configuration problem with Webpack that I'm unsure how to debug. I have a react-typescript project. Running webpack fails with this extended error message:

ERROR in ./src/App.tsx
Module not found: Error: Can't resolve '' in '/Users/dylan/selfie/bismuth'
resolve '' in '/Users/dylan/selfie/bismuth'
  using description file: /Users/dylan/selfie/bismuth/package.json (relative path: .)
  after using description file: /Users/dylan/selfie/bismuth/package.json (relative path: .)
    using description file: /Users/dylan/selfie/bismuth/package.json (relative path: .)
      no extension
        /Users/dylan/selfie/bismuth is not a file
      .js
        /Users/dylan/selfie/bismuth.js doesn't exist
      .json
        /Users/dylan/selfie/bismuth.json doesn't exist
      as directory
        existing directory
          using path: /Users/dylan/selfie/bismuth/index
            using description file: /Users/dylan/selfie/bismuth/package.json (relative path: ./index)
              no extension
                /Users/dylan/selfie/bismuth/index doesn't exist
              .js
                /Users/dylan/selfie/bismuth/index.js doesn't exist
              .json
                /Users/dylan/selfie/bismuth/index.json doesn't exist
[/Users/dylan/selfie/bismuth]
[/Users/dylan/selfie/bismuth.js]
[/Users/dylan/selfie/bismuth.json]
[/Users/dylan/selfie/bismuth/index]
[/Users/dylan/selfie/bismuth/index.js]
[/Users/dylan/selfie/bismuth/index.json]
 @ ./src/App.tsx 17:0-19
 @ multi ./src/App.tsx

ERROR in ./src/App.tsx
Module not found: Error: Can't resolve '' in '/Users/dylan/selfie/bismuth'
resolve '' in '/Users/dylan/selfie/bismuth'
  using description file: /Users/dylan/selfie/bismuth/package.json (relative path: .)
  after using description file: /Users/dylan/selfie/bismuth/package.json (relative path: .)
    using description file: /Users/dylan/selfie/bismuth/package.json (relative path: .)
      no extension
        /Users/dylan/selfie/bismuth is not a file
      .js
        /Users/dylan/selfie/bismuth.js doesn't exist
      .json
        /Users/dylan/selfie/bismuth.json doesn't exist
      as directory
        existing directory
          using path: /Users/dylan/selfie/bismuth/index
            using description file: /Users/dylan/selfie/bismuth/package.json (relative path: ./index)
              no extension
                /Users/dylan/selfie/bismuth/index doesn't exist
              .js
                /Users/dylan/selfie/bismuth/index.js doesn't exist
              .json
                /Users/dylan/selfie/bismuth/index.json doesn't exist
[/Users/dylan/selfie/bismuth]
[/Users/dylan/selfie/bismuth.js]
[/Users/dylan/selfie/bismuth.json]
[/Users/dylan/selfie/bismuth/index]
[/Users/dylan/selfie/bismuth/index.js]
[/Users/dylan/selfie/bismuth/index.json]
 @ ./src/App.tsx 20:0-46
 @ multi ./src/App.tsx

ERROR in ./src/App.tsx
Module not found: Error: Can't resolve '' in '/Users/dylan/selfie/bismuth'
resolve '' in '/Users/dylan/selfie/bismuth'
  using description file: /Users/dylan/selfie/bismuth/package.json (relative path: .)
  after using description file: /Users/dylan/selfie/bismuth/package.json (relative path: .)
    using description file: /Users/dylan/selfie/bismuth/package.json (relative path: .)
      no extension
        /Users/dylan/selfie/bismuth is not a file
      .js
        /Users/dylan/selfie/bismuth.js doesn't exist
      .json
        /Users/dylan/selfie/bismuth.json doesn't exist
      as directory
        existing directory
          using path: /Users/dylan/selfie/bismuth/index
            using description file: /Users/dylan/selfie/bismuth/package.json (relative path: ./index)
              no extension
                /Users/dylan/selfie/bismuth/index doesn't exist
              .js
                /Users/dylan/selfie/bismuth/index.js doesn't exist
              .json
                /Users/dylan/selfie/bismuth/index.json doesn't exist
[/Users/dylan/selfie/bismuth]
[/Users/dylan/selfie/bismuth.js]
[/Users/dylan/selfie/bismuth.json]
[/Users/dylan/selfie/bismuth/index]
[/Users/dylan/selfie/bismuth/index.js]
[/Users/dylan/selfie/bismuth/index.json]
 @ ./src/App.tsx 21:0-59
 @ multi ./src/App.tsx

ERROR in ./src/App.tsx
Module not found: Error: Can't resolve '' in '/Users/dylan/selfie/bismuth'
resolve '' in '/Users/dylan/selfie/bismuth'
  using description file: /Users/dylan/selfie/bismuth/package.json (relative path: .)
  after using description file: /Users/dylan/selfie/bismuth/package.json (relative path: .)
    using description file: /Users/dylan/selfie/bismuth/package.json (relative path: .)
      no extension
        /Users/dylan/selfie/bismuth is not a file
      .js
        /Users/dylan/selfie/bismuth.js doesn't exist
      .json
        /Users/dylan/selfie/bismuth.json doesn't exist
      as directory
        existing directory
          using path: /Users/dylan/selfie/bismuth/index
            using description file: /Users/dylan/selfie/bismuth/package.json (relative path: ./index)
              no extension
                /Users/dylan/selfie/bismuth/index doesn't exist
              .js
                /Users/dylan/selfie/bismuth/index.js doesn't exist
              .json
                /Users/dylan/selfie/bismuth/index.json doesn't exist
[/Users/dylan/selfie/bismuth]
[/Users/dylan/selfie/bismuth.js]
[/Users/dylan/selfie/bismuth.json]
[/Users/dylan/selfie/bismuth/index]
[/Users/dylan/selfie/bismuth/index.js]
[/Users/dylan/selfie/bismuth/index.json]
 @ ./src/App.tsx 19:0-37
 @ multi ./src/App.tsx

ERROR in ./src/App.tsx
Module not found: Error: Can't resolve '' in '/Users/dylan/selfie/bismuth'
resolve '' in '/Users/dylan/selfie/bismuth'
  using description file: /Users/dylan/selfie/bismuth/package.json (relative path: .)
  after using description file: /Users/dylan/selfie/bismuth/package.json (relative path: .)
    using description file: /Users/dylan/selfie/bismuth/package.json (relative path: .)
      no extension
        /Users/dylan/selfie/bismuth is not a file
      .js
        /Users/dylan/selfie/bismuth.js doesn't exist
      .json
        /Users/dylan/selfie/bismuth.json doesn't exist
      as directory
        existing directory
          using path: /Users/dylan/selfie/bismuth/index
            using description file: /Users/dylan/selfie/bismuth/package.json (relative path: ./index)
              no extension
                /Users/dylan/selfie/bismuth/index doesn't exist
              .js
                /Users/dylan/selfie/bismuth/index.js doesn't exist
              .json
                /Users/dylan/selfie/bismuth/index.json doesn't exist
[/Users/dylan/selfie/bismuth]
[/Users/dylan/selfie/bismuth.js]
[/Users/dylan/selfie/bismuth.json]
[/Users/dylan/selfie/bismuth/index]
[/Users/dylan/selfie/bismuth/index.js]
[/Users/dylan/selfie/bismuth/index.json]
 @ ./src/App.tsx 23:0-44
 @ multi ./src/App.tsx
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! dash2@0.1.0 buildwebpack: `webpack --display-error-details`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the dash2@0.1.0 buildwebpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dylan/.npm/_logs/2018-01-09T19_57_29_607Z-debug.log

I have this package.json:

{
  "name": "dash2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@blueprintjs/core": "^1.33.0",
    "@blueprintjs/datetime": "^1.24.0",
    "@types/recharts": "^1.0.7",
    "react": "^16.2.0",
    "react-addons-css-transition-group": "^15.6.2",
    "react-dom": "^16.2.0",
    "react-scripts-ts": "2.8.0",
    "react-select": "^1.1.0",
    "recharts": "^1.0.0-beta.5",
    "style-loader": "^0.19.1"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject",
    "buildwebpack": "webpack --display-error-details",
    "dev": "webpack-dev-server"
  },
  "devDependencies": {
    "@types/jest": "^21.1.8",
    "@types/node": "^8.0.53",
    "@types/react": "^16.0.25",
    "@types/react-dom": "^16.0.3",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.8",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^2.30.1",
    "image-webpack-loader": "^3.4.2",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "webpack": "^3.10.0"
  }
}

And this webpack.config.js:

var path = require("path");
var config = {
    /* The entry point of the application. Webpack uses this information to create the dependency tree which is used to bundle the scripts.*/
    entry: ["./src/App.tsx"],
    /* This information is used to give the name of the bundled file and the location of the bundled file. */
    output: {
        path: path.resolve(__dirname, "build"),
        publicPath: "/build/",
        filename: "bundle.js"
    },
    /* The extensions which will be imported or required in the application scripts. */
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        /* Define the loaders to be used. Regex will test the type of files on which the loader is to be applied. The excluded files are also mentioned. Loaders are used mainly to preprocess/transpile the file when imported or required in the scripts before bundling. */
        loaders: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                exclude: /node_modules/
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            },
            {
                test: /\.css$/,
                loader: 'style!css!'
            }
        ]
    }
};
module.exports = config;

My entire app is stored in src/App.tsx and src/App.css .

Where should I begin to debug this problem? I assume I am missing some information in my package.json .

Answer 1

我不确定，但是您缺少package.json中的主要 //入口点，这是您执行NPM初始化时的第四个选项