触发loginToSpotify()时出现TypeError: login不是函数求助

触发loginToSpotify()函数时出现如下错误：

TypeError: _services_login__WEBPACK_IMPORTED_MODULE_0__.login is not a function
    at loginToSpotify (Login.js:6:1)
    at onClick (Login.js:15:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)

相关代码文件：

index.js #

import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

App.js #

import Login from './pages/Login'

const App = () => {
  return (
    <>
      <Login />
    </>
  )
}

export default App

Login.js #

import loginService from '../services/login'

const Login = () => {
  const loginToSpotify = async () => {
    try {
      const response = await loginService.login()
    } catch (err) {
      console.log(err)
    }
  }

  return (
    <>
      <div>
        <button onClick={() => loginToSpotify()}>Login using Spotify</button>
      </div>
    </>
  )
}

export default Login

login.js（services目录下） #

import axios from 'axios'

const login = async () => {
  const response = await axios.post('/login')

  return response.data
}

export default { login }

核心排查点：导入路径正确性 #

首先确认Login.js中../services/login的路径是否准确：

• 若Login.js位于src/pages/Login.js，则../services/login应指向src/services/login.js，检查文件名拼写、大小写（部分系统区分文件名大小写）是否完全匹配，避免因路径错误导致导入的模块不符合预期。

修复方案二选一 #

方案1：改用命名导出/导入

修改services/login.js的导出方式为命名导出：

import axios from 'axios'

export const login = async () => {
  const response = await axios.post('/login')
  return response.data
}

然后在Login.js中改为命名导入并直接调用：

import { login } from '../services/login'

const loginToSpotify = async () => {
  try {
    const response = await login()
  } catch (err) {
    console.log(err)
  }
}

方案2：验证默认导出结构

如果坚持使用默认导出对象，可先在Login.js中打印导入的模块确认结构：

import loginService from '../services/login'
console.log(loginService) // 检查输出是否包含login方法

若输出无login方法，说明路径错误或文件未正确编译，重新核对文件位置后再测试。

内容的提问来源于stack exchange，提问作者smoothlikebutter