배포 할 때 Heroku에서 "모듈을 찾을 수 없습니다."오류가 발생합니다.

Question

그래서 React로 앱을 만들고 있으며, 이후에 그것을 Heroku에 배포하고 있습니다. 모든 것이 localhost와 오류없이 훌륭하게 작동하며 webpack도 오류없이 컴파일됩니다. 나는 Heroku에서도 env variales를 설정했다.

: - 그러나

, 나에게 Heroku에 배포 할 때 빈 화면 및 콘솔에서이 오류가 (이 문제없이 로컬 호스트에서 작동, 수입 등 내가 제대로 TodoApi을 요구하고 다양한 방법을 시도했다)

나는 며칠 동안 그것을 알아 내려고 노력하고 있으므로 어떤 도움을 많이 주시면 감사하겠습니다. 여기

Uncaught Error: Cannot find module "TodoApi" 
    at bundle.js:20 
    at Object.<anonymous> (bundle.js:20) 
    at t (bundle.js:1) 
    at Object.<anonymous> (bundle.js:20) 
    at t (bundle.js:1) 
    at Object.<anonymous> (bundle.js:3) 
    at Object.<anonymous> (bundle.js:3) 
    at t (bundle.js:1) 
    at Object.<anonymous> (bundle.js:1) 
    at t (bundle.js:1) 

내 웹팩 및 package.json 파일입니다 : 당신은 TodoApi 요구하고있다

var webpack = require('webpack'); 
var path = require('path'); 
var envFile = require('node-env-file'); 

process.env.NODE_ENV = process.env.NODE_ENV || 'development'; 

try { 
    envFile(path.join(__dirname, 'config/' + process.env.NODE_ENV + '.env')); 
} catch(e) { 

} 

module.exports = { 
    entry: [ 
    'script!jquery/dist/jquery.min.js', 
    'script!foundation-sites/dist/js/foundation.min.js', 
    './app/app.jsx' 
    ], 
    externals: { 
     jquery: 'jQuery' 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      '$': 'jquery', 
      'jQuery': 'jquery' 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      compressor: { 
       warnings: false 
      } 
     }), 
     new webpack.DefinePlugin({ 
     'process.env': { 
      NODE_ENV: JSON.stringify(process.env.NODE_ENV), 
      API_KEY: JSON.stringify(process.env.API_KEY), 
      AUTH_DOMAIN: JSON.stringify(process.env.AUTH_DOMAIN), 
      DATABASE_URL: JSON.stringify(process.env.DATABASE_URL), 
      STORAGE_BUCKET: JSON.stringify(process.env.STORAGE_BUCKET), 
      MESSAGING_SENDER_ID: JSON.stringify(process.env.MESSAGING_SENDER_ID) 
     } 
     }) 
    ], 
    output: { 
    path: __dirname, 
    filename: './public/bundle.js' 
    }, 
    resolve: { 
    root: __dirname, 
    modulesDirectories: [ 
     'node_modules', 
     './app/components', 
     './app/api' 
    ], 
    alias: { 
     app: 'app', 
     applicationStyles: 'app/styles/app.scss', 
     actions: 'app/actions/actions.jsx', 
     reducers: 'app/reducers/reducers.jsx', 
     configureStore: 'app/store/configureStore.jsx' 
    }, 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'] 
     }, 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/ 
     } 
    ] 
    }, 
    devtool: process.env.NODE_ENV === 'production' ? undefined : 'cheap-module-eval-source-map' 
}; 


{ 
    "name": "reactapp", 
    "version": "1.0.0", 
    "description": "ReactApp", 
    "main": "index.js", 
    "scripts": { 
    "test": "NODE_ENV=test karma start", 
    "build": "webpack", 
    "start": "npm run build && node server.js" 
    }, 
    "author": "John Smith", 
    "license": "MIT", 
    "dependencies": { 
    "axios": "^0.16.0", 
    "babel-core": "^6.5.1", 
    "babel-loader": "^6.2.2", 
    "babel-preset-es2015": "^6.5.0", 
    "babel-preset-react": "^6.5.0", 
    "babel-preset-stage-0": "^6.5.0", 
    "css-loader": "^0.23.1", 
    "deep-freeze-strict": "^1.1.1", 
    "expect": "^1.20.2", 
    "express": "^4.13.4", 
    "firebase": "^3.9.0", 
    "foundation-sites": "^6.3.1", 
    "jquery": "^2.2.1", 
    "moment": "^2.18.1", 
    "node-env-file": "^0.1.8", 
    "node-sass": "^4.5.2", 
    "react": "^0.14.7", 
    "react-addons-test-utils": "^0.14.6", 
    "react-dom": "^0.14.7", 
    "react-redux": "^5.0.4", 
    "react-router": "^2.0.0", 
    "redux": "^3.6.0", 
    "redux-mock-store": "^1.2.3", 
    "redux-thunk": "^2.2.0", 
    "sass-loader": "^6.0.3", 
    "script-loader": "^0.6.1", 
    "style-loader": "^0.13.0", 
    "uuid": "^3.0.1", 
    "webpack": "^1.12.13" 
    }, 
    "devDependencies": { 
    "karma": "^0.13.22", 
    "karma-chrome-launcher": "^0.2.3", 
    "karma-mocha": "^0.2.2", 
    "karma-mocha-reporter": "^2.2.3", 
    "karma-sourcemap-loader": "^0.3.7", 
    "karma-webpack": "^1.8.1", 
    "mocha": "^2.5.3" 
    } 
} 

var React = require('react'); 
var { connect } = require('react-redux'); 
import Todo from 'Todo'; 
var TodoApi = require('TodoApi'); 

export var TodoList = React.createClass ({ 
    render: function() { 
     var { todos, showCompleted, searchText } = this.props; 
     var renderTodos =() => { 
      var filteredTodos = TodoApi.filterTodos(todos, showCompleted, searchText); 

      if(filteredTodos.length === 0) { 
       return (
        <p className="container__message">No tasks</p> 
       ); 
      } 
      return filteredTodos.map((todo) => { 
       return (
        //add unique key prop to keep track of individual components 
        <Todo key={todo.id} {...todo} /> 
       ); 
      }); 
     }; 
     return (
      <div> 
       {renderTodos()} 
      </div> 
     ); 
    } 
}); 

export default connect(
    (state) => { 
     return state; 
    } 
)(TodoList); 

Answer 1

하지만,이 패키지는 package.json

당신의 TodoList.jsx 구성 요소에 존재하지 않는

var TodoApi = require("TodoApi");

repo를 빠르게 살펴보면 패키지가 어디에도 존재하지 않음을 알 수 있습니다.

Answer 2

당신의 문제는 웹팩 구성 파일의 resolve 부분에 있다고 생각합니다. Heroku에 배포 할 때 resolve.modulesDirectories이 제대로 작동하지 않는 것 같습니다. 012.대신 resolve.root으로 './app/components'및 './app/api'를 해결하도록 구성하는 것이 더 바람직하다고 생각합니다. 따라서 resolve 구성을 따라 해보십시오. 아마도 Heroku와 함께 작동 할 것입니다.

resolve: { 
    root: [ 
     __dirname, 
     path.resolve(__dirname, "app/components"), 
     path.resolve(__dirname, "app/api") 
    ], 
    modulesDirectories: [ 'node_modules' ], 
    alias: { 
     app: 'app', 
     applicationStyles: 'app/styles/app.scss', 
     actions: 'app/actions/actions.jsx', 
     reducers: 'app/reducers/reducers.jsx', 
     configureStore: 'app/store/configureStore.jsx' 
    }, 
    extensions: ['', '.js', '.jsx'] 
} 

Answer 3

문제는 그대로입니다. TodoApi.

TodoApi가 "node_modules"디렉토리에 있기 때문에 로컬로 작동합니다. (index.html에 로컬로 포함시키지 않았습니까?) 문제는 배포 패키지에 포함되어 있지 않다는 것입니다. 그것이 작동하지 않는 이유입니다. 당신이 발견하는 경우

첫째는 모르지만 당신은 당신이 다시 제외node_modules에서 modulesDirectories 나중에 아래 module.loaders 포함 (에 wan't). 다행히 당신을 위해 그것은 포함하지 않았다, 그렇지 않으면 당신은 여전히 ​​건물, 롤 것입니다. 그 외에는 모듈 통로를 삭제할 수 있습니다. 그리고 node_modules을 디렉토리에 포함시키는 것이 좋습니다. ;)

구조를 가져 오기 위해 다음을 수행하므로 포함 된 내용과 그렇지 않은 내용을 명확하게 볼 수 있습니다. 웹 팩의 맨 위에는 다음과 같은 절대 디렉토리가 정의되어 있습니다.

// Absolute directories 
const root = (...dir) => path.resolve(__dirname, ...dir); 
const lib  = root('lib'), 
     src  = root('src'), // or 'app' 
     project = root('.'); 

이렇게하면 어떤 디렉토리가 할당되어 있고 읽기가 쉬운 지 알 것입니다. 그런 다음 엔트리 파일을 설정하십시오.

const entry = root('app/app.jsx'); 

그리고 모듈에 따라 변경 수출 : 난 항상 지금까지 웹팩 우려 SRC가 최상위 디렉토리는 것을 의미 내 src 디렉토리에 컨텍스트를 설정

root: src, 
context: src, 
entry: entry, 
... 

. 진입중인 다른 물건을 제거하십시오.

아직 빌드가 작동하지 않는 동안 Uglify 플러그인을 주석 처리하고 오류를 생성 할 수있는 항목을 제외하십시오.

웹팩 번들 분석기을 설치하십시오. 이처럼 웹팩 플러그인에

npm i --save-dev webpack-bundle-analyzer 

그리고 추가 :

이

 new BundleAnalyzerPlugin({ 
     analyzerMode: 'server', 
     analyzerHost: 'localhost', 
     analyzerPort: 9002, 
     reportFilename: 'report.html', 
     openAnalyzer: true, 
     // Log level. Can be 'info', 'warn', 'error' or 'silent'. 
     logLevel: 'info' 
     }) 

이 빌드 후 패키지의 멋진 그래픽보기를 엽니 다. 블록 중 하나는 "TodoApi"를 언급해야하며, 그렇다면 당신은 훌륭합니다. 코드를 변경하지 않고 처음으로 BundleAnalyzerPlugin을 추가하면 TodoApi가 아마도 거기에 없다는 것을 알 수 있습니다.