I am creating a reactjs app and everything works fine on localhost. Things gets really problematic when I deployed the app to the hosting service.
I Have a ./reducers folder in my project which contains all of my reducers.
the project structure is this:
App
---reducers
---store.js
now the problem is that webpack is unable to solve the import reducers from './reducers' on my store.js
here is my full store.code:
import {applyMiddleware, createStore} from 'redux';
import logger from 'redux-logger';
import thunk from 'redux-thunk';
import promise from 'redux-promise-middleware';
import reducer from './reducers';
const middleware = applyMiddleware(promise(), thunk, logger())
export default createStore(reducer, middleware)
and here is my webpack config:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './main.js',
output:{
path: __dirname,
filename: 'index.js',
publicPath: '/'
},
devServer:{
inline: true,
port: 1515,
historyApiFallback: true
},
module:{
loaders:[
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:{
presets: ['react', 'es2015'],
plugins: ['react-html-attrs', 'transform-object-rest-spread']
}
}
]
}
}
and here's the error from my hosting server:
I'm really sorry for the ultra long post, I've been googling around and haven't found an answer that i can understand..deploying reactjs app and webpack is something new for me
Okay so after trying to digest every information that I got regarding this matter, I finally understand on how to deploy webpack project..
As mentioned by #JoeClay, I Should just deploy the final build from Webpack which is contrary to what I did. What I did is that I uploaded the whole project file into the hosting server and tried to run the webpack from there. I treated the production phase just like the local development phase which is not right.
After looking for so many information on the net on how to build a Webpack project I finally realized that this whole time I've got the build file with me.
If we look back into my Webpack.config.js
module.exports = {
entry: './main.js',
output:{
path: __dirname,
filename: 'index.js',
publicPath: '/'
},
devServer:{
inline: true,
port: 1515,
historyApiFallback: true
},
module:{
loaders:[
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:{
presets: ['react', 'es2015'],
plugins: ['react-html-attrs', 'transform-object-rest-spread']
}
}
]
}
}
We can see that in the output I have a filename of 'index.js' and every time I did things like npm start, It produces the 'index.js' on the directory. So it's always been there, I've just never paid much attention to it.
What I did next is easy, I go to my hosting server and upload my Index.html along with my CSS, JS and 'index.js' file and voila! It Works!
But there is one problem that I haven't solve..Somehow after I Uploaded the file, inside my index.html file the <script src="index.js"></script> got commented out..I'd be so grateful if someone could give me an insight on this.
Hopefully this thread can help newbie webpack users like me and can help them deploy to hosting other than heroku or digitalocean. And thanks everyone who has spend their time answering my question
The problem is your reducers import is not found. You need to check your path relative to where your store is located.
Related
I have a very simple tutorial project that I built which consists of no more than 100-200 lines of code.
When I build this project with webpack I end up with a bundle.js file which is being flagged as being above the recommended size of a bundle.js file. I find this unsettling because I know that my code is very small. How is it that with only using a few things like vuex, vue.js and a few node modules ending up with such an oversized bundle.js?
I understand that it packages everything up for us, but I find it hard to believe that with such a small project webpack would be unable to get it down to a much smaller size. I am concerned that this might have something to do with the sheer number of node modules I have in that project root directory.
So my question is this: does the webpack build depend at all on what node-modules are in my directory under the /node_modules/ folder? If not, then how have I already exceeded the recommended size for a bundle.js with my first ever vue project?
This brings me to another question which I have been very unsure of: Is it normal for vue to copy over almost my entire node_modules directory from my root user directory? When I watch tutorials, the "vue create My_App" command seems to finish executing in no more than 10-20 seconds, but when I run the command it can take minutes. When I was wondering what it could be I saw that it copied hundreds and hundreds of node_modules over... is that entirely necessary? Is there a configuration or setting I should have set or changed that I missed?
Thank you all for any insight you might be willing to offer, big or small.
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/'
},
mode: 'development',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
// this will apply to both plain `.js` files
// AND `<script>` blocks in `.vue` files
{
test: /\.js$/,
loader: 'babel-loader'
},
// this will apply to both plain `.css` files
// AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin(),
],
optimization: {
minimizer: [new UglifyJsPlugin()],
},
};
Use tools like https://nx.dev/
You can find video here https://youtu.be/mVKMse-gFBI
I have looked at all the documentation of deploy a react app to GitHub pages and none of it has worked or is applicable. This is driving me up the wall, when Webpack is involved, but I am trying to master Webpack here.
So, I did not originally have a dist folder for my project.
Then I learned you have to put your files in a dist folder and push to gh-pages. Well, in my GitHub repo, I do not have that option the way the GitHub docs say I do. My only options are master and /docs.
This is a React 15 app with Redux and Webpack 2.
I am getting a blank browser here:
https://ldco2016.github.io/JSFaddle/
It failed to load resource of bundle.js and style.css and I do not know why. I have yet to have any luck deploying to GitHub pages.
I tweaked my webpack to include a dist folder, but nothing is being built into it, the folder is empty.
webpack.config.js:
const path = require('path');
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel'
}]
},
resolve: {
root: path.resolve(__dirname, 'src'),
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
I believe this is the root of my problem, but webpack is still a bit of a mystery to me because of the myriad of configurations you can do.
This continues to be a good working app in my local environment, but there is something I am not understanding in the deployment process.
To be clear, I did not previously have a dist directory when developing locally and after I created a dist directory, none of my static assets were being dumped there.
For hosting on GitHub pages you will have to server index.html of built react-app.
So your gh-pages/master should have index.html at the root and not within some folder named as dist.
Your bundle.js is not getting generated because webpack config is incorrect. You are not specifying resource type for babel-loader to process.
Please use the below config which I have corrected and tested on my local.
const path = require('path');
module.exports = {
entry: [
'./src/index.js'
],
output: {
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}]
},
resolve: {
root: path.resolve(__dirname, 'src'),
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
I'm still fairly new to webpack 2 but I've got most of my configurations working so far. The only thing I'm having some difficulty understanding is that when I run "npm run build" to bundle my files into my "dist" folder I noticed that only 1 of my images are being bundled. I'm using 'file-loader'. FYI all my images still show on my dev-server when I run it and appear under the public paths I assigned. It's only my local output that's not displaying all the images. Anyone know what's going on?
My Folder Structure
webpack.config.js
module.exports = {
mode: "development",
entry: {
app: "app"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
publicPath: "/"
},
devServer: {
publicPath: '/',
port: 3000
},
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
publicPath: 'images/'
}
}
]
}
]
}
}
As you can see in my folder structure, it always builds with only one of my images being outputted. It's not a major issue (I don't think) since all the images still work when I run the app, but I would appreciate it if anyone could help me understand why only one image is outputting to my local 'dist'. Thank you.
Webpack only writes images to disk that you require. This is one of the benefits of Webpack, it only includes assets that your application needs, so Webpack will guarantee those images exist when you deploy.
To add more images to your output, require them either from your Javascript or CSS with url()s
Note that if you're using the dev server, Webpack doesn't write anything to disk, and keeps all compiled assets in memory.
I am developing an app in React.
Until now I have just included
<script src='//unpkg.com/react#15/dist/react.min.js'>
<script src='//unpkg.com/react-dom#15/dist/react-dom.min.js'>
<script src='//unpkg.com/babel-standalone#6/babel.min.js'>
and then I neither had to use
import React from 'react';
import ReactDOM from 'react-dom';
since everything was loaded nor had to compile anything since babel compiled it in real-time.
However, when I want to include third-party libraries installed with npm, it seems I have to use import. For instance, if I install react-dates with npm-install react-dates --save and want to include it with
import { DateRangePicker, SingleDatePicker, DayPickerRangeController } from 'react-dates';
I get the error
Uncaught ReferenceError: require is not defined
I guess it's because I don't use RequireJS, Webpack, Gulp or anything.
What is the preferred way to be able to include components while developing, so I don't have to compile my code everytime I did a small change?
You can use webpack to configure your code, and run it in watch mode or use
webpack-dev-server during development so, that will allow you to compile your code automatically any time you do a small change
Your webpack.config.js should look something like
var debug=process.env.NODE_ENV !== "production";
var path=require("path");
var webpack=require("webpack");
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/index.js",
module: {
rules: [{
test: /\.jsx?$/,
exclude: [/node_modules/],
use: [{
loader: "babel-loader",
options: {presets: ["stage-0","es2015","react"]}
}]
}]
},
output: {
path: __dirname + "/src",
filename: "bundle.js"
},
plugins: debug? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({mangle: false, sourcemap: false})
]
}
And in your package.json, you can define scripts
"scripts": {
"start": "webpack-dev-server --content-base src",
"build": "webpack --watch"
}
If you run a npm run build command webpack will start in watch mode and you won't need to recompile your code again and again.
or you can run npm start for using webpack-dev-server in development mode.
See how to set up webpack here
I want to move code that I reuse over and over again into separate "node_modules", hosted on github (because I don't want to pay for private npm repositories). I use webpack with babel to transpile my javascript.
So, I moved TheFile.js to a new git repository, and added my_user_name/TheFileModule to my package.json file, so it installs as a node module directly from github.
Now, in my code I replace:
import '../original/path/to/my/local/file/TheFile.js'
with:
import 'TheFileModule'
and have TheFile.js set as the main value in TheFileModule's package.json
If I try to build this with webpack, I get a import keyword not found error indicating webpack is not transpiling TheFileModule.
However if I use:
import 'TheFileModule/TheFile.js'
Everything transpiles fine.
Here's the pertinent section of my webpack.config:
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel-loader'],
include: [
/LocalDirectoryWhereAllMyCodeLives/,
/TheFileModule/
]
},
{test: /\.json$/, loader: 'json'},
],