web-dev-qa-db-fra.com

Guidon Loader avec Webpack 4

J'ai étudié des exemples d'utilisation du chargeur de guidons avec Webpack, mais aucun ne semble fonctionner avec Webpack 4.

Erreur

ERROR in ./src/templates/property-list-item.hbs Module build failed: TypeError: Cannot read property 'handlebarsLoader' of undefined at getLoaderConfig (/Users/Sam/Desktop/mettamware/Public/js/node_modules/handlebars-loader/index.js:24:37) at Object.module.exports (/Users/Sam/Desktop/mettamware/Public/js/node_modules/handlebars-loader/index.js:32:15) @ ./src/property-list.js 5:0-58 40:23-31 @ ./src/app.js

Quand je regarde dans node_modeules/handlerbars-loader/index.js, la fonction incriminée est la suivante 

function getLoaderConfig(loaderContext) {
  var query = loaderUtils.getOptions(loaderContext) || {};
  var configKey = query.config || 'handlebarsLoader';
  var config = loaderContext.options[configKey] || {};
  delete query.config;
  return assign({}, config, query);
}

Mon webpack.config.js 

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.hbs$/,
        use: [{
          loader: "handlebars-loader",
          options: {
            helperDirs: path.resolve(__dirname, "./src/helpers")
          }
        }]
      }
    ]
  },
  node: {
    fs: 'empty'
  }
};

Si quelqu'un pouvait aider, je l'apprécierais grandement. Cela fait des heures que je cherche une solution et j'ai essayé beaucoup de choses, mais je ne vais nulle part.

javascriptwebpackwebpack-handlebars-loader
7
Redtama

Dans Webpack 4, loaderContext.options a été remplacé par loaderContext.rootConfig.

Cette validation a déjà été effectuée dans le package handlebars-loader pour le rendre compatible avec Webpack 4, mais cela n'a pas encore été publié.

Pour le moment, j'ai désinstallé handlebars-loader et j'utilise this fork .

Les étapes suivantes ont résolu mon problème:

Exécutez ces deux commandes .
npm uninstall handlebars-loader
npm install @icetee/handlebars-loader

Dans webpack.config.js, remplacez 

loader: "handlebars-loader"

avec 

loader: "@icetee/handlebars-loader"
1
Redtama

Également en train de mettre à niveau un ancien Webpack 4 ...

Apparemment, il était possible de définir des propriétés personnalisées sur la configuration. C’est là que l’on cherche la handlebarsLoader.

Il émet cette erreur lorsque vous définissez une propriété handleBarLoader sur celle-ci.

Pour les options du chargeur: webpack 2 n'autorise plus les propriétés personnalisées en configuration.

Les chargeurs doivent être mis à jour pour permettre les options de passage via les options de chargeur dans module.rules.

Jusqu'à ce que les chargeurs soient mis à jour, vous pouvez utiliser LoaderOptionsPlugin pour transmettre ces options au chargeur:

     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           handlebarsLoader: ...
         }
       })
     ]

Dans mon cas, définissez-le comme ceci pour l'instant:

     plugins: [
       new webpack.LoaderOptionsPlugin({
         options: {
           handlebarsLoader: {}
         }
       })
     ]
2
Clay