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

user_6575797 0
Viewed 903

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.

npm-start npm reactjs api
4 Answers

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

npm install unsplash-js@6.0.0

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

user_111186390

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)})
user_118510670

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')
user_57887890

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

user_155652110
Related