在启动Styleguidedist服务器时,它失败,模块解析失败:意外的令牌

时间:2020-02-29 14:52:33

标签: reactjs webpack react-styleguidist

我正在尝试启动我的样式指南服务器,但它不断抛出以下错误: 我相信在未为jsx文件配置babel加载程序时会发生这种情况。但这不是真的,因为我能够毫无错误地启动我的项目。但是,当我尝试启动样式指南时,我最终会得到这个。

enter image description here

这是我的样式指南配置文件

    import axios from 'axios';

    const loadmore = () => {

      const el = document.querySelector('#classes-filter');

      if (el) {

        el.addEventListener('change', e => {
          e.preventDefault();

          let formData = new FormData();

          formData.append('action', 'class_type_filter');
          formData.append('security', WP.security);

          // Axios POST request
          axios({
            method: 'POST',
            url: WP.ajax,
            data: formData,
          })
            // handle success
            .then(function (response) {
              console.log(response.data);
              console.log(response.status);
              document.getElementById("response").innerHTML = response.data;
              WP.current_page++;
            },
              (error) => {
                console.log(error);
              });

        });

      }

    };

    export default loadmore;

这是我的webpack配置

module.exports = {
  title: 'Component Library',
  webpackConfig: Object.assign(
    {},
    require("./config/webpack/webpack.dev.config.js"),
    {
      /* Custom config options if required */
    }
  ),
  components: "source/components/**/*.jsx",
  template: {
    head: {
      links: [
        {
          rel: "stylesheet",
          href:
            "https://fonts.googleapis.com/css?family=Poppins:400,400i,600,600i,700,700i&display=swap"
        }
      ]
    }
  },
  theme: {
    fontFamily: {
      base: '"Poppins", sans-serif'
    }
  },
  styles: function styles(theme) {
    return {
      Playground: {
        preview: {
          backgroundColor: '#29292e'
        },
      },
      Code: {
        code: {
          fontSize: 14,
        },
      },
    };
  },
};

1 个答案:

答案 0 :(得分:0)

问题出在我将webpack配置导出为功能的webpack文件中。 以前:

module.exports = (env) => ({
  ....your webpack configurations
})

我没有将所有内容导出为函数,而是将其导出为

现在:

module.exports = {
  ....your webpack configurations
}

但是有人可以告诉我为什么早期的实施无法奏效吗?