[SOLVED] How to import a string into my .tsx file from module with a relative reference?

How to import a string into my .tsx file from module with a relative reference?

I make a online course for building a website with StencilJS, NodeJS and the IonicFramwork. I am new in this and I am biting my teeth with a problem:

They import the API "https://swapi.dev/api" as a string into the file app-people.tsx with

import { API_URL } from '../../helpers/api';

I know it is an import of a module with a relative reference. But I don't get API_URL imported! Visual Studio shows me only the error:

Cannot find module '../../helpers/api' or its corresponding type declarations.

Where do I need to create the folders '../../helpers/api'?

What must the file with API_URL contain? What file type must be used(.ts, .js, .d.ts)?

This is my code in app-people.tsx:

import { Component, State, h, ComponentDidLoad} from '@stencil/core';
import { API_URL } from '../../helpers/api';                           // to import the Basic-API

//...

@Component({
  tag: 'app-people',
  styleUrl: 'app-people.css',
})

export class AppPeople implements ComponentDidLoad {

  @State() people: Person[] = [];
  @State() loading = true;

  private apiUrl = `${API_URL}/people`;                              // here is API_URL used:
//...

From my root folder star-wars to app-people.tsx is this path:

star-wars/src/components/app-people/app-people.tsx

I have already tried many combinations but can't come to a solution. Please for tips here!

Solution

Based on the path ../../helpers/api and that your component is located in star-wars/src/components/app-people, then you need to create a TS file star-wars/src/helpers/api.ts which would contain the following:

export const API_URL = 'https://swapi.dev/api';

The import path is relative to the location of the file with the import statement.