I am making an app with React, which integrates with Firebase and I am deploying it to Heroku afterwards. App works great in localhost and everything goes without any errors, and webpack also compiles with no errors.
My progress is same as on this commit, it is from the same course and the folder structure is the same(I have set env variales on Heroku as well):
https://github.com/sjames1958gm/ReactTodo/commit/94e038955534771fbd5b77a468e4f23701c2d506
However, when I deploy it to Heroku I get a blank screen and this error in console:
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)
Here are my webpack and package.json files:
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"
}
}
I am trying to figure out it for days, so any help is much appreciated.
via Smithy
No comments:
Post a Comment