how to extend webpack config?

[c0b]

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);
	  }

    ...

[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

[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 #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!

[piotr-cz]

@c0b import transpiled ES5 files. Instead

import { MDCSnackbar } from '@material/snackbar'

use

import { MDCSnackbar } from '@material/snackbar/dist/mdc.snackbar.js'

[raymondsze]

@c0b
I just published a library called 'create-react-scripts'.

The underlying concept is same as what "react-app-rewired" did but you are able to re-publish it like your version of react-scripts which "react-app-rewired" not allow you to do so.

You are allowed to rewire the env, paths, webpack.config.dev, webpack.config.prod, webpackDevServer.config and createJestConfig yourself.

I am still a newbie on open source community, looking for feedback on this approach.
https://medium.com/@szer0601/create-react-scripts-create-your-own-react-scripts-without-fork-e73d384c7369
https://github.com/raymondsze/create-react-scripts

[gaearon]

FYI, we're starting the work to compile deps with babel-preset-env in Create React App: #3776

Let us know if you have feedback about how this should work.