Skip to content

Commit 8d4d728

Browse files
gaearonromaindso
authored andcommitted
Support hoisting react-scripts and add require.resolve() to loaders (facebook#2166)
* Support hoisting react-scripts * require.resolve() loaders and configs This makes it so that loaders and configs are resolved relative to the config rather than to the app. This seems to make more sense to me.
1 parent 6cff154 commit 8d4d728

File tree

2 files changed

+16
-38
lines changed

2 files changed

+16
-38
lines changed

packages/react-scripts/config/webpack.config.dev.js

+8-19
Original file line numberDiff line numberDiff line change
@@ -98,17 +98,6 @@ module.exports = {
9898
'react-native': 'react-native-web',
9999
},
100100
},
101-
// @remove-on-eject-begin
102-
// Resolve loaders (webpack plugins for CSS, images, transpilation) from the
103-
// directory of `react-scripts` itself rather than the project directory.
104-
resolveLoader: {
105-
modules: [
106-
paths.ownNodeModules,
107-
// Lerna hoists everything, so we need to look in our app directory
108-
paths.appNodeModules,
109-
],
110-
},
111-
// @remove-on-eject-end
112101
module: {
113102
strictExportPresence: true,
114103
rules: [
@@ -125,13 +114,13 @@ module.exports = {
125114
formatter: eslintFormatter,
126115
// @remove-on-eject-begin
127116
baseConfig: {
128-
extends: ['react-app'],
117+
extends: [require.resolve('eslint-config-react-app')],
129118
},
130119
ignore: false,
131120
useEslintrc: false,
132121
// @remove-on-eject-end
133122
},
134-
loader: 'eslint-loader',
123+
loader: require.resolve('eslint-loader'),
135124
},
136125
],
137126
include: paths.appSrc,
@@ -156,7 +145,7 @@ module.exports = {
156145
/\.jpe?g$/,
157146
/\.png$/,
158147
],
159-
loader: 'file-loader',
148+
loader: require.resolve('file-loader'),
160149
options: {
161150
name: 'static/media/[name].[hash:8].[ext]',
162151
},
@@ -166,7 +155,7 @@ module.exports = {
166155
// A missing `test` is equivalent to a match.
167156
{
168157
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
169-
loader: 'url-loader',
158+
loader: require.resolve('url-loader'),
170159
options: {
171160
limit: 10000,
172161
name: 'static/media/[name].[hash:8].[ext]',
@@ -176,7 +165,7 @@ module.exports = {
176165
{
177166
test: /\.(js|jsx)$/,
178167
include: paths.appSrc,
179-
loader: 'babel-loader',
168+
loader: require.resolve('babel-loader'),
180169
options: {
181170
// @remove-on-eject-begin
182171
babelrc: false,
@@ -196,15 +185,15 @@ module.exports = {
196185
{
197186
test: /\.css$/,
198187
use: [
199-
'style-loader',
188+
require.resolve('style-loader'),
200189
{
201-
loader: 'css-loader',
190+
loader: require.resolve('css-loader'),
202191
options: {
203192
importLoaders: 1,
204193
},
205194
},
206195
{
207-
loader: 'postcss-loader',
196+
loader: require.resolve('postcss-loader'),
208197
options: {
209198
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
210199
plugins: () => [

packages/react-scripts/config/webpack.config.prod.js

+8-19
Original file line numberDiff line numberDiff line change
@@ -95,17 +95,6 @@ module.exports = {
9595
'react-native': 'react-native-web',
9696
},
9797
},
98-
// @remove-on-eject-begin
99-
// Resolve loaders (webpack plugins for CSS, images, transpilation) from the
100-
// directory of `react-scripts` itself rather than the project directory.
101-
resolveLoader: {
102-
modules: [
103-
paths.ownNodeModules,
104-
// Lerna hoists everything, so we need to look in our app directory
105-
paths.appNodeModules,
106-
],
107-
},
108-
// @remove-on-eject-end
10998
module: {
11099
strictExportPresence: true,
111100
rules: [
@@ -124,13 +113,13 @@ module.exports = {
124113
// TODO: consider separate config for production,
125114
// e.g. to enable no-console and no-debugger only in production.
126115
baseConfig: {
127-
extends: ['react-app'],
116+
extends: [require.resolve('eslint-config-react-app')],
128117
},
129118
ignore: false,
130119
useEslintrc: false,
131120
// @remove-on-eject-end
132121
},
133-
loader: 'eslint-loader',
122+
loader: require.resolve('eslint-loader'),
134123
},
135124
],
136125
include: paths.appSrc,
@@ -154,7 +143,7 @@ module.exports = {
154143
/\.jpe?g$/,
155144
/\.png$/,
156145
],
157-
loader: 'file-loader',
146+
loader: require.resolve('file-loader'),
158147
options: {
159148
name: 'static/media/[name].[hash:8].[ext]',
160149
},
@@ -163,7 +152,7 @@ module.exports = {
163152
// assets smaller than specified size as data URLs to avoid requests.
164153
{
165154
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
166-
loader: 'url-loader',
155+
loader: require.resolve('url-loader'),
167156
options: {
168157
limit: 10000,
169158
name: 'static/media/[name].[hash:8].[ext]',
@@ -173,7 +162,7 @@ module.exports = {
173162
{
174163
test: /\.(js|jsx)$/,
175164
include: paths.appSrc,
176-
loader: 'babel-loader',
165+
loader: require.resolve('babel-loader'),
177166
// @remove-on-eject-begin
178167
options: {
179168
babelrc: false,
@@ -198,17 +187,17 @@ module.exports = {
198187
loader: ExtractTextPlugin.extract(
199188
Object.assign(
200189
{
201-
fallback: 'style-loader',
190+
fallback: require.resolve('style-loader'),
202191
use: [
203192
{
204-
loader: 'css-loader',
193+
loader: require.resolve('css-loader'),
205194
options: {
206195
importLoaders: 1,
207196
minimize: true,
208197
},
209198
},
210199
{
211-
loader: 'postcss-loader',
200+
loader: require.resolve('postcss-loader'),
212201
options: {
213202
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
214203
plugins: () => [

0 commit comments

Comments
 (0)