Question

我正在开发一个使用React，Redux构建的笔记应用程序，它将最终连接到第三方API来存储我的数据。

当我尝试运行npm run build-dev时，出现以下错误：

TypeError: Cannot read property 'compilation' of undefined
    at LiveReloadPlugin.apply (/Users/danale/Projects/notez/node_modules/webpack-livereload-plugin/index.js:110:18)
    at Compiler.apply (/Users/danale/Projects/notez/node_modules/tapable/lib/Tapable.js:375:16)
    at webpack (/Users/danale/Projects/notez/node_modules/webpack/lib/webpack.js:33:19)
    at processOptions (/Users/danale/Projects/notez/node_modules/webpack/bin/webpack.js:335:15)
    at yargs.parse (/Users/danale/Projects/notez/node_modules/webpack/bin/webpack.js:397:2)
    at Object.Yargs.self.parse (/Users/danale/Projects/notez/node_modules/yargs/yargs.js:533:18)
    at Object.<anonymous> (/Users/danale/Projects/notez/node_modules/webpack/bin/webpack.js:152:7)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Function.Module.runMain (module.js:694:10)
    at startup (bootstrap_node.js:204:16)
    at bootstrap_node.js:625:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! notez@ build-dev: `webpack -w`
npm ERR! Exit status 1

这是我的package.json文件：

{
  "name": "notez",
  "description": "note taking application.",
  "main": "index.js",
  "scripts": {
    "start": "npm run build; node server/index.js",
    "start-dev": "nodemon server/index.js",
    "build": "webpack -p",
    "build-dev": "webpack -w",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "async": "^2.5.0",
    "babel": "^6.23.0",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-regenerator": "^6.24.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "body-parser": "^1.17.2",
    "cosmicjs": "^2.39.91",
    "express": "^4.15.3",
    "immutable": "^3.8.1",
    "moment": "^2.18.1",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-addons-css-transition-group": "^15.6.0",
    "react-addons-transition-group": "^15.6.0",
    "react-color": "^2.13.4",
    "react-dom": "^15.6.1",
    "react-modal-dialog": "^4.0.7",
    "react-redux": "^5.0.5",
    "react-router": "^3.0.5",
    "react-spinners": "0.0.30",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-saga": "^0.15.6",
    "redux-thunk": "^2.2.0",
    "reselect": "^3.0.1",
    "styled-components": "^2.1.1",
    "volleyball": "^1.4.1",
    "webpack": "^3.4.1",
    "webpack-livereload-plugin": "2.1.1",
    "whatwg-fetch": "^2.0.3"
  }
}

这是我的webpack.config.js文件：

var path = require('path');
var LiveReloadPlugin = require('webpack-livereload-plugin');
var webpack = require('webpack');

module.exports = {
  entry: './client/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'client/dist')
  },
  context: __dirname,
  resolve: {
    extensions: ['.js', '.jsx', '.json', '*']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: {
          presets: ['react', 'es2015', 'stage-0']
        }
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        COSMIC_BUCKET: JSON.stringify(process.env.COSMIC_BUCKET),
        COSMIC_READ_KEY: JSON.stringify(process.env.COSMIC_READ_KEY),
        COSMIC_WRITE_KEY: JSON.stringify(process.env.COSMIC_WRITE_KEY)
      }
    }),
    new LiveReloadPlugin({ appendScriptTag: true })
  ]
};

Answer 1

您正在使用webpack-livereload-plugin版本2和webpack版本3。从文档webpack-livereload-plugin中可以看到，您应该使用与Webpack 3兼容的版本1。

# for webpack 3 
npm install --save-dev webpack-livereload-plugin@1

TypeError：无法读取未定义的属性“编译”

1 个答案: