フルスタックチャンネル
サインアップサインアップ
ログインログイン
利用規約プライバシーポリシーお問い合わせ
Copyright © All rights reserved | FullStackChannel
解決済
TypeError: middleware is not a function Django REST Framework + NextJS + Stripeサブスク有料会員
Next.js
kao
2023/12/18 19:26

楽しく拝聴・拝読させていただいています。
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
}
'''

自分で試したこと

  • NextJsのバージョンが(インストールver14.0.4)をver11に下げられるか

→https://github.com/vercel/next.js/discussions/35794 より下げられないと判断しました。

  • createStoreに取り消し線がついており 'createStore' is deprecated. のメッセージが出ていたので、import文を以下のように変更した。
    変更前
    '''import { createStore, applyMiddleware } from 'redux' '''
    変更後
    ''' import { legacy_createStore as createStore } from 'redux';
    import { applyMiddleware } from 'redux''''

→変わらずエラーが表示された。

補足情報

画面に表示されるエラー内容

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)

回答 4件
login
回答するにはログインが必要です
はる@講師
1年以上前

ご質問ありがとうございます。
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でチュートリアルを作っていなかったので、最新のバージョンで作ってみようかと思います。
最新のバージョンで動かしたい場合は、少々お待ち頂いても宜しいでしょうか。

kao
1年以上前

お返事ありがとうございます。
無事問題のエラーが発生しなくなり、Chapter 16まで問題実施できること確認しました。

また最新のverのチュートリアルができることを楽しみに待っております。


すみません、途中で画面遷移してしまい、書いていた文章がきえてしまったのであまりきれいに書けていないのですが発生したエラー等をどなたかの参考にメモっておきます。

-- create-next-appコマンドを実行したあとに、package.jsonの中身を手動で変更して頂いてnpm install

上記実行に際し、さまざまなエラーが発生したのですが、nodeのversionを14.0.0にしたところ安定しました。(nodeのverは高すぎても低すぎてもエラーが発生しverを上げるか下げるかの対応を求められたりcreate-next-appが実行できなくなった。)

  • Module not found: Can't resolve '@/styles/globals.css' 等のエラー
    上記のエラーはそのまま無視して教材を進めても問題なしでしたが@を取り除いて解消できます。(他にもいくつか@マークでエラーになった)
    またその後でるModule not found: Can't resolve 'next/font/google' のエラーでは直しかたが不明のため対象箇所をコメントアウトすると
    npm run devでnext jsの画面が表示される。
1
はる@講師
1年以上前

ありがとうございます。
エラーが解決されたようで良かったです。
Next.js11では、@は使えないと思うので、パスを指定しないといけないですね。

最新バージョンの「Next.js14+Django5.0」のチュートリアルは来週中には公開しますので、よろしくお願いします。

1
はる@講師
1年以上前

最新バージョンのNext.js14とDjango5を使用した認証システム構築チュートリアルを公開しました。
https://zenn.dev/hathle/books/next-drf-auth-book

ぜひ参考にしてください。

次は、ブログシステムのチュートリアルを作成していきます。