Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to extend webpack config? #1308

Closed
c0b opened this issue Dec 22, 2016 · 5 comments
Closed

how to extend webpack config? #1308

c0b opened this issue Dec 22, 2016 · 5 comments

Comments

@c0b
Copy link

c0b commented Dec 22, 2016

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
Copy link
Contributor

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
Copy link
Contributor

gaearon commented Dec 23, 2016

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
Copy link
Contributor

@c0b import transpiled ES5 files. Instead

import { MDCSnackbar } from '@material/snackbar'

use

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

@raymondsze
Copy link

@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
Copy link
Contributor

gaearon commented Jan 13, 2018

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.

@lock lock bot locked and limited conversation to collaborators Jan 20, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants