0

I have been trying to follow a couple of tutorials to install webpack so i can get more customized packages loaded into my react app.

this is my package json file

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "dependencies": {
    "babel": "^6.23.0",
    "css-loader": "^0.28.5",
    "file-loader": "^0.11.2",
    "gh-pages": "^1.0.0",
    "html-webpack-plugin": "^2.30.1",
    "path": "^0.12.7",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.11",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "web-dev-server": "^1.1.1",
    "webpack": "^3.5.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "webpack",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "npm run build&&gh-pages -d build"
  },
  "homepage": "https://jdiperi88.github.io",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  }
}

this is my webpack.config file 

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      { 
        test: /\.css$/, 
        loader: "style-loader!css-loader" 
      },
      { 
        test: /\.png$/, 
        loader: "url-loader?limit=100000" 
      },
      { 
        test: /\.jpg$/, 
        loader: "file-loader" 
      }

    ]
  },
};

here is my .babelrc

/* 
    ./.babelrc
*/  
{
    "presets":[
        "es2015", "react"
    ]
}

This is a screenshot of my file structure and error messages. enter image description here

extension of the top screenshot enter image description here

Basically I have been trying to build a portfolio and css is being rendered quite different in each browser. It is even being rendered different within the same browser when I deploy it on github pages and when I run it on the local host. So any css solutions to remedy this problem would also be much appreciated.

jdip88
  • 427
  • 2
  • 9
  • 23

1 Answers1

1

The message "error Command failed with exit code 2" is just telling you that something went wrong when the command (webpack) was running.

In the output above that message, there are 4 'real' error messages.

The first three error messages say that your App.js file is trying to import files that don't exist.

The last error says that Webpack doesn't know what to do with a .tff file. As that message suggests, you'll need another loader to handle .tff files. You need to add { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' } to your loader config. See this issue for more info.

Sidney
  • 4,495
  • 2
  • 18
  • 30
  • I added that line and it worked for the tff error, but those 3 component files exist. So i dont understand why that error is coming up. They are all imported into app.js. How would I go about solving that issue? – jdip88 Aug 23 '17 at 03:48
  • The `App.js` file is certainly importing them, but webpack is saying those files don't exist. Check the `src` folder (which is where webpack thinks they should be). – Sidney Aug 23 '17 at 03:50
  • yeah, but when i do yarn start, those three components render and the site works. The three components are in the ./src/components/(Header,Footer,Index) and app.js is in the './src'. This is what I am confused about. Appreciate the help btw. – jdip88 Aug 23 '17 at 03:55
  • Do the files have `.js` at the end of their name? Very strange that it semi-works. Is the Github repo public? – Sidney Aug 23 '17 at 04:01
  • it was jsx at the end of those three components smh. Appreciate the help! – jdip88 Aug 23 '17 at 04:22
  • I'm happy to help! – Sidney Aug 23 '17 at 04:24
  • Do you happen to know how to make it render the app? When i build the webpack and it produces the bundle.js, it doesnt actually run the bundle.js, it brings me to the root directory when i go to localhost:8080 and i can see a variety of folders that were included in the webpack. First time trying to use this thing, so a bit of a noob. – jdip88 Aug 23 '17 at 04:40
  • You'll want to run that bundle file in an HTML page. There's a Webpack plugin that can generate HTML files for you: [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin). Or just manually make an HTML file and link to the bundle with a ` – Sidney Aug 23 '17 at 05:15