Question

我在带有Webpack和babel的React项目中使用了puppeteer。我在组件中编写了此简单代码，并收到以下错误消息。

  async goToPage() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(this.state.url);
  }

当我运行npm start时，在命令行中没有出现任何错误。但是我在谷歌浏览器控制台中收到此错误。我认为webpack.config.js中有一个错误，但我进行了很多搜索，但无法解决。请检查以下信息，以帮助解决此问题。

错误：

Uncaught ReferenceError: ws is not defined
    at eval (external_"ws":1)
    at Object.ws (bundle.js:6941)
    at __webpack_require__ (bundle.js:725)
    at fn (bundle.js:102)
    at eval (WebSocketTransport.js:16)
    at Object../node_modules/puppeteer/lib/WebSocketTransport.js (bundle.js:4655)
    at __webpack_require__ (bundle.js:725)
    at fn (bundle.js:102)
    at Object.eval (Launcher.js:27)
    at eval (Launcher.js:407)

package.json

{
  "name": "scrapper",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@blueprintjs/core": "^3.9.0",
    "axios": "^0.18.0",
    "babel-plugin-emotion": "^10.0.0",
    "bluebird": "^3.5.3",
    "feedparser": "^2.2.9",
    "file-loader": "^2.0.0",
    "lodash": "^4.17.11",
    "promise": "^8.0.2",
    "prop-types": "^15.6.2",
    "puppeteer": "^1.11.0",
    "query-string": "^6.2.0",
    "react-grid-layout": "^0.16.6",
    "react-redux": "^5.1.1",
    "redux": "^4.0.1",
    "redux-promise": "^0.6.0",
    "url-loader": "^1.1.2",
    "ws": "^6.1.2"
  },
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "build": "webpack --mode production",
    "start:react": "react-scripts start",
    "build:react": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.10.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(s*)css$/,
        use: [
          "style-loader", // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
          "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]
      },
      {
        test: /\.(woff|woff2)$/,
        use: {
          loader: "url-loader",
          options: {
            name: "fonts/[hash].[ext]",
            limit: 5000,
            mimetype: "application/font-woff"
          }
        }
      },
      {
        test: /\.(ttf|eot|svg)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "fonts/[hash].[ext]"
          }
        }
      }
    ]
  },
  resolve: {
    extensions: ["*", ".js", ".json"]
  },
  output: {
    path: __dirname + "/dist",
    publicPath: "/",
    filename: "bundle.js"
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebPackPlugin({
      template: "./dist/index.html"
    })
  ],
  devServer: {
    contentBase: "./dist",
    hot: true,
    port: 3000,
    historyApiFallback: true
  },
  externals: ['ws']
};

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties", "emotion"]
}

Answer 1

我不知道确切的问题，只需尝试一次，它可能会起作用只需安装：'npm install --save ws'

否则，您可以查看以下文档：“ https://www.npmjs.com/package/ws”

未捕获的ReferenceError：未定义ws

1 个答案: