how to extend webpack config?

I’m using this create-react-app to start a new react project, want to use components from material-components-web; while a first problem met is the transpiled script contains import and export which browser doesn’t understand, I guess it’s because the builtin webpack.config has an exclusion of all code under ^node_modules/, it transpiles only user’s app code; is this true?

https://github.com/material-components/material-components-web#javascript

I tested the similar NYTimes/kyt project, that exposes a modifywebpackconfig interface for users to easily tweak webpack config somewhat; wonder if this create-react-app has some similar easy way of webpack customization? I feel like the eject to make copies of all builtin webpack config stuff is the only option here?

https://github.com/NYTimes/kyt/blob/master/docs/kytConfig.md#modifywebpackconfig

/* 272 */
/*!***************************************!*\
  !*** ./~/@material/checkbox/index.js ***!
  \***************************************/
/***/ function(module, exports) {

	/**
	 * Copyright 2016 Google Inc. All Rights Reserved.
	 *
	 * Licensed under the Apache License, Version 2.0 (the "License");
	 * you may not use this file except in compliance with the License.
	 * You may obtain a copy of the License at
	 *
	 *      http://www.apache.org/licenses/LICENSE-2.0
	 *
	 * Unless required by applicable law or agreed to in writing, software
	 * distributed under the License is distributed on an "AS IS" BASIS,
	 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	 * See the License for the specific language governing permissions and
	 * limitations under the License.
	 */

	import {MDCComponent} from '@material/base';
	import MDCCheckboxFoundation from './foundation';

	export {MDCCheckboxFoundation};

	export class MDCCheckbox extends MDCComponent {
	  static attachTo(root) {
	    return new MDCCheckbox(root);
	  }

    ...

[gaearon]

We don’t currently transpile dependencies. This is intentional because otherwise build times would be slower. It has long been a convention to precompile packages to ES5 before publishing to npm, and CRA only works well with such packages. There is a discussions about this in https://github.com/facebookincubator/create-react-app/issues/1125.

No, there are no currently no plans to make Webpack configuration configurable before ejecting. This hurts our ability to change things internally as people come to depend on specific versions of Webpack, loaders, etc. This also has been discussed before so I encourage you to use issue search before creating a new issue: #99 #145 #460 #481 #1060 #1103 #1111.

If these limitations don’t work for you, indeed I recommend checking out alternatives like nwb and kyt which provide these features. I hope this helps!

[dinukadesilva]

Hi @c0b

You can get all the configuration to the project itself by running npm run eject

And then you are free to edit the webpack configurations https://github.com/facebookincubator/create-react-app#converting-to-a-custom-setup