Unexpected token import

[valeadami]

Hi, I ve just dowloaded this example from github. Run the npm install --save in a new folder. I 've just started the application and got into this error:

"/Users/admin/Documents/xxx/react/react-chat-window-master/src/index.js:1 (function (exports, require, module, filename, dirname) { import React, {Component} from 'react'; ^^^^^^ SyntaxError: Unexpected token import"

Do I need to change something? I am very new to React and I just need to try a working example to get started. I need a web chat, only the UI. Thakns for your attention

[dharness]

It sounds like you're not using a bundler. Can you share more of the project structure?

[valeadami]

Sure! This is the structure:

[dharness]

Ah - you are looking to use this in your project, right - not develop this library?

What I'd recommend to get started with a really simple project that uses this library is:

npm install -g create-react-app
create-react-app valeadamis_app
cd valeadamis_app
npm install --save react-chat-window

[valeadami]

yes, exactly, i need to use this project in order to evaluate react and integrate it in my express web app. Thanks for the suggestion!

[valeadami]

Hi @dharness, got the create-react-app, it works! Now I downloaded the react-chat-window from npm, it is now in the modules folder (is that correct?). How do I make it as the main project? I'd like to see the chat window as soon as I hit localhost:3000. Thanks againg

[heatherbooker]

Hi @valeadami! Yes, when you npm install something without the -g, it should go in your node_modules.

From here, when you created the react app, it should have suggested that you run npm start. If you do that and then look at localhost:3000 in your browser, it has a link to learn React - I think it would help you to go through some of the tutorials at that site! :)

To short cut, you should basically be able to:

• copy the code from the Example section of the readme
• paste it in to src/App.js, removing the line that duplicates the imports from 'react'
• replace messageHistory with an empty array [] (that's a bug in the example, oops)
• fix the path to import the Launcher from react-chat-window instead of ../../src (another bug)

Then, if you see the line

class Demo extends Component {

--> That means you can make this "Demo" appear by adding <Demo /> to the render function of the App component. Try adding it in a few different places and see what works. It will show up as a little chat bubble that you need to click on to open the chat window.

Good luck!

[valeadami]

thanks @heatherbooker it works,at last! Point 4 was the critical one for me. Thanks for your help