解决webpack /反应错误

时间:2018-01-09 20:02:03

标签: reactjs webpack

这是Webpack的配置问题,我不确定如何调试。我有一个react-typescript项目。运行webpack失败并显示以下扩展错误消息:

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

我有这个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"
  }
}

这个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;

我的整个应用都存储在src/App.tsxsrc/App.css

我应该从哪里开始调试此问题?我认为我遗漏了package.json中的一些信息。

1 个答案:

答案 0 :(得分:0)

我不确定但您错过了 //入口点 在package.json中, 这是执行NPM初始化时的第4个选项