I'm trying to compile my React app with support for ES7 decorators as I'm using the autobind-decorator but webpack says there is an "Unexpected token" with the router, which is the entry file for the app. I've tried various versions of babel related npms, using the the "state-0" and "transform-runtime" and they all result in the same error. Anyone's help would be very much appreciated :)
main.js
webpack.config
package.json
The reason for this error is incorrect loader config inside your webpack.config.js file. You need to supply the presets under the query field in the loader config:
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
query: {
presets: ['es2015', 'react', 'stage-1']
}
}
]
According to the README of babel-loader, your should use query field in your config, like so:
module: {
loaders: [
{
test: /\.jsx?$/,
include: // ....
loader: 'babel',
query: {
presets: [/*presets list*/],
plugins: [/*plugins list*/]
}
}
]
}
Related
In our project, I'm trying to refactor all our components to have a .jsxfile extension rather than .js. My webpack.config.babel file now looks like this:
import fs from "fs"
const babelrc = JSON.parse(fs.readFileSync("./.babelrc"))
export default {
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader",
query: babelrc,
exclude: /(node_modules|bower_components)/,
},
{
test: /\.jsx$/,
loader: "babel-loader",
query: babelrc,
exclude: /(node_modules|bower_components)/,
},
{
test: /\.json$/,
loader: "json-loader",
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
],
},
}
However when I try to run import Main from './components/Main/Main';
in my client.js file, it shows me
Module build failed: Error: ENOENT: no such file or directory, open '/foo/src/components/Main/Main.js'
# multi babel-polyfill webpack-dev-server/client?/ webpack/hot/dev-server ./src/client.js
I'm new to babel and webpack. What other places to I need to register the jsx file extension?
Take a look at the documentation for resolve.extensions:
https://webpack.js.org/configuration/resolve/#resolveextensions
You can add the following to your Webpack config to also automatically resolve files with the .jsx extension by adding the following to your config:
resolve: {
extensions: ['.js', '.jsx']
}
Btw, you can also optimize your loader config by removing the separate .jsx loader and make the first loader test for /\.jsx?$/
Right now I'm trying to create the above compiler using npm and gulp. But I keep getting stuck.
I only need it to compile jsx and stylus files to run on a localhost server.
In your webpack config, Add loader for jsx and stylus like below code.
For JSX & Stylus:
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.styl$/,
loader: 'css-loader!stylus-relative-loader?paths=node_modules/bootstrap-stylus/stylus/'
}
]
},
I would like to use tree shaking feature seems we don't need to install babel-preset-es2015-webpack. We still can use babel-preset-es2015 and set the modules flag to false for es2015 preset. I changed my webpack configuration as shown below which results in "Unexpected token import" error on import line in my react components.
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: [['es2015', {modules: false}], 'react']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
}
]
}
I also tried to set the presets as
['es2015', 'react', {modules: false}]
Then I got different error on console:
Module build failed: ReferenceError: [BABEL] C:\FE-Proj-Templates\webpack\main.js: Using removed Babel 5 option: foreign.modules - Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules
How can I set the preset es2015 with modules flag false and also use React preset?
It's updated and works
presets: [['es2015', {modules: false}], 'react']
I've read lots of other S/O posts that detail a similar problem, however I cannot find a solution for my specific issue.
I installed a node module, but I am now receiving this error message:
(syllable - is the module I installed)
index.js:641 ./~/syllable/problematic.json
Module parse failed: /Desktop/App/node_modules/syllable/problematic.json Unexpected token (2:11)
You may need an appropriate loader to handle this file type.
Here is my Webpack config
var config = {
entry: './main.js',
output: {
path: './',
filename: 'index.js',
},
devServer: {
inline: true,
port: 3000
},
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
},
{ //<-- this line is throwing an unexpected token error
test: /\.json$/,
loader: 'json'
}
}
]
}
}
module.exports = config;
Note: I have es2015 installed, and I have tried re-writing the webpack.config.js several times to no avail.
What am I doing incorrectly?
It is trying to load a .json file. You currently do not have a json-loader setup to handle this sort of thing. Have a look at json-loader.
Example
npm install --save-dev json-loader
webpack.config.js
...
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.json$/,
loader: 'json'
}
}
]
...
What is error and message
index.js:641 ./~/syllable/problematic.json Module parse failed:
/Desktop/App/node_modules/syllable/problematic.json Unexpected token
(2:11) You may need an appropriate loader to handle this file typ
And answer
You should really read it, It clearly says that Module parse failed. It gave you file name and told you that You may need an appropriate loader to handle this file typ
json-loader what you need
install json-loader with npm and add it to your config.
{
test: /\.json$/,
loader: 'json'
}
Currently your regular expression does not match any file extension. If you're trying to test both .js and .jsx file remove the last $ and replace it with ? and remove the |.
module:{
loaders: [
{
test: /\.jsx?/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
I have installed react-hot-loader and referenced the module in the webpack.config.js. However when i try to run webpack to compile the scripts, i get an error.
Please see below screen shot. Could someone please advise of what the issue could be. FYI, i am using all the latest libraries.
[1]: http://i.stack.imgur.com/2GCa1.jpg
/*webpack.config.js
module.exports = {
devtool: 'eval-source-map',
entry: {
main: [
'./src/main.js'
]
},
output: {
filename: './public/[name].js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: ['react-hot','babel-loader'],
query: {
presets: ['es2015', 'react']
}
}
]
}
}
/*UPDATE*/
Code update
I have added an "s" after loader. It is now giving me the below error.
[2]: http://i.stack.imgur.com/LL1nn.jpg
Based on your second picture, you could try the following:
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: ['react-hot'],
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: ['babel-loader'],
query: {
presets: ['es2015', 'react']
}
}
]
I've created a starter with webpack, babel and react-hot-loader. Please have a look into my config: https://github.com/skrobek/webpack-react/blob/master/webpack.config.js
and package.json https://github.com/skrobek/webpack-react/blob/master/package.json#L19
Feel free to use it :-)