2017-04-10 12 views
0

저는 Mobx와 함께 React와 Mobx를 사용하는 프로젝트를 가지고 있습니다.mobx 및 mobx-react와 함께 Webpack 빌드 문제가 발생했습니다.

내 프로젝트는 로컬에서 완벽하게 실행됩니다. webpack -p 사용하여 구축 그러나, 나는 콘솔에서 다음과 같은 오류와 함께 빈 화면을 얻을 :

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를 사용하여 하나 개의 파일이 있습니다 : 여기

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) 

나의 웹팩 설정입니다 프로젝트, 그리고 그 오류가 참조하는 파일은 Category.jsx입니다.

Category.jsx 샘플 :

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

나는 로컬이 모든 일이 완벽하게 잘 말하는 것처럼.

여기에서 문제가 될 수있는 것은 무엇입니까?

+0

'mobx'를'dependencies' 대신'devDependencies'로 설치 했습니까? –

답변

1

mobx을 가져 오기 전에 차이가 있습니까? mobx-react?

+0

동일한 오류 쇼, 그것에서'index.js' 오히려'보다는 mobx-react' 오는이 시간을 제외하고! '경우 (참) \t \t module.exports는 = 공장 (__ webpack_require __ (2), __webpack_require __ ((기능 webpackMissingModule() {var e = new Error ("모듈 \"mobx \ ""을 (를) 찾을 수 없음) e.code = 'MODULE_NOT_FOUND';; throw e;}())), __webpack_require __ (76)); \t else if (typeof define === 'function'&& define.amd) \t \t define ([ "react", "mobx", "react-dom"] 팩토리); ... ' – alanbuchanan

+0

index.js는 어떻게 생겼습니까? – mweststrate

+0

여기에 https://gist.github.com/alanbuchanan/dee5be42509ad74ead4f7c9702e52417입니다. – alanbuchanan