0

我试图启动我的风格指南服务器，但它不断抛出以下错误：我相信当 babel 加载器没有为 jsx 文件配置时会发生这种情况。但这不是真的，因为我能够毫无错误地开始我的项目。但是当我尝试启动样式指南时，我最终得到了这个。

在此处输入图像描述

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

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

这是我的 webpack 配置

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'
});
4

1 回答 1

1

问题出在我将 webpack 配置导出为函数的 webpack 文件上。早些时候：

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

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

现在：

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

但是有人可以告诉我为什么早期的实现不起作用吗？

于 2020-02-29T15:06:55.780 回答