web-dev-qa-db-fra.com

Importer React from 'react' résulte en Uncaught SyntaxError: identifiant inattendu

J'ai installé webpack 3 avec babel et mon entrée index.js/bundle.js Sera construite et exécutée, que j'ai testée avec les fonctionnalités ES7/8, mais les importations ne fonctionneront pas et résulteront en Uncaught SyntaxError: Unexpected identifier. J'ai essayé de mettre la configuration babel dans le package.json Ainsi que dans un fichier .babelrc Séparé dans le répertoire racine de mon application, mais j'obtiens toujours l'erreur lors de la tentative d'importation. Suis-je absent d'un package ou d'un paramètre?

index.js (fonctionne)

// does not work
// import React from 'react' 

// works
const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));

webpack.config.js

const path = require('path')

module.exports = {
  context: path.resolve(__dirname, 'app/assets/javascripts/source'),
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'app/assets/javascripts/webpack')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

. babelrc

{
  "presets": ["env", "react"]
}

package.json

}
  ...
  "license": "MIT",
  "scripts": {
    "build": "webpack",
  },
  "babel": {
    "presets": [
      "env",
      "react"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  }
}
javascriptnpmwebpackbabeljsbabel
7
adang3

Essayez ceci: transform-es2015-modules-AMD, ce plugin transforme les modules ES2015 en définition de module asynchrone (AMD).

{
    presets: ["env", "react"],
    plugins: ["transform-es2015-modules-AMD"]
 }

plus sur transform-es2015-modules-AMD

4
Jayavel

Cela ne fonctionne pas car il ne traduit pas es6, donc la déclaration d'importation ne fonctionne pas, vous devez babel-preset-es2015

et le configurer . babelrc

{
    "presets":[
        "es2015", "react"
    ]
}
1
RANVIR GORAI