Module parse failed in native

Question

I want to see my app on the webpage so what do I do? I followed this link https://github.com/simonqian/react-helloworld But I didn't get an answer? So pls provide some links to solve the issue

After I started the npm using npm start I faced this type of error? How to resolve this?

This is my web.config.js file. My configuration file will be in the root directory

'use strict';

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: 'E:/react/webnative/main.js',

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

  devServer: {
    inline: false,
    port: 7777,
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: ['pug-loader?self'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
    loaders: [
      {
        test: /\.jsx?$/,
        //exclude:/(node_modules|bower_components)/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          cacheDirectory: true,
          presets: ['es2015', 'react'],
        },
      },
    ],
  },
  plugins: [new UglifyJSPlugin()],
};

Does your app.jsx file have to be .jsx? The error is clearly stating that it cannot read that file type — ShaneG, Dec 19 '17 at 11:56
import React from 'react'; import ReactDOM from 'react-dom'; This is my main.js fileimport App from './App.jsx'; ReactDOM.render(, document.getElementById('app') ); — Jeyasri .R, Dec 19 '17 at 12:03
This is my App.jsx import React from 'react'; class App extends React.Component { render() { return (
hello world!!!
); } } export default App; — Jeyasri .R, Dec 19 '17 at 12:04
Please see my answer below if you want to use .jsx file extension. If you dont, save that file as .js and change it inside in main also — ShaneG, Dec 19 '17 at 12:10

score 0 · Answer 1 · answered Dec 19 '17 at 12:03

0

Your web pack config should look something like this to read .jsx files:

module.exports = {
  entry: './app/assets/frontend/myFile.jsx',
  output: {
    path: __dirname + '/app/assets/javascripts',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
   loaders: [{
     test: /\.jsx?$/,
     loader: 'babel',
     exclude: /node_modules/,
     query: {
       cacheDirectory: true,
       presets: ['react', 'es2015']
     }
   }]
 }
}

Or just dont use jsx. Hope this Helps!

answered Dec 19 '17 at 12:03

ShaneG

1,498
7
16

'use strict'; module.exports = { entry: 'E:/react/webnative/main.js', output: { filename: 'index.js' }, devServer: { inline : false, port: 7777 }, resolve :{ extensions : ['.js','.jsx'] }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { cacheDirectory : true, presets: ["es2015", "react"] } } ] }, – Jeyasri .R Dec 19 '17 at 12:23
@Jeyasri.R What is this? What are you telling me here? A bit of context would be lovely – ShaneG Dec 19 '17 at 12:32
sorry for the delay respone . I would like to do run my native app on Web-browser , so what I do ? I followed this link https://github.com/simonqian/react-helloworld – Jeyasri .R Dec 19 '17 at 16:33
@Jeyasri.R As i mentioned in my answer, your webpack.config.js file is wrong. From looking at that github page you need to add this: resolve: { extensions: ['', '.js', '.jsx'] }, into your webpack.config.js file – ShaneG Dec 19 '17 at 16:37
yes I added Still it shows error . I refered more link but i cant resolve the problem @ShaneG – Jeyasri .R Dec 20 '17 at 04:27

Module parse failed in native

1 Answers1