web-dev-qa-db-fra.com

Objet de configuration non valide dans le webpack

Je suis Lynda.com - L'entraînement essentiel de React.js par Eve Porcello. Dans la vidéo "Construire avec Webpack", j'ai suivi les étapes décrites exactement par l'auteur, mais la commande "webpack" a échoué, donnant l'erreur suivante

Objet de configuration non valide. Webpack a été initialisé à l'aide d'un objet de configuration qui ne correspond pas au schéma de l'API . - configuration.output.path: La valeur fournie "dist/assets" n'est pas un chemin absolu!

Voici mes fichiers webpack.config.js et package.json.

webpack.config.js

var webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: "dist/assets",
    filename: "bundle.js",
    publicPath: "assets"
  },
  devServer: {
    inline: true,
    contentBase: "./dist",
    port: 3000
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        query: {
          presets: ["latest", "stage-0", "react"]
        }
      }
    ]
  }
}

package.json

{
  "name": "react-essential",
  "version": "1.0.0",
  "description": "A project focusing on React and related tools",
  "main": "index.js",
  "scripts": {
    "start": "httpster -d ./dist -p 3000"
  },
  "author": "Indu Pillai",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-loader": "^6.4.1",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  }
}

J'ai répété les étapes encore et encore, mais ça ne marche pas. Je suis assez nouveau dans ce domaine du Webpack, je ne suis donc pas en mesure de déterminer le problème réel et le type de chemin absolu qu’il nécessite. J'ai aussi essayé un chemin absolu suggéré par une réponse à une autre question (similaire), mais cela n'a pas fonctionné.

Je vous remercie!

javascriptjsonreactjsnpmwebpack
13
Indu Pillai

Cela compilera avec le dernier pack Web - à partir du 10 avril 2017: 

var webpack = require("webpack");

module.exports = {
    entry: __dirname + "/src/index.js",
    output: {
        path: __dirname + "/dist/assets",
        filename: "bundle.js",
        publicPath: "assets"
    },
    devServer: {
        inline: true,
        contentBase: __dirname + "/dist",
        port: 3000
    },
    module: {
        rules: [{
            test: /\.js$/,
            loader: ["babel-loader"],
        }]
    }
}
18
Jean-Louis Brunet

Je suis le même cours que vous et moi avons dû procéder comme suit pour que Webpack produise correctement le fichier bundle.js:

  1. Désinstallez le dernier pack Web (2, si vous venez d'utiliser npm install webpack)
  2. Puis, dans le terminal, exécutez npm install -g [email protected] (elle recommande d’utiliser Sudo npm install -g afin que vous puissiez utiliser Sudo ou non).
  3. Le problème suivant que quelques problèmes soulevés par Webpack ne concernait que moi, mais je devais require('path') car je rencontrais des erreurs de chemin qui ne résolvaient pas et je devais aussi npm install babel-loader car le fichier package.json ne le chargeait pas pour une raison quelconque, ce qui un ajout de path.resolve pour le dossier node_modules 

  4. Mon fichier webpack.config ressemble maintenant à ce qui suit:

    const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, './src/index'),
    output: {
        path: path.resolve(__dirname, './dist/assets'),
        filename: 'bundle.js',
        publicPath: 'assets'
    },
    devServer: {
        inline: true,
        contentBase: path.resolve(__dirname, './dist'),
        port: 3000
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /(node_modules)/,
            loader: path.resolve(__dirname, './node_modules/babel-loader'),
            query: {
                presets: ['latest', 'stage-0', 'react']
            }
        }]
    }
}

  5. Finalement, exécuter webpack --display-error-details m'a montré quelles étaient les erreurs, mais le fichier de configuration que j'ai collé ici a finalement fonctionné pour moi.

Il est à noter que cela vous permettra (espérons-le) de terminer le cours lui-même, mais cela ne vous aidera pas à savoir ce qui a été mis à jour ou à migrer pour rester à jour et utiliser Webpack 2. Il existe d'autres réponses ici. traiter avec la migration qui devrait être examiné aussi.

J'espère que cela vous aide!

6
rgjr

Ce tutoriel a été réalisé avec la version 1 de Webpack, mais vous utilisez la version 2 la plus récente.

Vous pouvez suivre ce guide de migration pour faire fonctionner votre code: https://webpack.js.org/migrate/3/

Voici votre configuration mise à jour

var webpack = require("webpack");
var folder = __dirname;

module.exports = {
  entry: "./src/index.js",
  output: {
    path: folder + "dist/assets",
    filename: "bundle.js",
    publicPath: "/assets"
  },
  devServer: {
    inline: true,
    contentBase: folder + "dist",
    port: 3000
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: "babel-loader",
        query: {
          presets: ["latest", "stage-0", "react"]
        }
      }
    ]
  }
}
3
Kmaschta

remplacer ~ chargeurs ~ par ~ règles ~

module: {
    loaders: [
        {

Apparemment, les chargeurs de mots ont été remplacés ici par des règles.

module: {
    rules: [
        {
1
Leo Leao

En remarque, dans les fichiers d’exercices, l’instructeur utilise cette syntaxe pour le chargeur babel:

loaders: [
    {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: ["babel-loader"],
        query: {
            presets: ["latest", "stage-0", "react"]
        }
    },
]

qui échoue sur le webpack 2.5.0 avec une erreur:

Error: options/query cannot be used with loaders (use options for each array item)

Ceci est résolu en supprimant les crochets autour de "babel-loader":

loader: "babel-loader", //no brackets - not an array

ou en spécifiant le chargeur et les options correspondantes via la syntaxe "use":

loaders: [
    {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['latest', 'stage-0', 'react']
            }
        }
    }
]

Espérons que cela soit réglé là-bas chez Lynda! Ces nouvelles technologies évoluent si rapidement! Pour plus d'informations sur le chargeur babel: https://github.com/babel/babel-loader

1
paulular

Webpack est un peu difficile que de créer-réagir-application. le moyen le plus simple et le plus facile de créer des projets de réaction en utilisant les commandes suivantes de https://facebook.github.io/react/docs/installation.html 

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

Vous pouvez suivre tout le code de réaction du cours mais attendre Webpack car create-react-app compile le code jsx et fait tout ce qui est webpack, etc.

1
Naveed Aheer

lorsque vous migrez vers la nouvelle version de Webpack, cette erreur se produit. Pour résoudre ceci, vous devez fournir un chemin absolu à votre répertoire comme ceci

module.exports = {
    entry: __dirname + '/src/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    }
};
0
iamsangeeth

Pour que cela fonctionne avec la dernière version de webpack v3, vous devez modifier peu le fichier webpack.config.js. Votre code devrait ressembler à ceci après la mise à jour

            var webpack = require("webpack");
            var path = require('path')

            module.exports = {
                entry: path.resolve(__dirname + "/src/index.js"),
                output: {
                    path: path.resolve(__dirname + "/dist/assets"),
                    filename: "bundle.js",
                    publicPath: "assets"
                },
                devServer: {
                    inline: true,
                    contentBase: __dirname + '/dist',
                    port: 3000
                },
                module: {
                    loaders: [
                        {
                            test: /\.js$/,
                            exclude: /(node_modules)/,
                    use: {
                    loader: "babel-loader",
                            options: {
                                presets: ["latest", "stage-0", "react"]
                            }
                        }
                }
                    ]
                }
            }

et votre fichier package.json devrait ressembler à ceci

    {
      "name": "activity-counter-application",
      "version": "1.0.0",
      "description": "A project focusing on building Activity Counter using React and related tools",
      "main": "./index.js",
      "scripts": {
        "start": "./node_modules/.bin/webpack-dev-server"
      },
      "author": "RJ",
      "license": "MIT",
      "devDependencies": {
        "babel-cli": "^6.24.1",
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-preset-latest": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "webpack": "^3.5.1",
        "webpack-dev-server": "^2.7.0"
      },
      "dependencies": {
        "react": "^15.6.1",
        "react-dom": "^15.6.1"
      }
    }
0
Rakesh Jain

Vous devez définir le output.path comme chemin absolu

Vous pouvez ajouter la ligne suivante à l'avant de webpack.config.js 

 var path = require('path')

et changez la sortie comme suit

 output: {
   path: path.resolve(__dirname, "dist/assets"),
   filename: "bundle.js",
   publicPath: "assets"
 }
0
Yu Huang

J'ai eu le même problème et un peu plus. J'ai donc créé un script shell pour simplifier et accélérer le processus d'installation.

pour utilisateurs Linux

essayez ceci bash script auto_conf_wb et ça

  • téléchargements
  • installe
  • configurer webpack
  • configurer babel
  • configurer sever

pour vous.

Notez que cela concerne uniquement l'utilisation de ES6+, webpack, babel.

0
Shakiba Moshiri

Assurez-vous que vous avez ajouté la const path = require('path'); en haut de votre fichier webpack.config.js et que le chemin et le chemin doivent ressembler à path: path.resolve(__dirname, 'dist/assets'),.

0
Dushan