after add component link error: Uncaught SyntaxError: Unexpected token export

Question

i create test react project. Add modules and my packege.json look like:

    {
  "name": "untitled",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-preset-node5": "^12.0.1",
    "react-scripts": "0.9.5"
  },
  "dependencies": {
    "babel-preset-stage-0": "^6.22.0",
    "history": "^4.6.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-native": "^0.42.3",
    "react-router": "^4.0.0",
    "react-router-config": "^1.0.0-beta.1",
    "react-router-dom": "^4.0.0",
    "react-router-native": "^4.0.0",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "build": "babel input.js -o compiled.js"
  }
}

and webpack.config.js

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

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

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

    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', "node5", "stage-1", 'react', "stage-0"]
                }
            }
        ]
    }
};

module.exports = config;

in my component i import component Link from react-router-native and after this adding react show error 'Uncaught SyntaxError: Unexpected token export' but if i delete this string project work well. it's not the only component in the module, i can add any components like Promt, Route or Router. Why it's not work with Link?

This is code where error reproduced

import React from 'react';
import { Route, Router } from 'react-router';
import { Promt } from 'react-router';
import { Link } from 'react-router-native';

import logo from '../../logo.svg';
import './App.css';

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

The word export doesn't appear anywhere in the code you posted. The error is somewhere else. Doesn't the error message have a filename and line number in it? — Barmar
Can you please share the relevant piece of source code where the error occurs? — TimoStaudinger
what is the full filename of the file containing the export ? (file extension included) — pizzarob

pizzarob pizzarob · Accepted Answer · 2017-03-23T22:01:47

You need to update the regular expression for the test value in your web pack config to be test: /(\.js|\.jsx)$/

Right now you are telling webpack to only run .js files through babel loader, but you aren't telling it to also run .jsx files through babel loader.

after add component link error: Uncaught SyntaxError: Unexpected token export

1 Answers