Discussion :

[totot]

Bonjour,

J'essaye de mettre en place l'internationalisation dans mon application et j'ai l'erreur suivante :

MonProjet\node_modules\babel-core\lib\transformation\file\index.js:558
throw err;
^

SyntaxError: MonProjet/scripts/mergeMessages.js: Unexpected token (26:13)
24 | })
25 | .reduce((acc, localeObj) => {
> 26 | return { ...acc, ...localeObj };
| ^
27 | }, {});
28 |
29 | // Aggregates the default messages that were extracted from the example app's
at Parser.pp$5.raise (MonProjet\node_modules\babylon\lib\index.js:4454:13)
at Parser.pp.unexpected (MonProjet\node_modules\babylon\lib\index.js:1761:8)
at Parser.pp$3.parseIdentifier (MonProjet\node_modules\babylon\lib\index.js:4332:10)
at Parser.pp$3.parsePropertyName (MonProjet\node_modules\babylon\lib\index.js:4156:96)
at Parser.pp$3.parseObj (MonProjet\node_modules\babylon\lib\index.js:4045:12)
at Parser.pp$3.parseExprAtom (MonProjet\node_modules\babylon\lib\index.js:3719:19)
at Parser.pp$3.parseExprSubscripts (MonProjet\node_modules\babylon\lib\index.js:3494:19)
at Parser.pp$3.parseMaybeUnary (MonProjet\node_modules\babylon\lib\index.js:3474:19)
at Parser.pp$3.parseExprOps (MonProjet\node_modules\babylon\lib\index.js:3404:19)
at Parser.pp$3.parseMaybeConditional (MonProjet\node_modules\babylon\lib\index.js:3381:19)

Voici mon Package.json :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
{
  "name": "MonProjet",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.3.1",
    "@material-ui/icons": "^3.0.1",
    "@svgr/webpack": "2.4.1",
    "axios": "^0.18.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "9.0.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-react-intl": "^3.0.1",
    "babel-preset-react-app": "^5.0.4",
    "babel-runtime": "^6.26.0",
    "bfj": "6.1.1",
    "case-sensitive-paths-webpack-plugin": "2.1.2",
    "chalk": "2.4.1",
    "chartist": "^0.11.0",
    "classnames": "^2.2.6",
    "css-loader": "1.0.0",
    "dotenv": "6.0.0",
    "dotenv-expand": "4.2.0",
    "eslint": "5.6.0",
    "eslint-config-react-app": "^3.0.4",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-react": "7.11.1",
    "fs-extra": "7.0.0",
    "history": "^4.7.2",
    "html-webpack-plugin": "4.0.0-alpha.2",
    "identity-obj-proxy": "3.0.0",
    "jest": "23.6.0",
    "jest-pnp-resolver": "1.0.1",
    "jest-resolve": "23.6.0",
    "mini-css-extract-plugin": "0.4.3",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "perfect-scrollbar": "^1.4.0",
    "pnp-webpack-plugin": "1.1.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "6.0.6",
    "postcss-safe-parser": "4.0.1",
    "prop-types": "^15.6.2",
    "react": "^16.6.0",
    "react-app-polyfill": "^0.1.3",
    "react-chartist": "^0.13.1",
    "react-dev-utils": "^6.0.5",
    "react-dom": "^16.6.0",
    "react-google-maps": "^9.4.5",
    "react-intl": "^2.7.2",
    "react-router-dom": "^4.3.1",
    "resolve": "1.8.1",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.0",
    "terser-webpack-plugin": "1.1.0",
    "url-loader": "1.1.1",
    "webpack": "4.19.1",
    "webpack-dev-server": "3.1.9",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "3.6.2"
  },
  "scripts": {
    "start": "cross-env NODE_PATH=src npm run build:langs && node scripts/start.js",
    "build:langs": "cross-env NODE_ENV='production' babel-node scripts/mergeMessages.js",
    "build": "cross-env NODE_PATH=src npm run build:langs && node scripts/build.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:8080/gestion-promotions",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-imports": "^1.5.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "cross-env": "^5.2.0"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "resolver": "jest-pnp-resolver",
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx}"
    ],
    "testEnvironment": "jsdom",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "babel": {
      "presets": [
        "react-app",
        "env"
      ],
      "plugins": [
        [
          "transform-object-rest-spread"
        ],
        [
          "react-intl",
          {
            "messagesDir": "./public/messages/"
          }
        ]
      ]
    }
  }
}

[Marco46]

Quelle est ta version de Node.js ?

Exécute node -v dans un terminal stp.

Ton message d'erreur est sur la ligne > 26 | return { ...acc, ...localeObj };, or la syntaxe spread sur les litéraux n'est supportée qu'à partir de la version 8 de node.

[totot]

J'ai la version 10.11

[Marco46]

Désolé ma question était à l'ouest, il s'agit d'un front, donc exécuté dans ton navigateur mais c'est le même problème.

Apparemment tu utilises Babel en version 6 or la gestion du spread dans les littéraux n’apparaît que dans la version 7 (c'est de l'ES2018).

Il faut mettre à jour tes dépendances dev.

[totot]

Peux-tu me dire les dépendences à mettre à jour stp

[Marco46]

Ya pas vraiment de réponse simple, il va falloir que tu cherches et que tu creuses par toi même, à mon avis tu peux déjà faire un essai en montant de version tout ce qui démarre par babel-.

La commande npm outdated devrait te lister toutes les dépendances pour lesquelles tu as du retard sur @latest.

[totot]

voici mon package.json :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@material-ui/core": "^3.3.1",
    "@material-ui/icons": "^3.0.1",
    "@svgr/webpack": "2.4.1",
    "axios": "^0.18.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-named-asset-import": "^0.2.2",
    "babel-plugin-react-intl": "^3.0.1",
    "babel-preset-react-app": "^5.0.4",
    "bfj": "6.1.1",
    "case-sensitive-paths-webpack-plugin": "2.1.2",
    "chalk": "2.4.1",
    "chartist": "^0.11.0",
    "classnames": "^2.2.6",
    "css-loader": "1.0.0",
    "dotenv": "6.0.0",
    "dotenv-expand": "4.2.0",
    "eslint": "5.6.0",
    "eslint-config-react-app": "^3.0.4",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-react": "7.11.1",
    "file-loader": "2.0.0",
    "fs-extra": "7.0.0",
    "history": "^4.7.2",
    "html-webpack-plugin": "4.0.0-alpha.2",
    "identity-obj-proxy": "3.0.0",
    "jest": "23.6.0",
    "jest-pnp-resolver": "1.0.1",
    "jest-resolve": "23.6.0",
    "lodash": "^4.17.11",
    "mini-css-extract-plugin": "0.4.3",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "perfect-scrollbar": "^1.4.0",
    "pnp-webpack-plugin": "1.1.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "6.0.6",
    "postcss-safe-parser": "4.0.1",
    "prop-types": "^15.6.2",
    "react": "^16.6.0",
    "react-app-polyfill": "^0.1.3",
    "react-chartist": "^0.13.1",
    "react-dev-utils": "^6.0.5",
    "react-dom": "^16.6.0",
    "react-google-maps": "^9.4.5",
    "react-intl": "^2.7.2",
    "react-router-dom": "^4.3.1",
    "resolve": "1.8.1",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.0",
    "terser-webpack-plugin": "1.1.0",
    "url-loader": "1.1.1",
    "webpack": "4.19.1",
    "webpack-dev-server": "3.1.9",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "3.6.2"
  },
  "scripts": {
    "start": "cross-env NODE_PATH=src node scripts/start.js",
    "build:langs": "set NODE_ENV='production' babel-node scripts/mergeMessages.js",
    "build": "npm run build:langs && cross-env NODE_PATH=src node scripts/build.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:8080/gestion-promotions",
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-react-jsx": "^7.0.0",
    "babel-plugin-import-rename": "1.0.1",
    "babel-plugin-module-resolver": "3.1.1",
    "cross-env": "^5.2.0"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "resolver": "jest-pnp-resolver",
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx}"
    ],
    "testEnvironment": "jsdom",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  },
  "babel": {
    "presets": [
      "react-app",
      "@babel/preset-env"
    ],
    "plugins": [
      [
        "react-intl",
        {
          "messagesDir": "./public/messages/"
        }
      ]
    ]
  }
}

Et l'erreur :
Missing class properties transform.
33 | }
34 |
> 35 | handleChange = (event) => {
| ^
36 | const target = event.target;
37 | const value = target.value;
38 | const name = target.name;

Je travail avec des extension jsx

[totot]

Il fallait que j'ajoute cette dépendence également :
npm install --save-dev @babel/plugin-proposal-class-properties