import statements fail on react

Question

I'm learning React, and I have a php project set up like this:

In the head of index.php I load:

<script type="text/javascript" src="js/libs/react.js"></script> <script type="text/javascript" src="js/libs/react-dom.js"></script> <script type="text/javascript" src="js/libs/browser.min.js"></script>

and at the bottom:

<script type="text/babel" src="jsx/index.jsx"></script> <script> window.onload=function(){ site.init(); }</script> </script>

I'm not doing any transpiling. Everything runs fine on Apache+Firefox.

Then I wanted to add some transitions, like images fading in and out when clicking a button instead of just switching. So I:

1- downloaded react transition from here: https://github.com/reactjs/react-transition-group

2- added the content of its src folder to js, which now looks like this:

js/ ../<some vanilla.js files> ../libs/ ../libs/react.js ../libs/react-dom.js ../libs/browser.min.js ../libs/react-transition-group/ ......./react-transition-group/index.js ......./react-transition-group/CSSTransitionGroup.js ......./react-transition-group/CSSTransitionGroup.js ......./react-transition-group/TransitionGroup.js

3- loaded index.js like this:

Now, on Chrome, I get this error when I run the site:

index.js:1 Uncaught SyntaxError: Unexpected token import

On Firefox:

SyntaxError: import declarations may only appear at top level of a module index.js:1

Any idea about what am I missing?

Thanks

The browser doesn't know anything about import, require(), etc. suggested reading: blog.andrewray.me/webpack-when-to-use-and-why — Andy Ray
– Andy Ray, Commented Apr 15, 2017 at 17:01

dejakob · Accepted Answer · 2017-04-15 15:36:04Z

1

to use import, you should not use the babel polyfill, but transpile the code with babel. Therefore, it's highly encouraged to use webpack in your react project with a babel plugin.

This blog might help you further with setting up a react/webpack/babel project: https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel

answered Apr 15, 2017 at 15:36

dejakob

2,11215 silver badges22 bronze badges

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

2 Comments

JimYang Over a year ago

@Andy Ray, @dejakob Thanks for the links. Actually I haven't used import anywhere around, neither needed any kind of transpiling to get the react site running ok (before adding transitions); import is used in the very first line of the react transition library's index.js, which I expected to run out of the box. Does this mean that I have no other option than adding a intermediate step for transpiling while developing? As in modify code->transpile->check in browser vs modify code->check in browser?

dejakob Over a year ago

In most front end projects some kind of transpiling is used to support ES6 and other features. With a correct watch setup and sourcemaps, it's not such a hassle IMO.

JimYang · Accepted Answer · 2017-04-17 11:25:43Z

As Andy Ray stated here http://blog.andrewray.me/webpack-when-to-use-and-why, it looks like I was doing things the old way; the wheel has been reinvented and the php-webpacker-of-sorts I use seems to start to lag behind.

It seems that I was unfortunately lucky to use a set of libraries that posed no conflict when imported just as <script src=library.js>, and react-transition dispelled that illusion. Following dejakob advice, I've integrated transpiling in the process and, at least for the moment, things seem to work seamlessly again.

Thanks

Collectives™ on Stack Overflow

import statements fail on react

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related