CODEWITHSUNDEEP
javascriptreactjs
Joseph
Joseph

Reputation: 692

Webpack is not parsing the jsx file

I have this jsx file. //react code

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return <p> Hello React!</p>;
  }
}

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

and this is my webpack.confg.js file
//webpack config   

module.exports = {
  entry: __dirname + '/assets/app/components/test/test.jsx',
  output: {
    path: __dirname,
    filename: '/assets/app/components/test/test.min.js'
  },
  module: {
    loaders: [
      {
        test: '/\.jsx?/',
        exclude: '/node_modules/',
        loader: 'babel',
        query: {
          presets:['es2015', 'react']
        }
      }
    ]
  }
}

on running the web pack its giving the error as

/assets/app/components/test/test.jsx Module parse failed: /Users/joseph.antony/workspace/sloop/assets/app/components/test/test.jsx Unexpected token (6:11) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (6:11)

Upvotes: 1

Views: 397

Answers (2)

Davin Tryon
Davin Tryon

Reputation: 67336

I'm fairly sure that your issue is due to the regex tests not being expressed correctly:

This:

test: '/\.jsx?/',
exclude: '/node_modules/',

Should be:

test: /\.jsx?/,
exclude: /node_modules/,

Regex literals are not wrapped in strings.

Upvotes: 1

curv
curv

Reputation: 3854

Here is my module config I used for all React projects I create. You will need to npm install the packages I have specified below.

module: {
        loaders: [
            {
                // Only run `.js` and `.jsx` files through Babel
                test: /\.jsx?$/,
                exclude: __dirname + "/node_modules",
                loader: require.resolve("babel-loader"),
                query: {
                    presets: [
                        require.resolve('babel-preset-es2015'),
                        require.resolve('babel-preset-stage-0'),
                        require.resolve('babel-preset-react')
                    ]
                }
            }
        ]
    },

Upvotes: 0

Related Questions