При запуске сервера Styleguidedist происходит сбой при сбое анализа модуля: неожиданный токен - PullRequest
Новая
       39

При запуске сервера Styleguidedist происходит сбой при сбое анализа модуля: неожиданный токен

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

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

enter image description here

Вот мой конфигурационный файл руководства по стилю 

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,
        },
      },
    };
  },
};

Вот мой конфиг вебпак 

var webpack = require('webpack');
var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// const InterpolateHtmlPlugin = require('interpolate-html-plugin');
const WebpackAssetsManifest = require('webpack-manifest-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const reactLoadablePlugin = require('react-loadable/webpack')
  .ReactLoadablePlugin;
const workboxPlugin = require('workbox-webpack-plugin');

module.exports = (env) => ({
  mode: 'development',
  entry: path.join(__dirname, '../../index.js'),
  output: {
    filename: '[name].bundle.[hash].js',
    chunkFilename: '[name].bundle.[hash].js',
    path: path.join(__dirname, '../../../build'),
    publicPath: '/'
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          // cacheGroupKey here is `commons` as the key of the cacheGroup
          name(module, chunks, cacheGroupKey) {
            const moduleFileName = module
              .identifier()
              .split('/')
              .reduceRight(item => item);
            const allChunksNames = chunks.map(item => item.name).join('~');
            return `${cacheGroupKey}-${allChunksNames}-${moduleFileName}`;
          },
          chunks: 'all'
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        loader: 'babel-loader'
      },
      {
        test: /\.svg(\?.*)?$/, // match img.svg and img.svg?param=value
        use: [
          'url-loader', // or file-loader or svg-url-loader
          'svg-transform-loader'
        ]
      },
      {
        test: /\.png(\?.*)?$/, // match img.svg and img.svg?param=value
        use: [
          'url-loader', // or file-loader or svg-url-loader
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              javascriptEnabled: true
            }
          }
        ]
      },
      {
        test: /\.(sa|sc|c)ss$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: [
          'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  plugins: [
    new webpack.EnvironmentPlugin({
      APP_ENVIRONMENT: process.env.APP_ENVIRONMENT,
      API_KEY: process.env.API_KEY,
      AUTH_DOMAIN: process.AUTH_DOMAIN,
      DB_URL: process.env.DB_URL,
      PROJECT_ID: process.env.PROJECT_ID
    }),
    new CleanWebpackPlugin({
      path: path.join(__dirname, '../../../build')
    }),
    new WebpackAssetsManifest({
      fileName: 'asset-manifest.json'
    }),
    new HtmlWebpackPlugin({
      title: '<<app>>',
      template: 'main.html',
      minify: {
        collapseWhitespace: false,
        removeComments: true,
        useShortDoctype: false
      }
    }),
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css'
    }),
    new CopyPlugin([
      {
        from: 'public',
        to: 'public'
      }
    ]),
    new ProgressBarPlugin({
      format: '  build [:bar] ' + ':percent' + ' (:elapsed seconds)' + ' :msg'
    }),
    new reactLoadablePlugin({
      filename: './react-loadable.json'
    }),
    new workboxPlugin.InjectManifest({
      swSrc: path.join(__dirname, '../../public/service-worker.js')
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, '/'),
    filename: 'main.html',
    compress: true,
    port: 3000,
    historyApiFallback: true,
    disableHostCheck: true,
    useLocalIp: true,
    host: '0.0.0.0'
  },
  devtool: 'eval-source-map'
});

1 Ответ

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

Проблема была с файлом веб-пакета. Я экспортировал конфигурации веб-пакета как функцию. Ранее: 

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

Вместо того, чтобы экспортировать все как функцию, я экспортировал его как

Теперь: 

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

Но кто-то может сказать мне, почему предыдущая реализация не работала

...