Moment-timezone: JSON parse breaking with webpack

[leticiacostadias]

I don't know if this is a issue with moment-timezone itself, but I need some help here.

I have this project that has been using moment-timezone without any problem for the last years and I needed to update webpack (from v1 to v4, yeah... i know). The only problem I'm facing now is this json file from moment-timezone. When I try to build or start my webpack dev server, i get this error:

ERROR in ../node_modules/moment-timezone/data/packed/latest.json
    Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = "{\...'
    You may need an appropriate loader to handle this file type.
    SyntaxError: Unexpected token m in JSON at position 0 while parsing near 'module.exports = "{\...'
        at JSON.parse (<anonymous>)
        at parseJson (/Users/verios/Desktop/sia/node_modules/json-parse-better-errors/index.js:7:17)
        at JsonParser.parse (/Users/verios/Desktop/sia/node_modules/webpack/lib/JsonParser.js:16:16)
        at doBuild.err (/Users/verios/Desktop/sia/node_modules/webpack/lib/NormalModule.js:445:32)
        at runLoaders (/Users/verios/Desktop/sia/node_modules/webpack/lib/NormalModule.js:327:12)
        at /Users/verios/Desktop/sia/node_modules/loader-runner/lib/LoaderRunner.js:370:3
        at iterateNormalLoaders (/Users/verios/Desktop/sia/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
        at iterateNormalLoaders (/Users/verios/Desktop/sia/node_modules/loader-runner/lib/LoaderRunner.js:218:10)
        at /Users/verios/Desktop/sia/node_modules/loader-runner/lib/LoaderRunner.js:233:3
        at runSyncOrAsync (/Users/verios/Desktop/sia/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
        at iterateNormalLoaders (/Users/verios/Desktop/sia/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
        at /Users/verios/Desktop/sia/node_modules/loader-runner/lib/LoaderRunner.js:202:4
        at process.nextTick (/Users/verios/Desktop/sia/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15)
        at _combinedTickCallback (internal/process/next_tick.js:131:7)
        at process._tickCallback (internal/process/next_tick.js:180:9)
     @ ../node_modules/moment-timezone/index.js 2:15-51

And this is my base config for webpack:

{
  context: path.join(__dirname, 'app'),
  mode: isProd ? 'production' : 'development',
  resolve: {
    extensions: ['.js', '.jsx'],
    modules: [path.join(__dirname, 'app/scripts'), 'node_modules']
  }
  ...
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.join(__dirname, 'app'),
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [ '@babel/preset-env', '@babel/preset-react' ],
              compact: isProd,
              plugins: [
                ['@babel/plugin-proposal-decorators', { legacy: false, decoratorsBeforeExport: false }],
                '@babel/plugin-proposal-class-properties',
                'transform-object-assign'
              ],
              env: {
                production: {
                  plugins: [
                    'transform-inline-environment-variables',
                    'transform-react-remove-prop-types',
                    'transform-runtime'
                  ]
                },
                development: {
                  plugins: [
                    'react-hot-loader/babel'
                  ]
                }
              }
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          { loader: MiniCssExtractPlugin.loader },
          {
            loader: 'css-loader',
            options: {
              minimize: true,
              sourceMap: true
            }
          },
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              includePaths: [ path.join(__dirname, 'node_modules') ],
              sourceMap: true,
              sourceMapContents: true
            }
          }
        ]
      },
      {
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        include: /fonts/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
            mimetype: 'application/font-woff',
            name: '/fonts/[name].[ext]'
          }
        }
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        include: /fonts/,
        use: {
          loader: 'url-loader',
          options: {
            name: '/fonts/[name].[ext]'
          }
        }
      },
      {
        test: /\.(jpe?g|png|gif|svg|ico|pdf)$/i,
        include: /media/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '/[path][name].[ext]'
            }
          },
          'image-webpack-loader'
        ]
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  }
};

Do you guys have any idea of what might be causing this?

[mattleff]

See https://github.com/webpack/webpack/issues/6586#issuecomment-368677035.

Try removing

{
    test: /\.json$/,
    loader: 'json-loader'
}