Weird prop-types error started popping roughly 7 days ago

[mrchief]

Nothing has changed on my end code-wise, but I started getting this error during webpack build roughly 7 days ago.

ERROR in main.d9eb1ec8.js from UglifyJs
Unexpected token: punc (,) [./node_modules/styled-system/src/prop-types.js:116,0][main.d9eb1ec8.js:75669,7]

If I disable uglifyJS, I get this error in browser:

Uncaught TypeError: PropTypes.oneOfType is not a function
    at eval (VM1737 prop-types.js:3)
    at Object../node_modules/styled-system/src/prop-types.js (VM60 main.js:19478)
    at __webpack_require__ (VM60 main.js:678)
    at fn (VM60 main.js:88)
    at eval (VM1736 prop-types.js:3)
    at Object../node_modules/styled-system/dist/prop-types.js (VM60 main.js:19349)
    at __webpack_require__ (VM60 main.js:678)
    at fn (VM60 main.js:88)
    at eval (VM1709 index.js:34)
    at Object../node_modules/styled-system/dist/index.js (VM60 main.js:19323)
(anonymous) @ VM1737 prop-types.js:3
./node_modules/styled-system/src/prop-types.js @ VM60 main.js:19478
__webpack_require__ @ VM60 main.js:678
fn @ VM60 main.js:88
(anonymous) @ VM1736 prop-types.js:3
./node_modules/styled-system/dist/prop-types.js @ VM60 main.js:19349
__webpack_require__ @ VM60 main.js:678
fn @ VM60 main.js:88
(anonymous) @ VM1709 index.js:34
./node_modules/styled-system/dist/index.js @ VM60 main.js:19323
__webpack_require__ @ VM60 main.js:678
fn @ VM60 main.js:88
(anonymous) @ VM1550 Box.js:16
./node_modules/grid-styled/dist/Box.js @ VM60 main.js:5829
__webpack_require__ @ VM60 main.js:678
fn @ VM60 main.js:88
(anonymous) @ VM1549 index.js:7
./node_modules/grid-styled/dist/index.js @ VM60 main.js:5920
__webpack_require__ @ VM60 main.js:678
fn @ VM60 main.js:88
(anonymous) @ VM1548 index.js:11
./src/components/ActionList/index.js @ VM60 main.js:22239
__webpack_require__ @ VM60 main.js:678
fn @ VM60 main.js:88
(anonymous) @ VM1547 index.js:24
./src/containers/Home/index.js @ VM60 main.js:22691
__webpack_require__ @ VM60 main.js:678
fn @ VM60 main.js:88
(anonymous) @ VM1542 routes.js:11
./src/routes.js @ VM60 main.js:22992
__webpack_require__ @ VM60 main.js:678
fn @ VM60 main.js:88
(anonymous) @ VM1519 index.js:25
./src/containers/App/index.js @ VM60 main.js:22641
__webpack_require__ @ VM60 main.js:678
fn @ VM60 main.js:88
renderApp @ VM591 client.js:45
(anonymous) @ VM591 client.js:87
(anonymous) @ VM591 client.js:109
./src/client.js @ VM60 main.js:22201
__webpack_require__ @ VM60 main.js:678
fn @ VM60 main.js:88
0 @ VM60 main.js:23032
__webpack_require__ @ VM60 main.js:678
(anonymous) @ VM60 main.js:724
(anonymous) @ VM60 main.js:727

Digging, I find this change made 7 days aggo: styled-system/styled-system@975d9fa#diff-fc1ee4ce413fadea319293ee9bcba6aaR9

My webpack config which hasn't changed during this time:

'use strict'; // eslint-disable-line

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const StyleLintPlugin = require('stylelint-webpack-plugin')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const { CSSModules, vendor } = require('./config')

const nodeEnv = process.env.NODE_ENV || 'development'
const isDev = nodeEnv !== 'production'

const WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin')
const webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./WIT.config')).development(isDev)

// Setting the plugins for development/production
const getPlugins = () => {
  // Common
  const plugins = [
    new ExtractTextPlugin({
      filename: '[name].[contenthash:8].css'
      , allChunks: true
      , disable: isDev // Disable css extracting on development
      , ignoreOrder: CSSModules
    })
    , new webpack.LoaderOptionsPlugin({
      options: {
        // Javascript lint
        eslint: {}
        , context: '/' // Required for the sourceMap of css/sass loader
        , debug: isDev
        , minimize: !isDev
      }
    })
    // Style lint
    , new StyleLintPlugin({ files: ['src/**/*.css'], quiet: false })
    // Setup environment variables for client
    , new webpack.EnvironmentPlugin({ NODE_ENV: JSON.stringify(nodeEnv) })
    // Setup global variables for client
    , new webpack.DefinePlugin({
      __CLIENT__: true
      , __SERVER__: false
      , __DEV__: isDev
    })
    , new webpack.NoEmitOnErrorsPlugin()
    , webpackIsomorphicToolsPlugin
  ]

  if (isDev) { // For development
    plugins.push(
      new webpack.HotModuleReplacementPlugin(),
      // Prints more readable module names in the browser console on HMR updates
      new webpack.NamedModulesPlugin(),
      new webpack.IgnorePlugin(/webpack-stats\.json$/), // eslint-disable-line comma-dangle
      new BundleAnalyzerPlugin({
        analyzerMode: 'static'
        , openAnalyzer: false
      })
    )
  } else {
    plugins.push( // For production
      new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: Infinity }),
      new webpack.HashedModuleIdsPlugin(),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        beautify: false,
        mangle: { screw_ie8: true },
        compress: {
          screw_ie8: true, // React doesn't support IE8
          warnings: false,
          unused: true,
          dead_code: true
        },
        output: { screw_ie8: true, comments: false }
      }) // eslint-disable-line comma-dangle
    )
  }

  return plugins
}

// Setting the entry for development/production
const getEntry = () => {
  // For development
  let entry = [
    'babel-polyfill' // Support promise for IE browser (for dev)
    , 'react-hot-loader/patch'
    , 'webpack-hot-middleware/client?reload=true'
    , './src/client.js'
  ]

  // For production
  if (!isDev) {
    entry = {
      main: './src/client.js'
      // Register vendors here
      , vendor
    }
  }

  return entry
}

// Setting webpack config
module.exports = {
  name: 'client'
  , target: 'web'
  , cache: isDev
  , devtool: isDev ? 'cheap-module-eval-source-map' : 'hidden-source-map'
  , context: path.join(process.cwd())
  , entry: getEntry()
  , output: {
    path: path.join(process.cwd(), './build/public/assets')
    , publicPath: '/assets/'
    // Don't use chunkhash in development it will increase compilation time
    , filename: isDev ? '[name].js' : '[name].[chunkhash:8].js'
    , chunkFilename: isDev ? '[name].chunk.js' : '[name].[chunkhash:8].chunk.js'
    , pathinfo: isDev
  }
  , module: {
    rules: [
      {
        test: /\.jsx?$/
        , enforce: 'pre'
        , exclude: /node_modules/
        , loader: 'eslint'
      }
      , {
        test: /\.jsx?$/
        , exclude: /node_modules/
        , loader: 'babel'
        , options: {
          cacheDirectory: isDev
          , babelrc: false
          , presets: [
            ['env', {
              targets: {
                browsers: ['last 2 versions', 'ie >= 10']
              }
              , useBuiltIns: true
            }]
            , 'react'
          ]
          , plugins: [
            'react-hot-loader/babel'
            , 'transform-object-rest-spread'
            , 'transform-class-properties'
          ]
        }
      }
      , {
        test: /\.css$/
        , exclude: /node_modules/
        , loader: ExtractTextPlugin.extract({
          fallback: 'style'
          , use: [
            {
              loader: 'css'
              , options: {
                importLoaders: 1
                , sourceMap: true
                , modules: CSSModules
                // "context" and "localIdentName" need to be the same with server config,
                // or the style will flick when page first loaded
                , context: path.join(process.cwd(), './src')
                , localIdentName: isDev ? '[name]__[local].[hash:base64:5]' : '[hash:base64:5]'
                , minimize: !isDev
              }
            }
            , {
              loader: 'postcss'
            }
          ]
        })
      }
      , {
        test: /\.css$/
        , use: ExtractTextPlugin.extract({
          fallback: 'style-loader'
          , use: [{
            loader: 'css-loader'
          }]
        })
        , include: /node_modules[/\\]animate.css/
      }
      , {
        test: /\.(woff2?|ttf|eot|svg)$/
        , loader: 'url'
        , options: { limit: 10000 }
      }
      , {
        test: webpackIsomorphicToolsPlugin.regular_expression('images')
        // Any image below or equal to 10K will be converted to inline base64 instead
        , use: [
          {
            loader: 'url'
            , options: { limit: 10240 }
          }
          // Using for image optimization
          , {
            loader: 'image-webpack'
            , options: { bypassOnDebug: true }
          }
        ]
      }
    ]
  }
  , plugins: getPlugins()
  // Where to resolve our loaders
  , resolveLoader: {
    modules: ['src', 'node_modules']
    , moduleExtensions: ['-loader']
  }
  , resolve: {
    modules: ['src', 'node_modules']
    , descriptionFiles: ['package.json']
    , moduleExtensions: ['-loader']
    , extensions: ['.js', '.jsx', '.json']
  }
  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  // https://webpack.github.io/docs/configuration.html#node
  // https://github.com/webpack/node-libs-browser/tree/master/mock
  , node: {
    fs: 'empty'
    , vm: 'empty'
    , net: 'empty'
    , tls: 'empty'
  }
}

Any idea what I'm missing?

[jxnblk]

I believe this is an issue with resolve.modules not ignoring node_modules. You should use an absolute path for your own src folder, otherwise you might run into similar issues with other libraries

[mrchief]

If that was true, why would older versions of grid-styled work? The webpack config didn't change.

[oomathias]

Yes, you have a problem with resolve.modules.

Prior to these versions prop-types.js wasn't here.

When dist/prop-types.js requires import PropTypes from 'prop-types', and you have modules: ['src', 'node_modules'] configured. You basically say to import src/prop-types.js instead of the npm package prop-types.

@jxnblk You may want to exclude the src folder from the npm package.

[mrchief]

@oomathias Makes sense. I'll try to see if I can make src a little more restrictive. Maybe ./src will do the trick?