CODEWITHSUNDEEP
javascriptreactjswebpack
Vishal Khanna
Vishal Khanna

Reputation: 53

Unable to load ReactJS resource in the browser using Babel and Webpack

I'm trying to learn ReactJS by running a basic program.

webpack.config.js

var config = {
    entry: './main.js',

    output: {
        path: './',
        filename: 'index.js'
    }, 

    devServer: {
        inline: true,
        port: 8080
    }, 

    module: {
        loaders: [
            {
                test: /\.jsx?$/, 
                exclude: /node_modules/,
                loader: 'babel-loader',

                query: {
                    presets: ['es2015', 'react']
                }
            }
            ]
    }
}

module.experts = config;

package.json 

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

App.jsx

import React from 'react';

class App extends React.Component   {
    render()    {
    return  (
    <div>
        "Hello, world."
    </div>
    );
    }
}

export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

index.html

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset="utf-8">
    <title>React App</title>
</head>
<body>
    <div id = "app"></div>
    <script type="text/javascript" src = "index.js"></script>
</body>
</html>

On starting the server, I see an empty page with no contents. The HTML page is there but the part which is to be added to the DOM by React can't be seen.

index.js is set as the file which will contain our bundled app but the browser's console shows 'Faile to load resource index.js(404)' error. If I change the src attribute of script tag in HTML to main.js, I get a SyntaxError with the import statement.

I suspect the problem is with not correctly linking Babel or some other dependency with my package.

Upvotes: 0

Views: 1312

Answers (2)

Stephen Kingsley
Stephen Kingsley

Reputation: 559

I think the webpack.config.jswill be like 

devtool: 'eval',
entry: './src/index',
output: {
  path: path.join(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath: '/static/',
},
module: {
  loaders: [{
    test: /\.js$/,
    loaders: ['babel'],
    exclude: /node_modules/,
    include: __dirname,
  }],
}

and the <script>

<script type="text/javascript" src = "/static/bundle.js"></script>

Upvotes: 0

Oleksandr T.
Oleksandr T.

Reputation: 77482

Inside webpack.config.js there is typo, must be exports instead of experts 

module.exports = config;
          ^

in this case you don't export config from webpack.config.js, and webpack doesn't know about your custom configuration and uses default config.

Upvotes: 1

Related Questions