Load .jsx files with webpack

Question

I have a problem with loading .jsx files using webpack. I have this webpack.config.js:

var webpack = require('webpack');

module.exports = {
    entry: "./static/js/storage/src/index.js",
    output: {
        path: './static/js/storage/public/',
        publicPath: "public/",
        filename: "bundle.js"
},

resolve: {
    extensions: ['', '.js', '.jsx']
},

module: {
    loaders: [
        {
            test: /\.js$/,
            loader: "babel-loader",
            exclude: [/node_modules/, /public/],
            query: {
                plugins: ['transform-runtime'],
                presets: ['es2015', 'stage-0', 'react']
            }
        },
        {
            test: /\.jsx$/,
            loader: "react-hot!babel",
            exclude: [/node_modules/, /public/]
        }
    ]
}
};

And I have this packages for my application:

"dependencies": {
    "jquery": "^3.1.0",
    "react": "^15.2.1",
    "react-dom": "^15.2.1"
},
    "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel": "^6.5.2",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-runtime": "^6.9.2",
    "css-loader": "^0.23.1",
    "file-loader": "^0.9.0",
    "json-loader": "^0.5.4",
    "jsx-loader": "^0.13.2",
    "react": "^15.2.1",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1"
}

And when i try to run webpack in console i have this error:

Module parse failed: /static/js/storage/src/components/StorageApp.jsx Unexpected token (12:12) You may need an appropriate loader to handle this file type.

My webpack can not load jsx files. I think that problem is in my jsx loader. But I do not know what the exact problem.

I try to use react-hot, babel loader and jsx-loader with presets and without but error is the same in all cases. This loaders don't work to:

test: /\.jsx$/,
    loader: 'babel',
    query: {
        presets: ['react', 'es2015']
},

Can someone help with this problem?

It's failing because of that exclude: [/node_modules/, /public/] based on the error. You could try removing /public/ from the list to see if that fixes the issue. I prefer to maintain include over exclude myself (whitelist over blacklist) as that reads better. — Juho Vepsäläinen
– Juho Vepsäläinen, Commented Jul 17, 2016 at 14:56
Does this answer your question? webpack can't find module if file named jsx — csbarnes
– csbarnes, Commented Jul 29, 2020 at 15:01

Tomer · Accepted Answer · 2019-06-13 12:57:53Z

4

I solved it by adding .jsx post-fix to each of my imported components, like so:

import Somthing from './Something.jsx'

answered Jun 13, 2019 at 12:57

Tomer

1,5781 gold badge15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Skribja · Accepted Answer · 2017-07-10 08:13:31Z

2

Try this

loaders: [
        {
            test: /\.jsx?$/,
            loader: "babel-loader",
            exclude: [/node_modules/, /public/],
            query: {
                plugins: ["react-hot-loader/babel", 'transform-runtime'],
                presets: ['es2015', 'stage-0', 'react']
            }
        }
    ]

answered Jul 10, 2017 at 8:13

Skribja

1611 silver badge5 bronze badges

2 Comments

kca Over a year ago

this says: webpack: Property 'loaders' is not allowed

Juha Tuomala Aug 31 at 11:04

Needs to be under top level module: { loaders: .....

Galeel Bhasha · Accepted Answer · 2016-07-18 00:42:18Z

-1

As you have excluded the 'public' folder in your webpack setting, the compiler fails to parse the .jsx file.

Update below line your webpack file

exclude: [/node_modules/, /public/],

to

exclude: [/node_modules/],

for both .js and .jsx loaders.

answered Jul 18, 2016 at 0:42

Galeel Bhasha

1,90513 silver badges19 bronze badges

Collectives™ on Stack Overflow

Load .jsx files with webpack

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related