Unexpected token Module build failed: SyntaxError

Question

1: https://github.com/FaridSafi/react-native-gifted-messenger on web. I able to resolved previous problem

Now i stuck in new problem, i'm not able to port react-native-parsed-text . Error i found on terminal window is

 [684] ./~/react-native-communications/AKCommunications.js 5.16 kB {0} [built]

ERROR in ./~/react-native-parsed-text/src/ParsedText.js
Module build failed: SyntaxError: /Users/Gaurav/WebWork/ReactWeb/Practise/react-native-web-exploding-hearts-master/node_modules/react-native-parsed-text/src/ParsedText.js: Unexpected token (23:21)
  21 | class ParsedText extends React.Component {
  22 | 
> 23 |   static displayName = 'ParsedText';
     |                      ^
  24 | 
  25 |   static propTypes = {
  26 |     ...React.Text.propTypes,

My web config is,

'use strict';

var path = require('path');
var webpack = require('webpack');
var HtmlPlugin = require('webpack-html-plugin');
var HasteResolverPlugin = require('haste-resolver-webpack-plugin');

var IP = '0.0.0.0';
var PORT = 3000;
var NODE_ENV = process.env.NODE_ENV;
var ROOT_PATH = path.resolve(__dirname, '..');
var PROD = 'production';
var DEV = 'development';
let isProd = NODE_ENV === 'production';

var config = {
  paths: {
    src: path.join(ROOT_PATH, '.'),
    index: path.join(ROOT_PATH, 'index.ios'),
  },
};

module.exports = {
  ip: IP,
  port: PORT,
  devtool: 'source-map',
  resolve: {
    alias: {
      'react-native': 'react-web',
      'ReactNativeART': 'react-art',
    },
    extensions: ['', '.js', '.jsx'],
  },
  entry: isProd? [
    config.paths.index
  ]: [
    'webpack-dev-server/client?http://' + IP + ':' + PORT,
    'webpack/hot/only-dev-server',
    config.paths.index,
  ],
  output: {
    path: path.join(__dirname, 'output'),
    filename: 'bundle.js'
  },
  plugins: [
    new HasteResolverPlugin({
      platform: 'web',
      nodeModules: ['react-web']
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(isProd? PROD: DEV),
      }
    }),
    isProd? new webpack.ProvidePlugin({
      React: "react"
    }): new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlPlugin(),
  ],
  module: {
    loaders: [{
      test: /\.json$/,
      loader: 'json'
    }, {
      test: /\.jsx?$/,
      loaders: ['react-hot','babel?stage=1'],
      include: [config.paths.src],
      exclude: ['/node_modules/', '/node_modules/react-native-gifted-messenger']
    },]
  }
};

And my ParseText code is ,

import React from 'react-native';

import TextExtraction from './lib/TextExtraction';

const PATTERNS = {
  url: /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&\/\/=]*)/,
  phone: /[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}/,
  email: /\S+@\S+\.\S+/,
};

const defaultParseShape = React.PropTypes.shape({
  ...React.Text.propTypes,
  type: React.PropTypes.oneOf(Object.keys(PATTERNS)).isRequired,
});

const customParseShape = React.PropTypes.shape({
  ...React.Text.propTypes,
  pattern: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(RegExp)]).isRequired,
});

class ParsedText extends React.Component {

  static displayName = 'ParsedText';

  static propTypes = {
    ...React.Text.propTypes,
    parse: React.PropTypes.arrayOf(
      React.PropTypes.oneOfType([defaultParseShape, customParseShape]),
    ),
  };

You need to enable class properties through Babel for that syntax to work. It's not standard ES6. — Juho Vepsäläinen
– Juho Vepsäläinen, Commented May 10, 2016 at 14:16
It looks like you're using an old version of babel-loader (which depends on babel < 6) because you've got 'babel?stage=1'. If you're actually using a newer version then that 'stage' query param won't be doing anything, in which case you need to define your presets in a .babelrc file. — Richard Scarrott
– Richard Scarrott, Commented May 10, 2016 at 19:01
@bebraw ,riscarrott, Thanks for your contribution. Answer given by BANANENMANNFRAU worked properly on mac platform but it failed and same issue giving me on windows os platform. — Tirth
– Tirth, Commented May 13, 2016 at 7:59

b-m-f · Accepted Answer · 2016-05-10 14:02:08Z

1

The static keyword is only for methods in ES6.

Try using const to declare the variable.

Source

answered May 10, 2016 at 14:02

b-m-f

1,3382 gold badges13 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tirth Over a year ago

thanks for your reply. Your solution worked in mac osx but it fail in windows os platform.

b-m-f Over a year ago

That seems unlikely. Are you sure everything is set up correctly on your windows machine? Do you get the exact same error message?

Collectives™ on Stack Overflow

Unexpected token Module build failed: SyntaxError

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related