Skip to content
Permalink
Browse files

fix(config): build url error

  • Loading branch information...
wengkhing
wengkhing committed Jan 16, 2018
1 parent 94053a4 commit ee7747c2dcc8b8b983c9b6fbf9775eedee6f50b2
@@ -3,11 +3,12 @@
# dependencies
/node_modules

# testing
/coverage

# production
/build
/demo

# testing
/coverage

# misc
.DS_Store
@@ -1,17 +1,17 @@
'use strict';
'use strict'

const fs = require('fs');
const path = require('path');
const paths = require('./paths');
const fs = require('fs')
const path = require('path')
const paths = require('./paths')

// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')];
delete require.cache[require.resolve('./paths')]

const NODE_ENV = process.env.NODE_ENV;
const NODE_ENV = process.env.NODE_ENV
if (!NODE_ENV) {
throw new Error(
'The NODE_ENV environment variable is required but was not specified.'
);
)
}

// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
@@ -22,8 +22,8 @@ var dotenvFiles = [
// since normally you expect tests to produce the same
// results for everyone
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
paths.dotenv,
].filter(Boolean);
paths.dotenv
].filter(Boolean)

// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
@@ -32,10 +32,10 @@ var dotenvFiles = [
dotenvFiles.forEach(dotenvFile => {
if (fs.existsSync(dotenvFile)) {
require('dotenv').config({
path: dotenvFile,
});
path: dotenvFile
})
}
});
})

// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
@@ -46,45 +46,45 @@ dotenvFiles.forEach(dotenvFile => {
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
const appDirectory = fs.realpathSync(process.cwd());
const appDirectory = fs.realpathSync(process.cwd())
process.env.NODE_PATH = (process.env.NODE_PATH || '')
.split(path.delimiter)
.filter(folder => folder && !path.isAbsolute(folder))
.map(folder => path.resolve(appDirectory, folder))
.join(path.delimiter);
.join(path.delimiter)

// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in Webpack configuration.
const REACT_APP = /^REACT_APP_/i;
const REACT_APP = /^REACT_APP_/i

function getClientEnvironment(publicUrl) {
function getClientEnvironment (publicUrl) {
const raw = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
env[key] = process.env[key]
return env
},
{
{
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development',
NODE_ENV: process.env.NODE_ENV || 'development',
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
PUBLIC_URL: publicUrl,
}
);
PUBLIC_URL: publicUrl
}
)
// Stringify all values so we can feed into Webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
env[key] = JSON.stringify(raw[key])
return env
}, {})
}

return { raw, stringified };
return { raw, stringified }
}

module.exports = getClientEnvironment;
module.exports = getClientEnvironment
@@ -1,14 +1,14 @@
'use strict';
'use strict'

// This is a custom Jest transformer turning style imports into empty objects.
// http://facebook.github.io/jest/docs/tutorial-webpack.html

module.exports = {
process() {
return 'module.exports = {};';
process () {
return 'module.exports = {};'
},
getCacheKey() {
getCacheKey () {
// The output is always the same.
return 'cssTransform';
},
};
return 'cssTransform'
}
}
@@ -1,12 +1,12 @@
'use strict';
'use strict'

const path = require('path');
const path = require('path')

// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/tutorial-webpack.html

module.exports = {
process(src, filename) {
return `module.exports = ${JSON.stringify(path.basename(filename))};`;
},
};
process (src, filename) {
return `module.exports = ${JSON.stringify(path.basename(filename))};`
}
}
@@ -1,41 +1,41 @@
'use strict';
'use strict'

const path = require('path');
const fs = require('fs');
const url = require('url');
const path = require('path')
const fs = require('fs')
const url = require('url')

// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebookincubator/create-react-app/issues/637
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
const appDirectory = fs.realpathSync(process.cwd())
const resolveApp = relativePath => path.resolve(appDirectory, relativePath)

const envPublicUrl = process.env.PUBLIC_URL;
const envPublicUrl = process.env.PUBLIC_URL

function ensureSlash(path, needsSlash) {
const hasSlash = path.endsWith('/');
function ensureSlash (path, needsSlash) {
const hasSlash = path.endsWith('/')
if (hasSlash && !needsSlash) {
return path.substr(path, path.length - 1);
return path.substr(path, path.length - 1)
} else if (!hasSlash && needsSlash) {
return `${path}/`;
return `${path}/`
} else {
return path;
return path
}
}

const getPublicUrl = appPackageJson =>
envPublicUrl || require(appPackageJson).homepage;
envPublicUrl || require(appPackageJson).homepage

// We use `PUBLIC_URL` environment variable or "homepage" field to infer
// "public path" at which the app is served.
// Webpack needs to know it to put the right <script> hrefs into HTML even in
// single-page apps that may serve index.html for nested URLs like /todos/42.
// We can't use a relative path in HTML because we don't want to load something
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
function getServedPath (appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson)
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
return ensureSlash(servedUrl, true);
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/')
return ensureSlash(servedUrl, true)
}

// config after eject: we're in ./config/
@@ -60,5 +60,5 @@ module.exports = {

// CRL: New paths for library
appLibIndexJs: resolveApp('src/lib/index.js'),
appLibSrc: resolveApp('src/lib'),
};
appLibSrc: resolveApp('src/lib')
}
@@ -1,22 +1,22 @@
'use strict';
'use strict'

if (typeof Promise === 'undefined') {
// Rejection tracking prevents a common issue where React gets into an
// inconsistent state due to an error, but it gets swallowed by a Promise,
// and the user has no idea what causes React's erratic future behavior.
require('promise/lib/rejection-tracking').enable();
window.Promise = require('promise/lib/es6-extensions.js');
require('promise/lib/rejection-tracking').enable()
window.Promise = require('promise/lib/es6-extensions.js')
}

// fetch() polyfill for making API calls.
require('whatwg-fetch');
require('whatwg-fetch')

// Object.assign() is commonly used with React.
// It will use the native implementation if it's present and isn't buggy.
Object.assign = require('object-assign');
Object.assign = require('object-assign')

// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
// We don't polyfill it in the browser--this is user's responsibility.
if (process.env.NODE_ENV === 'test') {
require('raf').polyfill(global);
require('raf').polyfill(global)
}
@@ -1,40 +1,39 @@


const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const paths = require('./paths');
const getClientEnvironment = require('./env');
const autoprefixer = require('autoprefixer')
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const eslintFormatter = require('react-dev-utils/eslintFormatter')
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
const paths = require('./paths')
const getClientEnvironment = require('./env')

// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
const publicPath = paths.servedPath;
const publicPath = paths.servedPath
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
const shouldUseRelativeAssetPaths = publicPath === './'
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = '.';
const publicUrl = '.'
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
const env = getClientEnvironment(publicUrl)

// Assert this just to be safe.
// Development builds of React are slow and not intended for production.
if (env.stringified['process.env'].NODE_ENV !== '"production"') {
throw new Error('Production builds must have NODE_ENV=production.');
throw new Error('Production builds must have NODE_ENV=production.')
}

// Note: defined here because it will be used more than once.
const cssFilename = 'css/index.css';
const cssFilename = 'css/index.css'

// ExtractTextPlugin expects the build output to be flat.
// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
@@ -43,7 +42,7 @@ const cssFilename = 'css/index.css';
const extractTextPluginOptions = shouldUseRelativeAssetPaths
? // Making sure that the publicPath goes back to to build folder.
{ publicPath: Array(cssFilename.split('/').length).join('../') }
: {};
: {}

// This is the production configuration.
// It compiles slowly and is focused on producing a fast and minimal bundle.
@@ -276,4 +275,4 @@ module.exports = {
tls: 'empty',
child_process: 'empty'
}
};
}
Oops, something went wrong.

0 comments on commit ee7747c

Please sign in to comment.
You can’t perform that action at this time.