“You may need an appropriate loader to handle this file type” with Webpack and Babel
Opened this issue · 0 comments
AlexQianjin commented
There is a webpack build error "You may need an appropriate loader to handle this file type" when I use the latest webpack and babel for now.
And here is my solution. I replace the regular expression from /.js?$/ to /.(js|jsx)/ in the babel configuration of module loaders. I use VS Code as the editor, and the "?" is highlighted in it. I don't know why. But it works fine after I made this change.
webpack config
module: {
loaders: [{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
query:
{
presets:['es2015', 'stage-2', 'react']
}
}]
}
package.json
{
"name": "reactwebpack",
"version": "1.0.0",
"description": "react webpack",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"react",
"webpack"
],
"author": "Alex Qin",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"isomorphic-fetch": "^2.2.1",
"react": "^15.5.4",
"react-bootstrap": "^0.31.0",
"react-dom": "^15.5.4",
"react-redux": "^5.0.5",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.3.6",
"redux": "^3.6.0",
"redux-devtools": "^3.4.0",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.3.0",
"redux-thunk": "^2.2.0",
"webpack": "^2.6.0",
"webpack-dev-middleware": "^1.10.2",
"webpack-hot-middleware": "^2.18.0"
},
"dependencies": {
"express": "^4.15.3"
}
}