mobx 和 mobx-react 的 Webpack 构建问题答案

【问题标题】：Webpack build issue with mobx and mobx-reactmobx 和 mobx-react 的 Webpack 构建问题
【发布时间】：2017-04-10 17:44:14
【问题描述】：

我有一个项目使用 React 和 Mobx 和 Mobx-react。

我的项目在本地运行良好。但是，当使用 webpack -p 构建时，我在控制台中看到一个空白屏幕并显示以下错误：

webpack:///./~/mobx-react/index.js?:3 Uncaught Error: Cannot find module "mobx"
    at webpackMissingModule (webpack:///./~/mobx-react/index.js?:3)
    at webpackUniversalModuleDefinition (webpack:///./~/mobx-react/index.js?:3)
    at eval (webpack:///./~/mobx-react/index.js?:10)
    at Object.<anonymous> (bundle.js:18)
    at n (bundle.js:1)
    at eval (webpack:///./src/components/Category.jsx?:35)
    at Object.<anonymous> (bundle.js:27)
    at n (bundle.js:1)
    at eval (webpack:///./src/components/CategoryNavsDates.jsx?:15)
    at Object.<anonymous> (bundle.js:14)

这是我的 webpack 配置：

var path = require('path');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer')
var CopyWebpackPlugin = require('copy-webpack-plugin');

var BUILD_DIR = path.resolve(__dirname, 'build/');
var SOURCE_DIR = path.resolve(__dirname, 'src/');

module.exports = {
  devtool: 'eval',
  entry: SOURCE_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          cacheDirectory: true,
          plugins: ['transform-decorators-legacy'],
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: "[name]__[local]___[hash:base64:3] "} },
          { loader: 'postcss-loader', options: {} },
        ]
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: function () {
          return [
            require('postcss-import'),
            require('postcss-cssnext'),
          ];
        },
      }
    }),
    new CopyWebpackPlugin([{ from: 'index.html', to: '' },])
  ],
  devServer: {
    historyApiFallback: true
  },
};

在我的整个项目中只有一个文件使用了 Mobx，也就是错误所指的文件，Category.jsx。

Category.jsx 示例：

import { observer } from 'mobx-react'
import { observable } from 'mobx'
...
@observer class Category extends React.Component {
  @observable showingSmallMenu = false
  ...
}

正如我所说，这一切在本地都可以正常工作。

这可能是什么问题？

【问题讨论】：

您是否将mobx 安装为devDependencies 而不是dependencies？

标签： reactjs webpack mobx mobx-react

【解决方案1】：

如果在mobx-react 之前导入mobx 会有所不同吗？

【讨论】：

同样的错误显示，除了这次它来自index.js而不是mobx-react：if(true) module.exports = factory(__webpack_require__(2), __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"mobx\""); e.code = 'MODULE_NOT_FOUND';; throw e; }())), __webpack_require__(76)); else if(typeof define === 'function' && define.amd) define(["react", "mobx", "react-dom"], factory); ...
index.js 长什么样子？

【解决方案2】：

就我而言，这是由以下原因引起的：

alias: {
   mobx: __dirname + '/node_modules/mobx/lib/mobx.es6.js'
}

去掉mobx别名，问题就解决了

【讨论】：