0

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

正如我所说，这一切都在本地工作得很好。

这里可能是什么问题？

4

2 回答 2

1

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

于 2017-04-11T06:26:00.617 回答
0

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

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

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

于 2018-12-29T03:38:07.230 回答