I get some troubles to deploy my react app on heroku.
I made a config production file for webpack 2.
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const extractTextPlugin = new ExtractTextPlugin({
filename: 'main.[hash].css'
});
const HtmlPlugin = new HtmlWebpackPlugin({
template: 'src/index.html',
inject: 'body',
favicon: 'src/data/resources/img/logo/favicon.ico'
});
const ENVS = {
'process.env': {
'NODE_ENV': JSON.stringify('production')
},
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
};
const PATHS = {
app : path.join( __dirname, 'src'),
build : path.join( __dirname, 'dist')
};
const config = {
entry: [
PATHS.app + "/index.js"
],
output: {
path: PATHS.build,
filename: 'bundle.[hash].js',
publicPath: '/',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: [nodeModulesPath],
use: ['babel-loader']
},
{
test: /\.(scss|css)$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.html$/,
use: [ {
loader: 'html-loader',
options: {
minimize: true,
removeComments: true,
}
}],
},
{
test: /\.(jpeg|jpg|gf|png|ico|svg|woff|woff2|eot|ttf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'img/',
publicPath: '/'
},
}
]
}
]
},
plugins: [
extractTextPlugin,
HtmlPlugin,
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
minimize: true,
compress: {
warnings: false,
},
}),
new webpack.DefinePlugin(ENVS),
new webpack.NoEmitOnErrorsPlugin(),
new CleanWebpackPlugin(['dist']),
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery',
'window.jQuery': 'jquery'
})
],
};
module.exports = config;
When I run npm run buildin my computer, I had no errors and I have my folder dist.
But on heroku after a push, I had this logs :
build /tmp/build_646d8d781ce9c274343ec9ce9e11f2b4
webpack -p --config webpack-production.config.js clean-webpack-plugin: /tmp/build_646d8d781ce9c274343ec9ce9e11f2b4/dist has been removed. Hash: 2a8fc0ac2f35a1a04faf Version: webpack 2.5.1 Time: 26063ms [163] ./~/jquery/dist/jquery.js 268 kB {0} [built] [190] ./src/index.js 752 bytes {0} [built] [191] ./~/babel-polyfill/lib/index.js 833 bytes {0} [built] [192] ./~/babel-polyfill/~/core-js/fn/regexp/escape.js 107 bytes {0} [built] [372] ./~/babel-polyfill/~/core-js/shim.js 7.38 kB {0} [built] [373] ./~/bootstrap/dist/js/bootstrap.js 69.7 kB {0} [built] [374] ./~/bootstrap/dist/css/bootstrap-theme.css 41 bytes {0} [built] [375] ./~/bootstrap/dist/css/bootstrap.css 41 bytes {0} [built] [376] ./~/fixed-data-table/dist/fixed-data-table.css 41 bytes {0} [built] [392] ./~/react-dom/index.js 59 bytes {0} [built] [469] ./~/react/react.js 56 bytes {0} [built] [470] ./~/regenerator-runtime/runtime.js 24.4 kB {0} [built] [471] multi ./src/index.js 28 bytes {0} [built] [472] ./~/css-loader!./~/sass-loader/lib/loader.js!./~/bootstrap/dist/css/bootstrap-theme.css 23.1 kB [built] [481] ./~/style-loader/addStyles.js 8.51 kB [built] + 468 hidden modules ERROR in ./src/index.js Module not found: Error: Can't resolve './app/App' in '/tmp/build_646d8d781ce9c274343ec9ce9e11f2b4/src' @ ./src/index.js 11:11-31 @ multi ./src/index.js Child html-webpack-plugin for "index.html": [0] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 658 bytes {0} [built] Child extract-text-webpack-plugin: [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built] [1] ./~/css-loader!./~/sass-loader/lib/loader.js!./~/fixed-data-table/dist/fixed-data-table.css 6.27 kB {0} [built] Child extract-text-webpack-plugin: [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built] [1] ./~/css-loader!./~/sass-loader/lib/loader.js!./~/bootstrap/dist/css/bootstrap-theme.css 23.1 kB {0} [built] Child extract-text-webpack-plugin: [0] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.eot 57 bytes {0} [built] [1] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built] [2] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.svg 57 bytes {0} [built] [3] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf 57 bytes {0} [built] [4] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 58 bytes {0} [built] [5] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2 59 bytes {0} [built] [6] ./~/css-loader!./~/sass-loader/lib/loader.js!./~/bootstrap/dist/css/bootstrap.css 121 kB {0} [built] npm ERR! Linux 3.13.0-112-generic npm ERR! argv "/tmp/build_646d8d781ce9c274343ec9ce9e11f2b4/.heroku/node/bin/node" "/tmp/build_646d8d781ce9c274343ec9ce9e11f2b4/.heroku/node/bin/npm" "run" "build" npm ERR! node v6.10.3 npm ERR! npm v3.10.10 npm ERR! code ELIFECYCLE npm ERR! Olamee@0.1.0 build:
webpack -p --config webpack-production.config.jsnpm ERR! Exit status 2
This is the scripts for package.json
"scripts": {
"start": "webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --history-api-fallback",
"build": "webpack -p --config webpack-production.config.js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
It said me, I had a problem in the index.js to load the app component ! But I said, it's okay in my computer and of course in development mode.
My folder structure is like :
src
-app (all the components, reducers, actions etc)
-data (all the style sheet, images, json file etc)
-index.html
-index.js
Thanks for you help !