react-dnd / react-dnd-html5-backend

HTML5 backend for React DnD [Legacy Repo]

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error in console after build using babel presets latest

sabarnix opened this issue · comments

There seems to be an error importing HTML5Backend
Here's my babel config in package.json

"babel": {
    "presets": [
      [
        "latest",
        {
          "es2015": {
            "modules": false
          }
        }
      ],
      "react",
      "stage-0"
    ],
    "env": {
      "production": {
        "only": [
          "app"
        ],
        "plugins": [
          "transform-react-remove-prop-types",
          "transform-react-constant-elements",
          "transform-react-inline-elements"
        ]
      },
      "test": {
        "plugins": [
          "istanbul"
        ]
      }
    }
  }

And here's the webpack.config.js file

  {  
  entry:  [
    path.join(process.cwd(), 'app/app.js'),
  ],
  output: {
    path: path.resolve(process.cwd(), 'build'),
    publicPath: '/'
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].chunk.js',

  }, 
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/,
    }, {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ['style', 'css', 'sass'],
    }, {

      test: /\.css$/,
      include: /node_modules/,
      loaders: ['style-loader', 'css-loader'],
    }, {
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      loader: 'file-loader',
    }, {
      test: /\.(jpg|png|gif)$/,
      loaders: [
        'file-loader',
        'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}',
      ],
    }, {
      test: /\.html$/,
      loader: 'html-loader',
    }, {
      test: /\.json$/,
      loader: 'json-loader',
    }, {
      test: /\.(mp4|webm)$/,
      loader: 'url-loader?limit=10000',
    }],
  },
  plugins: [
    new WebpackNotifierPlugin({
      title: 'Webpack',
      excludeWarnings: true
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      children: true,
      minChunks: 2,
      async: true,
    }),

    new webpack.optimize.DedupePlugin(),

    new HtmlWebpackPlugin({
      template: 'app/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      inject: true,
    }),

    new webpack.ProvidePlugin({
      fetch: 'exports?self.fetch!whatwg-fetch',
    }),

    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
    new webpack.NamedModulesPlugin(),
  ]),
  resolve: {
    modules: ['app', 'node_modules'],
    extensions: [
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'browser',
      'jsnext:main',
      'main',
    ],
  },
  target: 'web', 
}

I've imported Html5Backend as shown in the docs

import HTML5Backend from 'react-dnd-html5-backend';

Although the webpack build completes successfully, on running, the following error is shown in the browser console.

main.cf54330….js:1 Dynamic page loading failed TypeError: Cannot read property 'call' of undefined
    at t (main.cf54330….js:1)
    at Object../node_modules/react-dnd-html5-backend/lib/HTML5Backend.js (0.b342625….chunk.js:12)
    at t (main.cf54330….js:1)
    at Object../node_modules/react-dnd-html5-backend/lib/index.js (0.b342625….chunk.js:12)
    at t (main.cf54330….js:1)
    at Object../app/containers/ReportingView/index.js (0.b342625….chunk.js:1)
    at t (main.cf54330….js:1)
    at Object../app/containers/HomePage/index.js (0.b342625….chunk.js:1)
    at t (main.cf54330….js:1)