Question

我有一个项目使用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
  ...
}

正如我所说，这一切在当地完美无缺。

这可能是什么问题？

Answer 1

如果您在mobx之前导入mobx-react会不会产生影响？

Answer 2

在我看来，这是由以下原因引起的：

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

删除mobx别名，即可解决问题

Webpack构建问题与mobx和mobx-react

2 个答案: