skleeschulte / tailored-semantic-ui-react-bundles-with-webpack Goto Github PK

ERROR in ./src/index.js
Module build failed: TypeError: Cannot read property 'key' of undefined
    at /Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/babel-plugin-transform-semantic-ui-react-imports/index.js:234:33
    at Array.filter (native)
    at PluginPass.pre (/Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/babel-plugin-transform-semantic-ui-react-imports/index.js:233:54)
    at transformFile (/Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/@babel/core/lib/transformation/index.js:97:25)
    at runSync (/Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/@babel/core/lib/transformation/index.js:35:3)
    at transformSync (/Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/@babel/core/lib/transform-sync.js:15:38)
    at Object.transform (/Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/@babel/core/lib/transform.js:20:65)
    at transpile (/Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/babel-loader/lib/index.js:55:20)
    at Object.module.exports (/Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/babel-loader/lib/index.js:179:20)
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8081 ./src/index.js

// was this:
const lodashPlugins = state.opts.plugins.filter(function(plugin) {
    return plugin[0].key === 'lodash' || plugin[0].key === 'babel-plugin-lodash';
});

// i changed to this:
const lodashPlugins = state.opts.plugins.filter(function(plugin) {
    const key = plugin.key || (plugin[0] && plugin[0].key);
    return key === 'lodash' || key === 'babel-plugin-lodash';
});

    config.module.rules.push(

          // Loader configuration for JavaScript files
          {
              test: /\.js$/i,
              exclude: /[/\\]node_modules[/\\]/,
              loader: 'babel-loader'
          },

          // Loader configurations for semantic-ui-less
          {
              // Load .less files from semantic-ui-less module folder
              test: /\.less$/i,
              include: /[/\\]node_modules[/\\]semantic-ui-less[/\\]/,
              use: ExtractTextPlugin.extract({
                  use: [
                      // Set importLoaders to 2, because there are two more loaders in the chain (postcss-loader
                      // and semantic-ui-less-module-loader), which shall be used when loading @import resources
                      // in CSS files:
                      {
                          loader: 'css-loader',
                          options: {
                              importLoaders: 2,
                              sourceMap: true,
                              minimize: true
                          }
                      },
                      { loader: 'postcss-loader', options: { sourceMap: true } },
                      {
                          loader: 'semantic-ui-less-module-loader',
                          options: {
                              siteFolder: path.resolve(context, 'semantic-ui-theme/site'),
                              themeConfigPath: path.resolve(context, 'semantic-ui-theme/theme.config'),
                          }
                      }
                  ]
              })
          },
          {
              // Load .png files from semantic-ui-less folder
              test: /\.png$/i,
              include: /[/\\]node_modules[/\\]semantic-ui-less[/\\]/,
              loader: 'file-loader',
              // Use publicPath ../, because this will be used in css files, and to reference an image from the images
              // folder in a css file in the styles folder the relative path is ../images/image-file.ext
              options: { name: 'images/[name].[hash].[ext]', publicPath: '../' }
          },

          // Loader configuration for font files
          {
              test: /\.(woff2?|[ot]tf|eot|svg)$/i,
              loader: 'file-loader',
              // Use publicPath ../, because this will be used in css files, and to reference a font from the fonts
              // folder in a css file in the styles folder the relative path is ../fonts/font-file.ext
              options: { name: 'fonts/[name].[hash].[ext]', publicPath: '../' }
          }
    )

    config.plugins = config.plugins || []
    // config.plugins.push(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en/))
    // config.plugins.push(new BundleAnalyzerPlugin())
    config.plugins.push(new webpack.EnvironmentPlugin(['NODE_ENV']))
    config.plugins.push(new ExtractTextPlugin({
        filename: 'styles/[name].[contenthash].css'
    }))
    // config.plugins.push(new webpack.optimize.CommonsChunkPlugin({
    //             name: 'manifest',
    //             minChunks: Infinity
    //         }))
    return config
}