質問編集履歴
2
環境や試したことなどをより具体的にしてタイトルを修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Next.jsでmdx-js/reactを使ってMDXを読み込もうとするとTypeErrorが発生する
|
|
1
|
+
Next.jsでmdx-js/reactを使ってMDXを読み込もうとするとTypeErrorが発生するのですがどなたかご教示お願いできますでしょうか。
|
test
CHANGED
|
@@ -6,7 +6,25 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
+
### 環境
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
OS : macOS Bigsur
|
|
14
|
+
|
|
15
|
+
node : 16.3
|
|
16
|
+
|
|
17
|
+
React : 17.0.2
|
|
18
|
+
|
|
19
|
+
Next : 12.0.7
|
|
20
|
+
|
|
21
|
+
パッケージにはnpmを使用しています。
|
|
22
|
+
|
|
23
|
+
また、Dockerは使用しておりません。
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
9
|
-
### 設定
|
|
27
|
+
### 設定
|
|
10
28
|
|
|
11
29
|
|
|
12
30
|
|
|
@@ -184,6 +202,10 @@
|
|
|
184
202
|
|
|
185
203
|
|
|
186
204
|
|
|
205
|
+
### コード
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
187
209
|
_app.tsx
|
|
188
210
|
|
|
189
211
|
```_app.tsx
|
|
@@ -311,3 +333,15 @@
|
|
|
311
333
|
23 | <p>{`段落`}</p>
|
|
312
334
|
|
|
313
335
|
```
|
|
336
|
+
|
|
337
|
+
|
|
338
|
+
|
|
339
|
+
## 試したこと
|
|
340
|
+
|
|
341
|
+
|
|
342
|
+
|
|
343
|
+
1.エラー文で調べる
|
|
344
|
+
|
|
345
|
+
2.ライブラリの再インストール
|
|
346
|
+
|
|
347
|
+
3.まっさらなプロジェクトでのテスト
|
1
タイトルの修正と、_app.tsxの記載
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Next.jsでmdx-js/reactを使ってMDXを読み込もうとするとTypeErrorが発生する
|
|
1
|
+
Next.jsでmdx-js/reactを使ってMDXを読み込もうとするとTypeErrorが発生することに困っています
|
test
CHANGED
|
@@ -184,6 +184,60 @@
|
|
|
184
184
|
|
|
185
185
|
|
|
186
186
|
|
|
187
|
+
_app.tsx
|
|
188
|
+
|
|
189
|
+
```_app.tsx
|
|
190
|
+
|
|
191
|
+
import { AppProps } from 'next/app'
|
|
192
|
+
|
|
193
|
+
import Head from 'next/head'
|
|
194
|
+
|
|
195
|
+
import 'styles/globals.scss'
|
|
196
|
+
|
|
197
|
+
import { MDXProvider} from '@mdx-js/react'
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
const App = ({ Component, pageProps }: AppProps) => (
|
|
204
|
+
|
|
205
|
+
<>
|
|
206
|
+
|
|
207
|
+
<Head>
|
|
208
|
+
|
|
209
|
+
<meta
|
|
210
|
+
|
|
211
|
+
name="viewport"
|
|
212
|
+
|
|
213
|
+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
|
214
|
+
|
|
215
|
+
/>
|
|
216
|
+
|
|
217
|
+
{/* <link rel="shortcut icon" href="/favicon.png" key="shortcutIcon" /> */}
|
|
218
|
+
|
|
219
|
+
{/* <link rel="manifest" href="/manifest.json" /> */}
|
|
220
|
+
|
|
221
|
+
</Head>
|
|
222
|
+
|
|
223
|
+
<MDXProvider>
|
|
224
|
+
|
|
225
|
+
<Component {...pageProps} />
|
|
226
|
+
|
|
227
|
+
</MDXProvider>
|
|
228
|
+
|
|
229
|
+
</>
|
|
230
|
+
|
|
231
|
+
)
|
|
232
|
+
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
export default App
|
|
236
|
+
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
|
|
187
241
|
sample.tsx
|
|
188
242
|
|
|
189
243
|
```sample.tsx
|
|
@@ -194,11 +248,11 @@
|
|
|
194
248
|
|
|
195
249
|
import Layout from 'components/Layout';
|
|
196
250
|
|
|
197
|
-
import MD from '
|
|
251
|
+
import MD from '~/test1_md.mdx';
|
|
198
252
|
|
|
199
253
|
import { Article, Button } from 'components/Layout_parts';
|
|
200
254
|
|
|
201
|
-
import Article_styles from '/style
|
|
255
|
+
import Article_styles from '~/style.module.scss';
|
|
202
256
|
|
|
203
257
|
|
|
204
258
|
|