last day (14 days later) » 

2:33 PM
1
A: webpack issue when trying to render in reactjs

AlexanderInstead of jsx-loader try use babel-loader module: { loaders: [{ test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] } Note - Make sure that you have installed these packages npm i babel-l...

 
I am getting the following error ERROR in ./src/index.js Module build failed: ReferenceError: [BABEL] C:\Users\Th\Desktop\ReactJs_Master\src\index.js: Unknown option: d irect.presets
 
@Catmandu have you installed all packages that I mentioned in my answer?
 
@alexander..yes and I am getting the following error now:- ERROR in ./src/index.js Module build failed: ReferenceError: [BABEL] C:\Users\Th\Desktop\ReactJs_Master\src\index.js: Using removed Babel 5 option: C:\Users\Th\Desktop\ReactJs_Master\.babelrc.stage - Check out the corresponding stage-x presets ht tp://babeljs.io/docs/plugins/#presets
 
@Catmandu could you post your package.json?
 
can you please check..have updated the question..Thanks
 
2:33 PM
@Catmandu remove devDependencies section and run next command, npm i webpack babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
 
hey
 
hey
 
I am getting the same error
 
show your package.json
and webpack.config.js
 
{
"name": "react_quiz",
"version": "1.0.0",
"description": "quiz with the help of reactjs",
"main": "script.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Pratham",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"webpack": "1.12.*"
},
"dependencies": {
"react": "15.0.1",
"react-dom": "15.0.1"
}
}
module.exports = {
entry: {
app: './src/index.js'
},

// Add resolve.extensions.
// '' is needed to allow imports without an extension.
// Note the .'s before extensions as it will fail to match without!!!
resolve: {
extensions: ['', '.js', '.jsx', '.es6.js']
},

output: {
path: __dirname,
filename: 'app/js/main.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: { presets: ['es2015', 'react'] }
}]
}
};
any help ??
 
2:37 PM
one sec
run in console webpack
and post here what you get
 
what command
console webpack only
 
webpack
 
ok
ERROR in ./src/index.js
Module build failed: ReferenceError: [BABEL] C:\Users\PrathameshP\Desktop\ReactJs_Master\src\index.js: Using removed Bab
el 5 option: C:\Users\PrathameshP\Desktop\ReactJs_Master\.babelrc.stage - Check out the corresponding stage-x presets ht
tp://babeljs.io/docs/plugins/#presets
when running webpack
 
try remove folder node_modules
and then run command npm i
also post here your .babelrc
because maybe in babelrc you use stage option
 
{
"stage": 2,
"env": {
"development": {
"plugins": [
"react-display-name",
"react-transform"
],
"extra": {
"react-transform": {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}
}
}
}
}
babel rc
 
2:48 PM
you don't need use this .babelrc configs, this config for babel v5
remove all content from it
and move presets from webpack config
to .babelrc
your .babelrc should looks like this
{
"presets": ["es2015", "react"]
}
and query option you can remove from webpack.config.js
 
ok
i just read it here and just chab=nged it
previously was the same as above
ok should i run the webpack command
yesss it worked
Thanks a lot buddy for your help
:)
 
welcome :)
 

last day (14 days later) »