0

Using axios to handle server requests with a React app i'm building, but the error in my title keeps being thrown, even though the module is clearly in my package.json file. I have also tried uninstalling using npm and re-installing, however it can't find axios. Am I requiring it incorrectly? I have searched for the answer for a number of days but can't find any help. Any info on what's wrong/ what I'm doing wrong would be really appreciated. Thanks in advance.

*Server file

const express = require("express");
const app = express();
const compression = require("compression");
const db = require("./db/db");
const cookieParser = require("cookie-parser");
const cookieSession = require("cookie-session");
const bodyParser = require("body-parser");
const bc = require("./db/bcrypt");
const csurf = require("csurf");
const path = require("path");
const fs = require("fs");

app.use(cookieParser());

app.use(
  cookieSession({
    secret: `Not the real secret I would use normally`,
    maxAge: 1000 * 60 * 60 * 24 * 14
  })
);

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.use(express.static("public"));

app.use(compression());

if (process.env.NODE_ENV != "production") {
  app.use(
    "/bundle.js",
    require("http-proxy-middleware")({
      target: "http://localhost:8081/"
    })
  );
} else {
  app.use("/bundle.js", (req, res) => res.sendFile(`${__dirname}/bundle.js`));
}

const diskStorage = multer.diskStorage({
  destination: function(req, file, callback) {
    callback(null, __dirname + "/uploads");
  },
  filename: function(req, file, callback) {
    uidSafe(24).then(function(uid) {
      callback(null, uid + path.extname(file.originalname));
    });
  }
});

const uploader = multer({
  storage: diskStorage,
  limits: {
    fileSize: 2097152
  }
});
app.get("*", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.listen(8080, function() {
  console.log("I'm listening.");
});

*start.js file

import React from "react";
import ReactDOM from "react-dom";
import axios from "/axios";
import App from "./App";

let component;

component = <App />;

ReactDOM.render(component, document.querySelector("main"));

*App.js file

import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";
import axios from "/axios";
import Navbar from "./navbar";
import Beers from "./beers";
import Facts from "./facts";

class App extends Component {
  constructor() {
    super();
    this.state = {};
  }
  componentDidMount() {}
  render() {
    return (
      <BrowserRouter>
        <div id="app">
          <Navbar />
          <Route eaxct path="./beers" component={Beers} />
          <Route exact path="./facts" component={Facts} />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

package.json dependencies

"dependencies": {
        "axios": "^0.18.0",
        "babel-cli": "^6.18.0",
        "babel-core": "^6.20.0",
        "babel-loader": "^6.2.9",
        "babel-plugin-transform-async-to-generator": "^6.24.1",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "babel-polyfill": "^6.26.0",
        "babel-preset-es2015": "^6.18.0",
        "babel-preset-latest": "^6.16.0",
        "babel-preset-react": "^6.16.0",
        "bcryptjs": "^2.4.3",
        "body-parser": "^1.15.2",
        "compression": "^1.7.0",
        "cookie-parser": "^1.4.3",
        "cookie-session": "^2.0.0-alpha.2",
        "csurf": "^1.9.0",
        "express": "^4.14.0",
        "http-proxy-middleware": "^0.17.4",
        "knox": "^0.9.2",
        "multer": "^1.3.0",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-redux": "^5.0.5",
        "react-router": "^4.2.0",
        "react-router-dom": "^4.2.2",
        "redux": "^3.7.1",
        "redux-devtools-extension": "^2.13.2",
        "redux-promise": "^0.5.3",
        "socket.io": "^2.0.3",
        "spiced-pg": "^1.0.0",
        "uid-safe": "^2.1.4",
        "webpack": "^1.14.0",
        "webpack-dev-middleware": "^1.8.4"
    },
1
  • 1
    try import axios from 'axios'; instead of import axios from "/axios"; Commented Oct 29, 2018 at 9:07

1 Answer 1

2

try to import axios like this :

import axios from 'axios'

without the "/"

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

2 Comments

Wow. Do I feel like an idiot. Thanks a million Christophe
It happens to the best of us. ¯_(ツ)_/¯

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.