#Cannot build mantine using webpack 4

2 messages · Page 1 of 1 (latest)

narrow summit
#

Our component library uses webpack 4 to build and ship components. I wanted to integrate mantine's datepicker to our date picker component. The issue is that I cannot do webpack --config config/webpack.config.js anymore.

Please lmk if you need anything else for me to make it more understandable. I can post contents of webpack.config.js if you need.

#

webpack.config.js

  mode: 'production',
  entry : pathTo('src/index.js'),
  output: {
    path: path.resolve(process.cwd(), 'dist'),
    filename: '[name].js',
    library: packageJson.name,
    libraryTarget: 'umd',
    globalObject: "typeof self !== 'undefined' ? self : this"
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: true,
          },
        },
      },
      {
        test: /\.s[ac]ss$/i,
        exclude: /node_modules/,
        use: [
          process.env.NODE_ENV !== 'production'
            ? 'style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(svg|eot|woff|woff2|ttf)$/,
        use: [{
          loader: 'file-loader?name=[name].[ext]'
        }],
      }
    ],
  },
  resolve: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
    },
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new CleanWebpackPlugin(),
    new MinifyPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  stats : {
    colors: true,
    depth: true,
    entrypoints: true,
    logging: 'none'
  },
  externals: Object.keys(packageJson.peerDependencies)
}