React.js - Cannot import simple variable from one file into another

Question

I can't figure out how to import a extremely simple variable from one file into another (new to react). I have the main App.js where line 3 appears to be the problem:

import React, {Component} from "react";
import NavMenu from "./components/nav-menu";
import navLinks from "/components/nav-links";

export default class App extends Component {
  constructor() {
    super();

    this.state = {
      navLinks: navLinks
    }
  }

  render() {
    return (
      <div id="container">
        <NavMenu navLinks={this.state.navLinks} />
      </div>
    );
  } 
}

Which just imports (or should import) the navLinks variable from this nav-links.js file:

import React from 'react';

export const navLinks = [
    {
      name: "home",
      href: "/"
    },
    {
      name: "subs",
      href: "/subs"
    }
  ];

Can someone point me in the right direction of where I'm going wrong here? Also, it's being used to just render a navigation menu (so links within a tags) - is this generally the right way to go about adding nav links?

Stackblitz: https://stackblitz.com/edit/react-j42gep

Shubham Verma · Accepted Answer · 2020-08-30 09:49:55Z

1

If you are doing this:

export const navLinks = [
    {
      name: "home",
      href: "/"
    },
    {
      name: "subs",
      href: "/subs"
    }
  ];

then you are importing it wrong. Then do this:

import {navLinks} from "./components/nav-links";

Note this: ./components/nav-links you forgot ./ in import statement

If you dont want to use {} the add default statement in your export like this:

const navLinks = [
    {
      name: "home",
      href: "/"
    },
    {
      name: "subs",
      href: "/subs"
    }
  ];

  export default navLinks;

answered Aug 30, 2020 at 9:49

Shubham Verma

5,0641 gold badge12 silver badges23 bronze badges

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

Comments

Boussadjra Brahim · Accepted Answer · 2020-08-30 09:54:10Z

1

You're missing to export the nav links as default :

import React from 'react';

 const navLinks = [
    {
      name: "home",
      href: "/"
    },
    {
      name: "subs",
      href: "/subs"
    }
  ];

  export default navLinks;

and add dot . in import navLinks from "./components/nav-links";

edited Aug 30, 2020 at 9:54

answered Aug 30, 2020 at 9:42

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

2 Comments

user8758206 Over a year ago

still not working with this error: Module not found: You attempted to import /components/nav-links which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Boussadjra Brahim Over a year ago

you're missing also . in import navLinks from "./components/nav-links";

Collectives™ on Stack Overflow

React.js - Cannot import simple variable from one file into another

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related