gaearon / react-hot-loader

Tweak React components in real time. (Deprecated: use Fast Refresh instead.)
http://gaearon.github.io/react-hot-loader/
MIT License
12.26k stars 801 forks source link

ERROR in ./index.js Module build failed: TypeError: template is not a function #1009

Open kkseven07 opened 6 years ago

kkseven07 commented 6 years ago

Moved to RHL v4 and got this error. I am a newbie in react and webpack, so you explain how to fix this? Versions: "babel": "^6.5.2", "babel-cli": "^6.9.0", "babel-core": "^5.8.38", "babel-loader": "^6.4.1", "babel-plugin-transform-runtime": "^6.9.0", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", "webpack": "^1.9.11",

ERROR in ./index.js
Module build failed: TypeError: template is not a function
    at plugin (/Users/mymac/Work/gowork/react-project/node_modules/react-hot-loader/dist/babel.development.js:27:27)
    at Function.memoisePluginContainer (/Users/mymac/Work/gowork/react-project/node_modules/babel-core/lib/transformation/file/plugin-manager.js:77:23)
    at PluginManager.add (/Users/mymac/Work/gowork/react-project/node_modules/babel-core/lib/transformation/file/plugin-manager.js:209:30)
    at File.buildTransformers (/Users/mymac/Work/gowork/react-project/node_modules/babel-core/lib/transformation/file/index.js:237:21)
    at new File (/Users/mymac/Work/gowork/react-project/node_modules/babel-core/lib/transformation/file/index.js:139:10)
    at Pipeline.transform (/Users/mymac/Work/gowork/react-project/node_modules/babel-core/lib/transformation/pipeline.js:164:16)
    at transpile (/Users/mymac/Work/gowork/react-project/node_modules/babel-loader/lib/index.js:46:20)
    at Object.module.exports (/Users/mymac/Work/gowork/react-project/node_modules/babel-loader/lib/index.js:163:20)
 @ multi main
webpack: Failed to compile.

Here is my webpack code

var path = require('path');
var webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-dev-server/client?http://localhost:5050',
    'webpack/hot/only-dev-server',
    // 'react-hot-loader/patch',
    './index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.css'],
    alias: { 'react/lib/ReactMount': 'react-dom/lib/ReactMount' }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    // new BundleAnalyzerPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['babel-loader'],
      // loaders: ['react-hot-loader/webpack', 'babel-loader'],
      exclude: /node_modules/,
      include: __dirname
    },
    {
        test: /\.css$/,
        loaders: [
          'style', 'css',
        ],
    }]
  }
};

Error happens when I add "plugins": ["react-hot-loader/babel"] to babelrc

theKashey commented 6 years ago

Sorry, my psy abilities are not so strong. Could you provide a bit more context, source code, error as it is, and so on.

kkseven07 commented 6 years ago

Updated the issue, what else I should show? Everything worked with RHL 1.2.9, I know that its pretty old version. I added export default hot(module)(Root) to my root component according to documentation with v4.

theKashey commented 6 years ago

Look like the problem is Babel loader or Babel core. Please delete Babel-core, you probably don’t need it, and update Babel-loader.

kkseven07 commented 6 years ago

It didnt help, babel loader requires installed babel-core. Or is there smth i'm doing wrong?

theKashey commented 6 years ago

Look like the problem is babel 5 "babel-core": "^5.8.38", <----- "babel-loader": "^6.4.1", <----- Please use babel-core: 6X, and babel loader 7X

All our tests are using "babel-core": "^6.26.0", "babel-loader": "^7.1.2", That is not the "latest" versions, but quite fresh.