Closed2024/04/24にクローズ3

Next.js App routerで困ったことメモ

Next.js

App Router

Kai

「JSX コンポーネントとして使用することはできません。ts(2786)」エラー

解決方法

typescriptのエラーぽかったので、typescriptを最新にしたらエラーが解決した。

yarn add typescript@latest

もう一度同じエラーが違う原因で起きた

'Box' を JSX コンポーネントとして使用することはできません。
  Its type 'OverridableComponent<BoxTypeMap<{}, "div", Theme>>' is not a valid JSX element type.
    型 'OverridableComponent<BoxTypeMap<{}, "div", Theme>>' を型 '(props: any, deprecatedLegacyContext?: any) => ReactNode' に割り当てることはできません。
      型 'Element | null' を型 'ReactNode' に割り当てることはできません。

解決方法

この記事が非常に参考になった。

Kai

MUIのスタイルが当たらない

MUIのテンプレートのmaterioをapp routerに移行しようとしているが、app routerの方でButton等にスタイルが当たらない

Kai

react-perfect-scrollbarのstyle.cssをimportする際のエラー

./node_modules/react-perfect-scrollbar/dist/css/styles.css
Module parse failed: Unexpected token (4:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  * Container style
|  */
> .ps {
|   overflow: hidden !important;
|   overflow-anchor: none;

Import trace for requested module:
./node_modules/react-perfect-scrollbar/dist/css/styles.css

原因

muiのテンプレートmaterioで、webpackを設定していたが、それによって上書きされてしまっていたことが原因だったらしい。

解決方法

まず、次のモジュールを追加して、

yarn add style-loader css-loader

next.config.jsに次のものを追加した。

next.config.js

webpack: (config) => {
+   config.module.rules.push({
+     test: /\.css$/,
+     use: ['style-loader', 'css-loader'],
+     include: [/react-perfect-scrollbar/], // react-perfect-scrollbarのCSSのみ対象
+   });
    return config;
},

このスクラップは2024/04/24にクローズされました