CODEWITHSUNDEEP
reactjsapinpmnpm-start
Xavier
Xavier

Reputation: 21

import error: 'unsplash-js' does not contain a default export (imported as 'Unsplash')

Below is my code snippet:

import React, { useState } from "react";
import Unsplash, { toJson } from "unsplash-js";
const unsplash = new Unsplash({
    accessKey: "****",
    secret:"****"
  });
export default function SearchPhotos() {
  const [query, setQuery] = useState("");
  console.log(query);
  const searchPhotos = async (e) => {
    e.preventDefault();
    unsplash.search
    .photos(query)
    .then(toJson)
    .then((json) => {
      console.log(json);
    });
    console.log("Submitting the Form")
  };

I m getting this error in React Application Attempted import error: 'unsplash-js' does not contain a default export (imported as 'Unsplash'). I have checked in helper function but didn't still facing the import error for Unsplash and toJson.

Upvotes: 2

Views: 1226

Answers (4)

CHIRAG JORASIA
CHIRAG JORASIA

Reputation: 11

This one worked for me

import { createApi } from 'unsplash-js';

const unsplash = createApi({ accessKey: 'YOUR_ACCESS_KEY' });

unsplash.search.getPhotos({
  query: query
}).then(result=>{console.log(result)})

Upvotes: 1

Burak Kartaloğlu
Burak Kartaloğlu

Reputation: 1

Use this one:

import { createApi } from 'unsplash-js';

// on your node server
const serverApi = createApi({
  accessKey: 'MY_ACCESS_KEY',
  //...other fetch options
});

// in the browser
const browserApi = createApi({
  apiUrl: 'https://mywebsite.com/unsplash-proxy',
  //...other fetch options
});

And for the fetch part use like this way:

 unsplash.search.getPhotos({
        query: query
    }).then(result=>{console.log(result)})

For more info visit: https://www.npmjs.com/package/unsplash-js

Upvotes: 0

Surya
Surya

Reputation: 67

I hope you are using latest version of unsplash, try installing older version of upslash with the following command

npm install [email protected]

As there are lot changes made in new version of unsplash-js

Upvotes: 1

Partha Roy
Partha Roy

Reputation: 1621

Well you can use the official package with your access tokens,

Here's a working code,

import fetch from 'node-fetch';
global.fetch = fetch;
import Unsplash, {
    toJson
} from 'unsplash-js';
const ACCESS_KEY = 'YOUR_TOKEN';

const unsplash = new Unsplash({
    accessKey: ACCESS_KEY,
    headers: {
        "X-Custom-Header": "foo"
    },
    timeout: 5000
});

const getSearchedImagesFromUnsplash = async (searchTerm) => {

    let user = Meteor.user();

        try {
            let response = await unsplash.search.photos(searchTerm, 1, 50).then(res => res.json());
            return response;
        } catch (e) {
            console.log('error\n', e);
        }

}
//Get the images
getSearchedImagesFromUnsplash('Nature')

Upvotes: 0

Related Questions