MDX - сборник рассказов + реакция + машинопись - PullRequest
Новая
       17

MDX - сборник рассказов + реакция + машинопись

0 голосов
/ 05 февраля 2020

Я пытаюсь использовать разметку MDX при создании живых документов для моей книги рассказов. Когда я запускаю сборник рассказов, я получаю эту ошибку:

Сборка модуля не удалась (из ./node_modules/babel-loader/lib/index.js):

SyntaxError: C:/Users/User/Desktop/priority-style-react/src/stories/Button1.stories.mdx: Unexpected token (12:9)

  10 | const makeShortcode = name => function MDXDefaultShortcode(props) {
  11 |   console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
> 12 |   return <div {...props}/>
     |          ^
  13 | };
  14 | const Preview = makeShortcode("Preview");
  15 | const layoutProps = {

мой конфиг веб-пакета .mdx это: 

config.module.rules.push({
    test: /\.mdx?$/,
    use: [{loader: "babel-loader"}, {loader: '@mdx-js/loader'}],
    exclude: /node_modules/,
    include: [/src/]
});

Конфигурация сборника рассказов. js: 

import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';

import '../style/index.scss';

const req = require.context('../src/stories', true, /.stories.(tsx|mdx)/);

addDecorator(withKnobs);
configure(req, module);

похоже, что загрузчик работает неправильно. Может ли кто-нибудь помочь мне понять, что я пропустил?

Ответы [ 2 ]

1 голос
/ 08 февраля 2020

Хорошо, в файлах MDX есть что-то очень глупое

Он не принимает пустые строки, как мы говорим. 

const makeShortcode = name => function MDXDefaultShortcode(props) {
console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
return <div {...props}/>
 // remove this blank line here.
};

до 

const makeShortcode = name => function MDXDefaultShortcode(props) {
console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
return <div {...props}/>
};

И это должно работать, пока я почесал голову вокруг этого в течение нескольких часов.

0 голосов
/ 10 февраля 2020

Итак, ребята, возможно, этот ответ будет кому-то полезен и сэкономит много драгоценного времени.

Я исправил эту проблему, просто удалив конфигурацию для расширения .mdx в webpack.config.js. Я просто оставил свой конфиг сборника рассказов. js как есть. И проблема исчезла.

Кроме того, вы столкнетесь с этой проблемой, если у вас есть пустые строки между кодом JSX в вашем файле .mdx, как ответил Зунайб Имтиаз.

Удачи, ребята!

...