使用npm安装项目依赖后，docz里的PlayGround组件渲染就会报语法错误，用cnpm和yarn都是没问题的

[Symboler]

SyntaxError: Unexpected token (1:7) 1 : (<React.Fragment>

[wuomzfx]

+1

[quicksand-1]

@sorrycc
我也遇到了这个问题了。我在使用 travis-ci 进行部署后(npm 安装)，发现了这个语法报错。

[ttys026]

可能是 npm 依赖上提不正确导致的，属于 npm 的 bug
see
npm/cli#152

https://npm.community/t/packages-with-peerdependencies-are-incorrectly-hoisted/4794

[wuomzfx]

我这边是升级eslint后OK的

[MyCupOfTeaOo]

我也遇到了这个问题,,还在看怎么解决

[WangJM001]

+1
楼主有没有解决

[MyCupOfTeaOo]

+1
楼主有没有解决

我先用直接用docz呢

[MyCupOfTeaOo]

+1
楼主有没有解决

我先用直接用docz呢

doczrc.js 配置

import { css } from 'docz-plugin-css';

export default {
  typescript: true,
  menu: ['Getting Started', 'components', 'Form Component', 'hooks'],
  theme: 'docz-theme-ztopia',
  themeConfig: {
    colors: {
      blackLight: '#242635', // sidebar background (dark), table header background (dark), preview handle background (dark), <blockquote> background, <code> background
      black: '#151725', // page background (dark)
      blackDark: '#0e1019', // text
      whiteLight: '#fcfcfd', // text
      white: '#ffffff', // page background (light)
      whiteDark: '#f5f7f9', // sidebar background (light), table header background (light), preview handle background (light), <blockquote> background, <code> background
      grey: '#d1d4db', // table border, preview border, preview handle bars
      primaryLight: '#d9eaff', // sidebar menu item (hovered)
      primary: '#40a9ff', // brand background, link, thematic break, preview error type, props table property name, <h1>, <blockquote> border left, search result
      primaryDark: '#0046a3', // link (hovered)
      secondary: '#595959', // props table shape type, brand background, <hr>, search result
      highlight: '#fa8c16', // matched search query
      error: 'rgba(200,0,0,0.8)', // preview error background
    },
    fonts: {
      body:
        '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif',
      title:
        '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif',
    },
    logo: {
      src: null,
      width: 40,
    },
  },
  plugins: [
    css({
      preprocessor: 'postcss',
    }),
    css({
      preprocessor: 'sass',
    }),
    css({
      preprocessor: 'less',
      loaderOpts: {
        javascriptEnabled: true,
      },
    }),
  ],
  filterComponents: files =>
    files.filter(filepath => /[w-]*.(js|jsx|ts|tsx)$/.test(filepath)),
  modifyBabelRc: babelrc => {
    // 需放 class-properties 前面
    babelrc.plugins.unshift([
      require.resolve('@babel/plugin-proposal-decorators'),
      { legacy: true },
    ]);

    return babelrc;
  },
};

[WangJM001]

+1
楼主有没有解决

我先用直接用docz呢

doczrc.js 配置

import { css } from 'docz-plugin-css';

export default {
  typescript: true,
  menu: ['Getting Started', 'components', 'Form Component', 'hooks'],
  theme: 'docz-theme-ztopia',
  themeConfig: {
    colors: {
      blackLight: '#242635', // sidebar background (dark), table header background (dark), preview handle background (dark), <blockquote> background, <code> background
      black: '#151725', // page background (dark)
      blackDark: '#0e1019', // text
      whiteLight: '#fcfcfd', // text
      white: '#ffffff', // page background (light)
      whiteDark: '#f5f7f9', // sidebar background (light), table header background (light), preview handle background (light), <blockquote> background, <code> background
      grey: '#d1d4db', // table border, preview border, preview handle bars
      primaryLight: '#d9eaff', // sidebar menu item (hovered)
      primary: '#40a9ff', // brand background, link, thematic break, preview error type, props table property name, <h1>, <blockquote> border left, search result
      primaryDark: '#0046a3', // link (hovered)
      secondary: '#595959', // props table shape type, brand background, <hr>, search result
      highlight: '#fa8c16', // matched search query
      error: 'rgba(200,0,0,0.8)', // preview error background
    },
    fonts: {
      body:
        '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif',
      title:
        '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif',
    },
    logo: {
      src: null,
      width: 40,
    },
  },
  plugins: [
    css({
      preprocessor: 'postcss',
    }),
    css({
      preprocessor: 'sass',
    }),
    css({
      preprocessor: 'less',
      loaderOpts: {
        javascriptEnabled: true,
      },
    }),
  ],
  filterComponents: files =>
    files.filter(filepath => /[w-]*.(js|jsx|ts|tsx)$/.test(filepath)),
  modifyBabelRc: babelrc => {
    // 需放 class-properties 前面
    babelrc.plugins.unshift([
      require.resolve('@babel/plugin-proposal-decorators'),
      { legacy: true },
    ]);

    return babelrc;
  },
};

感谢分享

[ohhoney1]

+1
可能和用了 eslint 相关的依赖包有关系
明天有空再测试自己的项目

[ohhoney1]

+1
可能和用了 eslint 相关的依赖包有关系
明天有空再测试自己的项目

重装了 eslint 及其相关依赖包，问题解决了。

[PeachScript]

推荐使用 dumi + father-build 进行组件库研发：https://d.umijs.org/guide/getting-started