Exporting functions with reactjs and babel

Question

I have a project using reactjs, which is transpiled by babel. I use the es2015 and react transforms in my .babelrc. I am currently refactoring and in my first pass I basically did export class foo for everything I needed. A lot of these classes should really just be functions, so I am trying to rewrite them as such, but I keep getting the same error. My main application file looks somethings like this:

import React, { Component } from 'react';

import {Foo, Bar} from './components/ui.js';

class Application extends Component {

  constructor(props){
    super(props);
    this.state = {
      object: null
    }
  }

  componentDidMount(){
    // code
  }

  componentDidUpdate(){
    // other code
  }

  render(){
    return(
      <div>
        <Foo />
        <Bar />
      </div>
    )
  }

}

module.exports = Application

And my import from ui.js is like this:

import React, { Component } from 'react';

export class Foo extends Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      // Some JSX
    )      
  }
}


export class Bar extends Component {
  constructor(props){
    super(props);

  }

  render() {
    return (
      // Some other JSX
    )      
  }
}

When I try and change one of these exported classes to a function, for example:

// Note: I have tried a variety of syntax such as function, const, etc...
export var Bar {
  render() {
    return (
      // Some other JSX
    )      
  }
}

I get the following error:

SyntaxError: Unexpected token <line where I declare a function>

I am not sure what I am doing wrong, and my google searches are only coming up with answers to other problems.

score 27 · Accepted Answer · answered Jun 01 '17 at 13:51

27

It's the same as defining the function as a variable but just adding export to the front e.g. (using ES6 syntax)

export const render = () => (
  // Some other JSX
);

or alternatively

export var render = function() {
  return (
    // Some other JSX
  );
};

answered Jun 01 '17 at 13:51

Chris Herring

3,675
3
33
50

You don't have to use ES6 syntax but many examples will use ES6 so it's best to learn the equivalent syntax. – Chris Herring Jun 01 '17 at 21:37
Thank you. Just a note to say this does not work when looking to make a function visible from a class component. The sol'n does not compile: "unexpected token" errors. – Matt Campbell Feb 25 '22 at 20:04

score 7 · Answer 2 · answered May 30 '18 at 08:35

Exporting functions is no different than exporting class. Basic rules must be followed .

Function/Class name should in CAPS
There will be only one "export" line .
Every function return body should have a single tag encompassing other parts. Most commonly used is a tag .
This usually works: import App from "./App"; where App.js is my jsx file. You can do an explicit import too . : import AllApp from "./classhouse.jsx";
Name of the js/jsx file does not matter. It can be anycase (lower, upper).
For returning multiple functions from one file, you need to create one more function , that encompasses all other functions .

See the example below showing multiple functions returned.

import React from 'react';

/* All function / class names HAS TO BE in CAPS */

var App1 = function (){
    return (
        <div>
            <h1>
                Hello World
            </h1>
        </div>
        )
}

var App2 = function (){
    return (
        <div>
        <h1>World Number 2 </h1>
        </div>
           );
}

var AllApp = function (){
    return (
        <div>
            <App1 />
            <App2 />
        </div>
        );
}

export default AllApp;

My index.js file:

import React from 'react';
import ReactDOM from "react-dom";
import AllApp from "./classhouse.jsx"; /* Note: App name has to be in CAPS */
import App from "./App";

const jsx =
<div>
    <AllApp />
    <App />
</div>

ReactDOM.render(jsx, document.getElementById("root"));

At least in JSX, Function / Class / App name must be Capitalized (or PascalCase), not CAPS: https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized SO question on this: https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters — James Daily, Jul 11 '22 at 14:27

vijayscode · Answer 3 · 2017-06-01T13:58:33.847

4

You are writing functional components in wrong way.

function Welcome() {
  return <h1>Hello World</h1>;
}

or

const Welcome = () => {
    return <p>Hello Wrold</p>
}
export default Welcome ;

ES6 doesn't allow export default const. You must declare the constant first then export it.

edited Jun 01 '17 at 13:58

answered Jun 01 '17 at 13:51

vijayscode

1,905
4
21
37

Exporting functions with reactjs and babel

3 Answers3

Linked

Related