楽しく拝聴・拝読させていただいています。
Django + NextJS + Stripeサブスク有料会員サイト構築チュートリアル1(アカウント認証編) にてTypeError: middleware is not a function が発生し、抜け出せずにおります。stackoverflowなどネット情報を手当たり次第試してみましたが、解決に至らずご質問させていただきました。
TypeError: middleware is not a functionの解消
TypeError: middleware is not a function
store.js
'''
import { useMemo } from 'react'
import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunkMiddleware from 'redux-thunk'
import reducers from './reducers'
let store
function initStore(initialState) {
return createStore(reducers, initialState, composeWithDevTools(applyMiddleware(thunkMiddleware)))
}
export const initializeStore = (preloadedState) => {
let _store = store ?? initStore(preloadedState)
if (preloadedState && store) {
_store = initStore({
...store.getState(),
...preloadedState,
})
store = undefined
}
if (typeof window === 'undefined') return _store
if (!store) store = _store
return _store
}
export function useStore(initialState) {
const store = useMemo(() => initializeStore(initialState), [initialState])
return store
}
'''
→https://github.com/vercel/next.js/discussions/35794 より下げられないと判断しました。
→変わらずエラーが表示された。
画面に表示されるエラー内容
Server Error
TypeError: middleware is not a function
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
store.js (10:21) @ reducers
8 |
9 | function initStore(initialState) {
10 | return createStore(reducers, initialState, composeWithDevTools(applyMiddleware(thunkMiddleware)))
| ^
11 | }
12 |
13 | export const initializeStore = (preloadedState) => {
Call Stack
initStore
store.js (14:24)
initializeStore
store.js (31:30)
useStore
store.js (31:24)
ご質問ありがとうございます。
Next.js13から大幅にコードの書き方が変わってしまったので、こちらのチュートリアルを実施する場合は、チュートリアルのバージョンに合わせて頂く必要があります。
create-next-appコマンドを実行したあとに、package.jsonの中身を手動で変更して頂いてnpm installをすると、チュートリアルと同じバージョンで構築することが可能になります。
https://github.com/haruyasu/nextjs-membership-tutorial/blob/main/package.json
最近はNext.jsとDjango Rest Frameworkでチュートリアルを作っていなかったので、最新のバージョンで作ってみようかと思います。
最新のバージョンで動かしたい場合は、少々お待ち頂いても宜しいでしょうか。
お返事ありがとうございます。
無事問題のエラーが発生しなくなり、Chapter 16まで問題実施できること確認しました。
また最新のverのチュートリアルができることを楽しみに待っております。
すみません、途中で画面遷移してしまい、書いていた文章がきえてしまったのであまりきれいに書けていないのですが発生したエラー等をどなたかの参考にメモっておきます。
-- create-next-appコマンドを実行したあとに、package.jsonの中身を手動で変更して頂いてnpm install
上記実行に際し、さまざまなエラーが発生したのですが、nodeのversionを14.0.0にしたところ安定しました。(nodeのverは高すぎても低すぎてもエラーが発生しverを上げるか下げるかの対応を求められたりcreate-next-appが実行できなくなった。)
ありがとうございます。
エラーが解決されたようで良かったです。
Next.js11では、@は使えないと思うので、パスを指定しないといけないですね。
最新バージョンの「Next.js14+Django5.0」のチュートリアルは来週中には公開しますので、よろしくお願いします。
最新バージョンのNext.js14とDjango5を使用した認証システム構築チュートリアルを公開しました。
https://zenn.dev/hathle/books/next-drf-auth-book
ぜひ参考にしてください。
次は、ブログシステムのチュートリアルを作成していきます。