Skip to content

Commit 42026a0

Browse files
TimerTimer
authored
Correctly lookup assets when using a relative build directory (facebook#5163)
* Correctly lookup assets when using a relative build directory * Hah, var ... * Add e2e test for relative paths * Format svg
1 parent bf408bd commit 42026a0

File tree

8 files changed

+80
-1
lines changed

8 files changed

+80
-1
lines changed

‎fixtures/smoke/relative-paths/index.test.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const fs = require('fs-extra');
2+
const globby = require('globby');
3+
const path = require('path');
4+
const {
5+
bootstrap,
6+
isSuccessfulDevelopment,
7+
isSuccessfulProduction,
8+
} = require('../../utils');
9+
beforeEach(async () => {
10+
await bootstrap({ directory: global.testDirectory, template: __dirname });
11+
});
12+
13+
describe('relative paths', () => {
14+
// TODO: enable when development relative paths are supported
15+
xit('builds in development', async () => {
16+
await isSuccessfulDevelopment({ directory: global.testDirectory });
17+
});
18+
it('builds in production', async () => {
19+
await isSuccessfulProduction({ directory: global.testDirectory });
20+
21+
const buildDir = path.join(global.testDirectory, 'build');
22+
const cssFile = path.join(
23+
buildDir,
24+
globby.sync('**/*.css', { cwd: buildDir }).pop()
25+
);
26+
const svgFile = path.join(
27+
buildDir,
28+
globby.sync('**/*.svg', { cwd: buildDir }).pop()
29+
);
30+
const desiredPath = /url\((.+?)\)/
31+
.exec(fs.readFileSync(cssFile, 'utf8'))
32+
.pop();
33+
expect(path.resolve(path.join(path.dirname(cssFile), desiredPath))).toBe(
34+
path.resolve(svgFile)
35+
);
36+
});
37+
});

‎fixtures/smoke/relative-paths/package.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"dependencies": {
3+
"react-scripts": "latest"
4+
},
5+
"homepage": "."
6+
}

‎fixtures/smoke/relative-paths/public/index.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>React App</title>
5+
</head>
6+
<body>
7+
<div id="root"></div>
8+
</body>
9+
</html>

‎fixtures/smoke/relative-paths/src/index.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.RootSvg:before {
2+
display: block;
3+
content: ' ';
4+
background-image: url(./logo.svg);
5+
background-size: 28px 28px;
6+
height: 28px;
7+
width: 28px;
8+
}

‎fixtures/smoke/relative-paths/src/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './index.css';

‎fixtures/smoke/relative-paths/src/logo.svg

+8
Loading

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"execa": "1.0.0",
2424
"fs-extra": "^7.0.0",
2525
"get-port": "^4.0.0",
26+
"globby": "^8.0.1",
2627
"husky": "1.0.0-rc.15",
2728
"jest": "^23.6.0",
2829
"lerna": "2.9.1",

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

+10-1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
2828
// Webpack uses `publicPath` to determine where the app is being served from.
2929
// It requires a trailing slash, or the file assets will get an incorrect path.
3030
const publicPath = paths.servedPath;
31+
// Some apps do not use client-side routing with pushState.
32+
// For these, "homepage" can be set to "." to enable relative asset paths.
33+
const shouldUseRelativeAssetPaths = publicPath === './';
3134
// Source maps are resource heavy and can cause out of memory issue for large source files.
3235
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
3336
// `publicUrl` is just like `publicPath`, but we will provide it to our app
@@ -52,7 +55,13 @@ const sassModuleRegex = /\.module\.(scss|sass)$/;
5255
// common function to get style loaders
5356
const getStyleLoaders = (cssOptions, preProcessor) => {
5457
const loaders = [
55-
MiniCssExtractPlugin.loader,
58+
{
59+
loader: MiniCssExtractPlugin.loader,
60+
options: Object.assign(
61+
{},
62+
shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
63+
),
64+
},
5665
{
5766
loader: require.resolve('css-loader'),
5867
options: cssOptions,

0 commit comments

Comments
 (0)