CODEWITHSUNDEEP
reactjswebpackbabeljs
ilia
ilia

Reputation: 339

ReferenceError: Unknown option: .present

hello i just made environment setup for react js and it gives me error ReferenceError: Unknown option: .present. and here is codes of .babelrc webpack.config.js, package.json and react.js (file)

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

webpack.config.js :

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './react.js',
output:{
    path: path.join(__dirname, '/frapp'),
    filename: 'bundled.js'
},
devServer:{
    inline: true,
    port: 8001
},
module: {
    rules: [
        {
           test: /\.jsx?$/,
           exclude: /node_modules/,
           loader: 'babel-loader',
           query:{
             present:['es2015', 'react']
           }
        }
    ]
},
  plugins: [
    new HtmlWebpackPlugin({
        template: './index.html'
    })
  ]
}

package.json :

{
  "name": "reacc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  }
}

for more details i would like to screenshot my directory here it is image

here is part of error : Module build failed (from ./node_modules/babel-loader/lib/index.js): ReferenceError: Unknown option: .present. Check out https://babeljs.io/docs/en/b abel-core/#options for more information about options.

as a matter of fact, react is opens html page but does not display text in div

Upvotes: 2

Views: 9280

Answers (1)

jayarjo
jayarjo

Reputation: 16726

It's presets, not present:['es2015', 'react']. There's a typo in your webpack.config.js.

Also what's that query key?

query: {
   present:['es2015', 'react']
}

From what I know it should be options. So:

options: {
   presets: ['es2015', 'react']
}

Upvotes: 7

Related Questions