Bonjour,

alors voila, je voudrais m' entrainer a developper un petit site avec react-redux-webpack, j'ai suivis un tuto pour l' initialisation du projet,

mais voila, ca ne fonctionne pas... j' ai passer les 3 dernieres heure a essayer plusieurs trucs, a lire pas mal de fofo pour essayer de trouver un probleme similaire, mais je n' arrive pas a comprendre d' ou viens le soucis.

Je vous met le code, assez basique, ainsi que le message d' erreur, en esperant que quelqu' un puisse m' expliquer d' ou viens le soucis. Je suis sous windows10, avec vscode, je precise meme si je ne pense pas que ca change quoique ce soit a mon probleme !

Merci!

PS C:\Users\balou\monTrain> webpack
Hash: 1847b6cb968dbeffde95
Version: webpack 3.8.1
Time: 368ms
 Asset     Size  Chunks             Chunk Names
app.js  4.07 kB       0  [emitted]  main
   [0] ./app.js 1.6 kB {0} [built] [failed] [1 error]

ERROR in ./app.js
Module build failed: ReferenceError: [BABEL] C:\Users\balou\monTrain\app\app.js: Unknown option: C:\Users\balou\monTrain\package.json.query. Check out http://babeljs.io/docs
/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options.
    at Logger.error (C:\Users\balou\monTrain\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
    at OptionManager.mergeOptions (C:\Users\balou\monTrain\node_modules\babel-core\lib\transformation\file\options\option-manager.js:226:20)
    at OptionManager.init (C:\Users\balou\monTrain\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (C:\Users\balou\monTrain\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (C:\Users\balou\monTrain\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (C:\Users\balou\monTrain\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (C:\Users\balou\monTrain\node_modules\babel-loader\lib\index.js:50:20)
    at Object.module.exports (C:\Users\balou\monTrain\node_modules\babel-loader\lib\index.js:175:20)

// PACKAGE.JSON
{
  "name": "montrain",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.8.1"
  },
  "babel": {
    "query": {
      "presets": [
        [
          "react",
          "{}"
        ],
        [
          "env",
          "{}"
        ]
      ]
    }
  }
}

//WEBPACK.CONFIG.JS
module.exports = {
    context: __dirname + '/app',
    entry: "./app.js",
    output: {
        filename: "app.js",
        path: __dirname + "/dist"
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }]
   }
}

//TRAIN.JS
import React from 'react';

class Train extends React.Component {
    render() {
        return(
            <h1>Hello World</h1>
        );
    };
};

export default Train;

    //APP.JS
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { CreateStore } from 'redux';
    import Train from './train.js';

    console.log('Train => ', Train);

    ReactDOM.render(
        <Train />,
        document.getElementById('root')
    )

-
Edité par StephaneLeliegard 20 novembre 2017 à 0:47:00

Bonjour,

Il ne faut pas mettre les accolades entre guillemets.

// PACKAGE.JSON
{
  "name": "montrain",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.8.1"
  },
  "babel": {
    "query": {
      "presets": [
        [
          "react",
          {}
        ],
        [
          "env",
          {}
        ]
      ]
    }
  }
}

Les accolades servent à donner des options supplémentaires aux plugins Babel utilisés. Comme par exemple :

{
    "babel": {
        "presets": [
            [
                "env",
                {
                    "targets": {
                        "browsers": [
                            "last 2 versions",
                            "safari >= 7"
                        ]
                    }
                }
            ]
        ]
    }
}

Est-ce que tu as essayé d'exporter la configuration actuel de Babel que tu as vers un fichier .babelrc à la racine de ton projet ?

Bon ca y est, en traficotant dans tous les sens j' ai enfin reussis !! Je met le code au cas ou ca interesse des gens la config minimale (Train.js et app.js ne changent pas). Merci Walter

!!! EDIT : 

ah ba non, j' ai parler trop vite, webpack fait bien sa mixture mais ma page n' affiche walou, pas de h1, pas de msg dans la console, walou de chez walou, mais bon jsuis fatiguer, ca doit etre une boulette d' inatention .... hopefully ! Bref, je remodifie des que j' ai un code qui tourne, desoler les gars, fausse alerte :p, je laisse quand meme le code, au cas ou quelqu' un voudrais ecrire un code qui ne fonctionne pas XD

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel" src="./dist/app.js"></script>
</body>
</html>

package.json

{
  "name": "montrain",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.8.1"
  },
  "babel": {
      "presets": [
          "react", "env"
      ]
  }
}

webpack.config

module.exports = {
    context: __dirname + '/app',
    entry: "./app.js",
    output: {
        filename: "app.js",
        path: __dirname + "/dist"
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }]
   }
}

-
Edité par StephaneLeliegard 20 novembre 2017 à 22:34:56

Essaie d'utiliser la version local au projet de webpack en créant une nouvelle commande-script dans ton fichier package.json.

{
    "scripts": {
        "build": "webpack"
    }
}

Ensuite, supprime ton dossier node_modules et package-lock.json (s'il est présent) et ré-installe le avec la commande

$ npm i

De temps à autre, cela me permets de corriger certains conflits sur mes installations. Veille aussi à avoir une version de Node et NPM à jour.

nope, ca n' as rien changer .. ce soir je testerai en creeant un ptit serveur avec node, voir si ca vient du fait de tester en local !

EDIT !!!!

ok, alors pour faire fonctionner tout ce bazar, il suffit de retirer du .html le "type='text/babel'" de la balise script. Pas sur de trop savoir pourquoi, vu que le bundle est un fichier ecrit en js au final .. donc si il avait fallu le remplacer par type='text/javascript', pourquoi pas, mais le supprimer ... Voili voilou, j' ai enfin un beau h1 qui s' affiche !!! wouhouuuu !!

-
Edité par StephaneLeliegard 21 novembre 2017 à 13:15:05