Modify webpack.config.js of create-react-app

Question

I want to modify the existing webpack.config.js file of Dan Abramov's create-react-app - I want to add an extra loader 'react-html-attrs' so that I can use class tag as is without changing it to camel-case className

So here is what I did : 1. I went to official github doc of this babel plugin - https://github.com/insin/babel-plugin-react-html-attrs and it said that if you're using babel-6 install npm package: npm install --save-dev babel-plugin-react-html-attrs

and then in one of my component js i returned a jsx containing class instead of classname - but I'm still getting this error message.

How to add custom babel loaders in webpack config of create react app??

Also which one to edit - there are 4 such files in the directory??

jumoel · Accepted Answer · 2017-02-13 19:40:52Z

5

Unfortunately it isn't possible to add new babel plugins unless you convert to a custom setup.

By running npm run eject, you will be able to modify the Babel and webpack configs to your liking, with all the (dis)advantages it contains.

answered Feb 13, 2017 at 19:40

jumoel

1,7901 gold badge13 silver badges22 bronze badges

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

3 Comments

Probosckie Over a year ago

If I do npm run eject - will it only affect the CRA installation of that folder/project? Or will it affect the globally installed npm package - such that I will not be able to use create-react-app command ever again?

jumoel Over a year ago

Fortunately, only for that single project. :-)

Probosckie Over a year ago

wow great - this opens up all kind of interesting possibility

Code Wiget · Accepted Answer · 2020-02-04 15:52:34Z

1

Enter your project dir and run

npm run eject

This will extract all of the configuration files for you to edit, including webpack.config.js, to a folder called "config". Enter config/webpack.config.js, find the "return" statement, and inside there is a "resolve" configuration option. Add the following to that object:

symlinks: false

answered Feb 4, 2020 at 15:52

Code Wiget

1,7321 gold badge26 silver badges42 bronze badges

Collectives™ on Stack Overflow

Modify webpack.config.js of create-react-app

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related