Twitter API Question posted in
The official Twitter API documentation can be found here.

How can I combine express and react? – Twitter API

I’m getting an error with the twitter npm module when I run my react project using webpack with webpack-dev-server.

The error is: 

*ERROR in ./~/twitter/~/request/~/har-validator/lib/schemas/timings.json
Module parse failed: /Users/peterkaminski/react-test/node_modules/twitter/node_modules/request/node_modules/har-validator/lib/schemas/timings.json Unexpected token (2:12)*

And I’m only getting it when I require twitter. My current project setup uses webpack and babel.

A solution I’ve tried coming up with is to just set up an express server to handle all my API calls while I render all the frontend with React. I’ve tried finding several tutorials for how to incorporate express with React, but none of them have been very clear.

What’s the best way to set up a project so you can include various node modules without getting these kinds of errors, and how do you go about running React with Express?

Tags:

2

Answers


  1. 0

    It seems your loader including node_modules and the library you are using have a JSON file which webpack is not able to bundle because you are missing json-loader
    Install json-loader with npm install json-loader and configure your webpack to handle json files.

    By the way you should exclude node_modules if you don’t need to bundle
    it.

    Login or Signup to reply.
  2. 0

    Here is an example set up that allows you to get to developing (npm package and webpack included )

    1. package.json

      {
  "name": "mvp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon server/server.js",
    "test": "echo "Error: no test specified" && exit 1",
    "webpack": "webpack --watch"
  },

  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.6.4",
    "axios": "^0.16.2",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "body-parser": "^1.17.2",
    "bootstrap": "^4.0.0-alpha.6",
    "cors": "^2.8.3",
    "dotenv": "^4.0.0",
    "express": "^4.15.3",
    "lodash": "^4.17.4",
    "morgan": "^1.8.2",
    "pg": "^6.2.4",
    "react": "^15.6.0",
    "react-bootstrap": "^0.31.0",
    "react-dom": "^15.6.0",
    "react-transition-group": "^1.2.0",
    "reactstrap": "^4.6.2",
    "sequelize": "^4.0.0",
    "webpack": "^2.6.1"
  },
  "devDependencies": {
    "nodemon": "^1.11.0"
  }
}

    2. webpack.config

      //this is a code 
const path = require('path');

const SRC_DIR = path.resolve(__dirname, 'react-client/src');
const BUILD_DIR = path.resolve(__dirname, 'react-client');

module.exports = {
  entry: path.resolve(SRC_DIR, 'index.js'),
  output: {
    filename: 'bundle.js',
    path: BUILD_DIR
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: [/node_modules/],
        use: [{
          loader: 'babel-loader',
          options: { presets: ['es2015', 'react'] }
        }],
      }
    ]
  }
}

    3. example server.js setup 

      const express = require('express');
const bodyParser = require('body-parser');
const morgan = require('morgan')
const port = 8000
const db = require('../database/config.js')
const todoListRouter = require('./router/todoList.router')
const cors = require('cors')
const app = express()

app.use(express.static('react-client'))
   .use(bodyParser.json())
   .use(bodyParser.urlencoded({extended:true}))
   .use(morgan('dev'))
   .use('/api', todoListRouter)

app.all('*', function(req, res, next){
    res.header("Access-Control-Allow-Origin", "x")
    res.header("Access-Control-Allow-Headers","X-Request-With");
    next();
})

app.listen(port, 'localhost', ()=>{
    console.log("server running on port :" + port);
})

    4. given your react index.js, this is an example of importing what you need

      import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'
import NavBar from '../src/components/navbar'
import ToDo from '../src/components/todo'
import ToDoBuilder from '../src/components/todobuilder'
import ToDoList from '../src/components/todolist'
import ToDosWithSameUser from '../src/components/todowithsameuser'
....//your component here
ReactDOM.render(<App />, document.getElementById('app'));

    in short, look at the entry point in webpack.config.js, you can see that it looks at ‘react-client/src’ and find index.js.

    to run the script, simply do
    npm start,
    npm run webpack

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search