diff --git a/.npmrc b/.npmrc new file mode 100644 index 000000000..fd8c09f54 --- /dev/null +++ b/.npmrc @@ -0,0 +1,2 @@ +registry=https://swisslife.pkgs.visualstudio.com/_packaging/NpmMain/npm/registry +always-auth=true \ No newline at end of file diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 00fbb5e16..9ff7c08cf 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -73,10 +73,14 @@ const program = new commander.Command(packageJson.name) ); console.log(` - a specific npm version: ${chalk.green('0.8.2')}`); console.log( - ` - a custom fork published on npm: ${chalk.green('my-react-scripts')}` + ` - a custom fork published on npm: ${chalk.green( + 'my-react-scripts' + )}` ); console.log( - ` - a .tgz archive: ${chalk.green('https://mysite.com/my-react-scripts-0.8.2.tgz')}` + ` - a .tgz archive: ${chalk.green( + 'https://mysite.com/my-react-scripts-0.8.2.tgz' + )}` ); console.log( ` It is not needed unless you specifically want to use a fork.` @@ -86,7 +90,9 @@ const program = new commander.Command(packageJson.name) ` If you have any problems, do not hesitate to file an issue:` ); console.log( - ` ${chalk.cyan('https://github.com/facebookincubator/create-react-app/issues/new')}` + ` ${chalk.cyan( + 'https://github.com/facebookincubator/create-react-app/issues/new' + )}` ); console.log(); }) @@ -265,15 +271,19 @@ function run( console.log('Installing packages. This might take a couple of minutes.'); getPackageName(packageToInstall) - .then(packageName => checkIfOnline(useYarn).then(isOnline => ({ - isOnline: isOnline, - packageName: packageName, - }))) + .then(packageName => + checkIfOnline(useYarn).then(isOnline => ({ + isOnline: isOnline, + packageName: packageName, + })) + ) .then(info => { const isOnline = info.isOnline; const packageName = info.packageName; console.log( - `Installing ${chalk.cyan('react')}, ${chalk.cyan('react-dom')}, and ${chalk.cyan(packageName)}...` + `Installing ${chalk.cyan('react')}, ${chalk.cyan( + 'react-dom' + )}, and ${chalk.cyan(packageName)}...` ); console.log(); @@ -341,7 +351,9 @@ function run( if (!remainingFiles.length) { // Delete target folder if empty console.log( - `Deleting ${chalk.cyan(`${appName} /`)} from ${chalk.cyan(path.resolve(root, '..'))}` + `Deleting ${chalk.cyan(`${appName} /`)} from ${chalk.cyan( + path.resolve(root, '..') + )}` ); process.chdir(path.resolve(root, '..')); fs.removeSync(path.join(root)); @@ -429,7 +441,9 @@ function getPackageName(installPackage) { /^.+\/(.+?)(?:-\d+.+)?\.tgz$/ )[1]; console.log( - `Based on the filename, assuming it is "${chalk.cyan(assumedProjectName)}"` + `Based on the filename, assuming it is "${chalk.cyan( + assumedProjectName + )}"` ); return Promise.resolve(assumedProjectName); }); @@ -451,7 +465,9 @@ function checkNpmVersion() { let hasMinNpm = false; let npmVersion = null; try { - npmVersion = execSync('npm --version').toString().trim(); + npmVersion = execSync('npm --version') + .toString() + .trim(); hasMinNpm = semver.gte(npmVersion, '3.0.0'); } catch (err) { // ignore @@ -492,7 +508,9 @@ function checkAppName(appName) { const validationResult = validateProjectName(appName); if (!validationResult.validForNewPackages) { console.error( - `Could not create a project called ${chalk.red(`"${appName}"`)} because of npm naming restrictions:` + `Could not create a project called ${chalk.red( + `"${appName}"` + )} because of npm naming restrictions:` ); printValidationResults(validationResult.errors); printValidationResults(validationResult.warnings); @@ -504,7 +522,9 @@ function checkAppName(appName) { if (dependencies.indexOf(appName) >= 0) { console.error( chalk.red( - `We cannot create a project called ${chalk.green(appName)} because a dependency with the same name exists.\n` + + `We cannot create a project called ${chalk.green( + appName + )} because a dependency with the same name exists.\n` + `Due to the way npm works, the following names are not allowed:\n\n` ) + chalk.cyan(dependencies.map(depName => ` ${depName}`).join('\n')) + @@ -526,7 +546,9 @@ function makeCaretRange(dependencies, name) { if (!semver.validRange(patchedVersion)) { console.error( - `Unable to patch ${name} dependency version because version ${chalk.red(version)} will become invalid ${chalk.red(patchedVersion)}` + `Unable to patch ${name} dependency version because version ${chalk.red( + version + )} will become invalid ${chalk.red(patchedVersion)}` ); patchedVersion = version; } @@ -633,15 +655,21 @@ function checkThatNpmCanReadCwd() { chalk.red( `Could not start an npm process in the right directory.\n\n` + `The current directory is: ${chalk.bold(cwd)}\n` + - `However, a newly started npm process runs in: ${chalk.bold(npmCWD)}\n\n` + + `However, a newly started npm process runs in: ${chalk.bold( + npmCWD + )}\n\n` + `This is probably caused by a misconfigured system terminal shell.` ) ); if (process.platform === 'win32') { console.error( chalk.red(`On Windows, this can usually be fixed by running:\n\n`) + - ` ${chalk.cyan('reg')} delete "HKCU\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n` + - ` ${chalk.cyan('reg')} delete "HKLM\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n\n` + + ` ${chalk.cyan( + 'reg' + )} delete "HKCU\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n` + + ` ${chalk.cyan( + 'reg' + )} delete "HKLM\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n\n` + chalk.red(`Try to run the above two lines in the terminal.\n`) + chalk.red( `To learn more about this problem, read: https://blogs.msdn.microsoft.com/oldnewthing/20071121-00/?p=24433/` diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index 9a1ec2276..adcdb86bc 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -235,7 +235,8 @@ module.exports = { { object: 'System', property: 'import', - message: 'Please use import() instead. More info: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting', + message: + 'Please use import() instead. More info: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting', }, ], diff --git a/packages/react-dev-utils/FileSizeReporter.js b/packages/react-dev-utils/FileSizeReporter.js index 17128c9bd..01ce52c6b 100644 --- a/packages/react-dev-utils/FileSizeReporter.js +++ b/packages/react-dev-utils/FileSizeReporter.js @@ -120,15 +120,12 @@ function measureFileSizesBeforeBuild(buildFolder) { if (!err && fileNames) { sizes = fileNames .filter(fileName => /\.(js|css)$/.test(fileName)) - .reduce( - (memo, fileName) => { - var contents = fs.readFileSync(fileName); - var key = removeFileNameHash(buildFolder, fileName); - memo[key] = gzipSize(contents); - return memo; - }, - {} - ); + .reduce((memo, fileName) => { + var contents = fs.readFileSync(fileName); + var key = removeFileNameHash(buildFolder, fileName); + memo[key] = gzipSize(contents); + return memo; + }, {}); } resolve({ root: buildFolder, diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js index 39cd89030..101a30a1f 100644 --- a/packages/react-dev-utils/ModuleScopePlugin.js +++ b/packages/react-dev-utils/ModuleScopePlugin.js @@ -50,13 +50,24 @@ class ModuleScopePlugin { // Error if in a parent directory of src/ const requestRelative = path.relative(appSrc, requestFullPath); if ( - requestRelative.startsWith('../') || requestRelative.startsWith('..\\') + requestRelative.startsWith('../') || + requestRelative.startsWith('..\\') ) { callback( new Error( - `You attempted to import ${chalk.cyan(request.__innerRequest_request)} which falls outside of the project ${chalk.cyan('src/')} directory. ` + - `Relative imports outside of ${chalk.cyan('src/')} are not supported. ` + - `You can either move it inside ${chalk.cyan('src/')}, or add a symlink to it from project's ${chalk.cyan('node_modules/')}.` + `You attempted to import ${chalk.cyan( + request.__innerRequest_request + )} which falls outside of the project ${chalk.cyan( + 'src/' + )} directory. ` + + `Relative imports outside of ${chalk.cyan( + 'src/' + )} are not supported. ` + + `You can either move it inside ${chalk.cyan( + 'src/' + )}, or add a symlink to it from project's ${chalk.cyan( + 'node_modules/' + )}.` ), request ); diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index 6bc91ab03..f19582e12 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/packages/react-dev-utils/WebpackDevServerUtils.js @@ -35,18 +35,20 @@ if (isSmokeTest) { } function prepareUrls(protocol, host, port) { - const formatUrl = hostname => url.format({ - protocol, - hostname, - port, - pathname: '/', - }); - const prettyPrintUrl = hostname => url.format({ - protocol, - hostname, - port: chalk.bold(port), - pathname: '/', - }); + const formatUrl = hostname => + url.format({ + protocol, + hostname, + port, + pathname: '/', + }); + const prettyPrintUrl = hostname => + url.format({ + protocol, + hostname, + port: chalk.bold(port), + pathname: '/', + }); const isUnspecifiedHost = host === '0.0.0.0' || host === '::'; let prettyHost, lanUrlForConfig, lanUrlForTerminal; @@ -320,9 +322,11 @@ function prepareProxy(proxy, appPublicFolder) { // However API calls like `fetch()` won’t generally accept text/html. // If this heuristic doesn’t work well for you, use a custom `proxy` object. context: function(pathname, req) { - return mayProxy(pathname) && + return ( + mayProxy(pathname) && req.headers.accept && - req.headers.accept.indexOf('text/html') === -1; + req.headers.accept.indexOf('text/html') === -1 + ); }, onProxyReq: proxyReq => { // Browers may send Origin headers even with same-origin @@ -378,39 +382,40 @@ function prepareProxy(proxy, appPublicFolder) { function choosePort(host, defaultPort) { return detect(defaultPort, host).then( - port => new Promise(resolve => { - if (port === defaultPort) { - return resolve(port); - } - const message = process.platform !== 'win32' && - defaultPort < 1024 && - !isRoot() - ? `Admin permissions are required to run a server on a port below 1024.` - : `Something is already running on port ${defaultPort}.`; - if (isInteractive) { - clearConsole(); - const existingProcess = getProcessForPort(defaultPort); - const question = { - type: 'confirm', - name: 'shouldChangePort', - message: chalk.yellow( - message + - `${existingProcess ? ` Probably:\n ${existingProcess}` : ''}` - ) + '\n\nWould you like to run the app on another port instead?', - default: true, - }; - inquirer.prompt(question).then(answer => { - if (answer.shouldChangePort) { - resolve(port); - } else { - resolve(null); - } - }); - } else { - console.log(chalk.red(message)); - resolve(null); - } - }), + port => + new Promise(resolve => { + if (port === defaultPort) { + return resolve(port); + } + const message = + process.platform !== 'win32' && defaultPort < 1024 && !isRoot() + ? `Admin permissions are required to run a server on a port below 1024.` + : `Something is already running on port ${defaultPort}.`; + if (isInteractive) { + clearConsole(); + const existingProcess = getProcessForPort(defaultPort); + const question = { + type: 'confirm', + name: 'shouldChangePort', + message: + chalk.yellow( + message + + `${existingProcess ? ` Probably:\n ${existingProcess}` : ''}` + ) + '\n\nWould you like to run the app on another port instead?', + default: true, + }; + inquirer.prompt(question).then(answer => { + if (answer.shouldChangePort) { + resolve(port); + } else { + resolve(null); + } + }); + } else { + console.log(chalk.red(message)); + resolve(null); + } + }), err => { throw new Error( chalk.red(`Could not find an open port at ${chalk.bold(host)}.`) + diff --git a/packages/react-dev-utils/eslintFormatter.js b/packages/react-dev-utils/eslintFormatter.js index 3899fdab4..a269ccc82 100644 --- a/packages/react-dev-utils/eslintFormatter.js +++ b/packages/react-dev-utils/eslintFormatter.js @@ -80,7 +80,8 @@ function formatter(results) { // it here because we always show at most one error, and // we can only be sure it's an ESLint error before exiting // this function. - output += 'Search for the ' + + output += + 'Search for the ' + chalk.underline(chalk.red('keywords')) + ' to learn more about each error.'; } diff --git a/packages/react-dev-utils/getProcessForPort.js b/packages/react-dev-utils/getProcessForPort.js index bcece718b..932f3e5bf 100644 --- a/packages/react-dev-utils/getProcessForPort.js +++ b/packages/react-dev-utils/getProcessForPort.js @@ -68,10 +68,12 @@ function getProcessForPort(port) { var processId = getProcessIdOnPort(port); var directory = getDirectoryOfProcessById(processId); var command = getProcessCommand(processId, directory); - return chalk.cyan(command) + + return ( + chalk.cyan(command) + chalk.grey(' (pid ' + processId + ')\n') + chalk.blue(' in ') + - chalk.cyan(directory); + chalk.cyan(directory) + ); } catch (e) { return null; } diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js index ab84b1482..ba16827e6 100644 --- a/packages/react-dev-utils/launchEditor.js +++ b/packages/react-dev-utils/launchEditor.js @@ -28,19 +28,30 @@ function isTerminalEditor(editor) { // of the app every time const COMMON_EDITORS_OSX = { '/Applications/Atom.app/Contents/MacOS/Atom': 'atom', - '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta': '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta', + '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta': + '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta', '/Applications/Brackets.app/Contents/MacOS/Brackets': 'brackets', - '/Applications/Sublime Text.app/Contents/MacOS/Sublime Text': '/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl', - '/Applications/Sublime Text 2.app/Contents/MacOS/Sublime Text 2': '/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl', + '/Applications/Sublime Text.app/Contents/MacOS/Sublime Text': + '/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl', + '/Applications/Sublime Text 2.app/Contents/MacOS/Sublime Text 2': + '/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl', '/Applications/Visual Studio Code.app/Contents/MacOS/Electron': 'code', - '/Applications/AppCode.app/Contents/MacOS/appcode': '/Applications/AppCode.app/Contents/MacOS/appcode', - '/Applications/CLion.app/Contents/MacOS/clion': '/Applications/CLion.app/Contents/MacOS/clion', - '/Applications/IntelliJ IDEA.app/Contents/MacOS/idea': '/Applications/IntelliJ IDEA.app/Contents/MacOS/idea', - '/Applications/PhpStorm.app/Contents/MacOS/phpstorm': '/Applications/PhpStorm.app/Contents/MacOS/phpstorm', - '/Applications/PyCharm.app/Contents/MacOS/pycharm': '/Applications/PyCharm.app/Contents/MacOS/pycharm', - '/Applications/PyCharm CE.app/Contents/MacOS/pycharm': '/Applications/PyCharm CE.app/Contents/MacOS/pycharm', - '/Applications/RubyMine.app/Contents/MacOS/rubymine': '/Applications/RubyMine.app/Contents/MacOS/rubymine', - '/Applications/WebStorm.app/Contents/MacOS/webstorm': '/Applications/WebStorm.app/Contents/MacOS/webstorm', + '/Applications/AppCode.app/Contents/MacOS/appcode': + '/Applications/AppCode.app/Contents/MacOS/appcode', + '/Applications/CLion.app/Contents/MacOS/clion': + '/Applications/CLion.app/Contents/MacOS/clion', + '/Applications/IntelliJ IDEA.app/Contents/MacOS/idea': + '/Applications/IntelliJ IDEA.app/Contents/MacOS/idea', + '/Applications/PhpStorm.app/Contents/MacOS/phpstorm': + '/Applications/PhpStorm.app/Contents/MacOS/phpstorm', + '/Applications/PyCharm.app/Contents/MacOS/pycharm': + '/Applications/PyCharm.app/Contents/MacOS/pycharm', + '/Applications/PyCharm CE.app/Contents/MacOS/pycharm': + '/Applications/PyCharm CE.app/Contents/MacOS/pycharm', + '/Applications/RubyMine.app/Contents/MacOS/rubymine': + '/Applications/RubyMine.app/Contents/MacOS/rubymine', + '/Applications/WebStorm.app/Contents/MacOS/webstorm': + '/Applications/WebStorm.app/Contents/MacOS/webstorm', }; const COMMON_EDITORS_LINUX = { diff --git a/packages/react-dev-utils/openBrowser.js b/packages/react-dev-utils/openBrowser.js index 2683b377d..cb9f32c6a 100644 --- a/packages/react-dev-utils/openBrowser.js +++ b/packages/react-dev-utils/openBrowser.js @@ -66,7 +66,8 @@ function startBrowserProcess(browser, url) { // requested a different browser, we can try opening // Chrome with AppleScript. This lets us reuse an // existing tab when possible instead of creating a new one. - const shouldTryOpenChromeWithAppleScript = process.platform === 'darwin' && + const shouldTryOpenChromeWithAppleScript = + process.platform === 'darwin' && (typeof browser !== 'string' || browser === OSX_CHROME); if (shouldTryOpenChromeWithAppleScript) { diff --git a/packages/react-dev-utils/printHostingInstructions.js b/packages/react-dev-utils/printHostingInstructions.js index 0c5ca4529..4a080dba2 100644 --- a/packages/react-dev-utils/printHostingInstructions.js +++ b/packages/react-dev-utils/printHostingInstructions.js @@ -23,10 +23,14 @@ function printHostingInstructions( if (publicUrl && publicUrl.indexOf('.github.io/') !== -1) { // "homepage": "http://user.github.io/project" console.log( - `The project was built assuming it is hosted at ${chalk.green(publicPathname)}.` + `The project was built assuming it is hosted at ${chalk.green( + publicPathname + )}.` ); console.log( - `You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.` + `You can control this with the ${chalk.green( + 'homepage' + )} field in your ${chalk.cyan('package.json')}.` ); console.log(); console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`); @@ -48,10 +52,14 @@ function printHostingInstructions( console.log(` ${chalk.yellow('"scripts"')}: {`); console.log(` ${chalk.dim('// ...')}`); console.log( - ` ${chalk.yellow('"predeploy"')}: ${chalk.yellow('"npm run build",')}` + ` ${chalk.yellow('"predeploy"')}: ${chalk.yellow( + '"npm run build",' + )}` ); console.log( - ` ${chalk.yellow('"deploy"')}: ${chalk.yellow('"gh-pages -d build"')}` + ` ${chalk.yellow('"deploy"')}: ${chalk.yellow( + '"gh-pages -d build"' + )}` ); console.log(' }'); console.log(); @@ -63,10 +71,14 @@ function printHostingInstructions( } else if (publicPath !== '/') { // "homepage": "http://mywebsite.com/project" console.log( - `The project was built assuming it is hosted at ${chalk.green(publicPath)}.` + `The project was built assuming it is hosted at ${chalk.green( + publicPath + )}.` ); console.log( - `You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.` + `You can control this with the ${chalk.green( + 'homepage' + )} field in your ${chalk.cyan('package.json')}.` ); console.log(); console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`); @@ -75,10 +87,14 @@ function printHostingInstructions( if (publicUrl) { // "homepage": "http://mywebsite.com" console.log( - `The project was built assuming it is hosted at ${chalk.green(publicUrl)}.` + `The project was built assuming it is hosted at ${chalk.green( + publicUrl + )}.` ); console.log( - `You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.` + `You can control this with the ${chalk.green( + 'homepage' + )} field in your ${chalk.cyan('package.json')}.` ); console.log(); } else { @@ -87,12 +103,16 @@ function printHostingInstructions( 'The project was built assuming it is hosted at the server root.' ); console.log( - `To override this, specify the ${chalk.green('homepage')} in your ${chalk.cyan('package.json')}.` + `To override this, specify the ${chalk.green( + 'homepage' + )} in your ${chalk.cyan('package.json')}.` ); console.log('For example, add this to build it for GitHub Pages:'); console.log(); console.log( - ` ${chalk.green('"homepage"')} ${chalk.cyan(':')} ${chalk.green('"http://myname.github.io/myapp"')}${chalk.cyan(',')}` + ` ${chalk.green('"homepage"')} ${chalk.cyan(':')} ${chalk.green( + '"http://myname.github.io/myapp"' + )}${chalk.cyan(',')}` ); console.log(); } diff --git a/packages/react-error-overlay/build.js b/packages/react-error-overlay/build.js index b49f3da18..592da141f 100644 --- a/packages/react-error-overlay/build.js +++ b/packages/react-error-overlay/build.js @@ -14,7 +14,8 @@ const chokidar = require('chokidar'); const args = process.argv.slice(2); const watchMode = args[0] === '--watch' || args[0] === '-w'; -const isCI = process.env.CI && +const isCI = + process.env.CI && (typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false'); diff --git a/packages/react-error-overlay/src/__tests__/mapper.js b/packages/react-error-overlay/src/__tests__/mapper.js index 393633f98..bd733487f 100644 --- a/packages/react-error-overlay/src/__tests__/mapper.js +++ b/packages/react-error-overlay/src/__tests__/mapper.js @@ -12,7 +12,8 @@ import { resolve } from 'path'; test('basic error; 0 context', async () => { expect.assertions(1); - const error = 'TypeError: document.body.missing is not a function\n at App.componentDidMount (http://localhost:3000/static/js/bundle.js:26122:21)\n at http://localhost:3000/static/js/bundle.js:30091:25\n at measureLifeCyclePerf (http://localhost:3000/static/js/bundle.js:29901:12)\n at http://localhost:3000/static/js/bundle.js:30090:11\n at CallbackQueue.notifyAll (http://localhost:3000/static/js/bundle.js:13256:22)\n at ReactReconcileTransaction.close (http://localhost:3000/static/js/bundle.js:35124:26)\n at ReactReconcileTransaction.closeAll (http://localhost:3000/static/js/bundle.js:7390:25)\n at ReactReconcileTransaction.perform (http://localhost:3000/static/js/bundle.js:7337:16)\n at batchedMountComponentIntoNode (http://localhost:3000/static/js/bundle.js:14204:15)\n at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:3000/static/js/bundle.js:7324:20)\n at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:33900:26)\n at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:2181:27)\n at Object._renderNewRootComponent (http://localhost:3000/static/js/bundle.js:14398:18)\n at Object._renderSubtreeIntoContainer (http://localhost:3000/static/js/bundle.js:14479:32)\n at Object.render (http://localhost:3000/static/js/bundle.js:14500:23)\n at Object.friendlySyntaxErrorLabel (http://localhost:3000/static/js/bundle.js:17287:20)\n at __webpack_require__ (http://localhost:3000/static/js/bundle.js:660:30)\n at fn (http://localhost:3000/static/js/bundle.js:84:20)\n at Object. (http://localhost:3000/static/js/bundle.js:41219:18)\n at __webpack_require__ (http://localhost:3000/static/js/bundle.js:660:30)\n at validateFormat (http://localhost:3000/static/js/bundle.js:709:39)\n at http://localhost:3000/static/js/bundle.js:712:10'; + const error = + 'TypeError: document.body.missing is not a function\n at App.componentDidMount (http://localhost:3000/static/js/bundle.js:26122:21)\n at http://localhost:3000/static/js/bundle.js:30091:25\n at measureLifeCyclePerf (http://localhost:3000/static/js/bundle.js:29901:12)\n at http://localhost:3000/static/js/bundle.js:30090:11\n at CallbackQueue.notifyAll (http://localhost:3000/static/js/bundle.js:13256:22)\n at ReactReconcileTransaction.close (http://localhost:3000/static/js/bundle.js:35124:26)\n at ReactReconcileTransaction.closeAll (http://localhost:3000/static/js/bundle.js:7390:25)\n at ReactReconcileTransaction.perform (http://localhost:3000/static/js/bundle.js:7337:16)\n at batchedMountComponentIntoNode (http://localhost:3000/static/js/bundle.js:14204:15)\n at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:3000/static/js/bundle.js:7324:20)\n at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:33900:26)\n at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:2181:27)\n at Object._renderNewRootComponent (http://localhost:3000/static/js/bundle.js:14398:18)\n at Object._renderSubtreeIntoContainer (http://localhost:3000/static/js/bundle.js:14479:32)\n at Object.render (http://localhost:3000/static/js/bundle.js:14500:23)\n at Object.friendlySyntaxErrorLabel (http://localhost:3000/static/js/bundle.js:17287:20)\n at __webpack_require__ (http://localhost:3000/static/js/bundle.js:660:30)\n at fn (http://localhost:3000/static/js/bundle.js:84:20)\n at Object. (http://localhost:3000/static/js/bundle.js:41219:18)\n at __webpack_require__ (http://localhost:3000/static/js/bundle.js:660:30)\n at validateFormat (http://localhost:3000/static/js/bundle.js:709:39)\n at http://localhost:3000/static/js/bundle.js:712:10'; fetch.mockResponseOnce( fs @@ -36,7 +37,8 @@ test('basic error; 0 context', async () => { test('default context (3)', async () => { expect.assertions(1); - const error = 'TypeError: document.body.missing is not a function\n at App.componentDidMount (http://localhost:3000/static/js/bundle.js:26122:21)'; + const error = + 'TypeError: document.body.missing is not a function\n at App.componentDidMount (http://localhost:3000/static/js/bundle.js:26122:21)'; fetch.mockResponseOnce( fs @@ -60,7 +62,8 @@ test('default context (3)', async () => { test('bad comes back same', async () => { expect.assertions(2); - const error = 'TypeError: document.body.missing is not a function\n at App.componentDidMount (A:1:2)'; + const error = + 'TypeError: document.body.missing is not a function\n at App.componentDidMount (A:1:2)'; const orig = parse(error); expect(orig).toEqual([ { diff --git a/packages/react-error-overlay/src/components/Collapsible.js b/packages/react-error-overlay/src/components/Collapsible.js index 0da3f6419..016f3c7a7 100644 --- a/packages/react-error-overlay/src/components/Collapsible.js +++ b/packages/react-error-overlay/src/components/Collapsible.js @@ -65,11 +65,9 @@ class Collapsible extends Component { collapsed ? collapsibleCollapsedStyle : collapsibleExpandedStyle } > - { - (collapsed ? '▶' : '▼') + - ` ${count} stack frames were ` + - (collapsed ? 'collapsed.' : 'expanded.') - } + {(collapsed ? '▶' : '▼') + + ` ${count} stack frames were ` + + (collapsed ? 'collapsed.' : 'expanded.')}
{this.props.children} diff --git a/packages/react-error-overlay/src/containers/CompileErrorContainer.js b/packages/react-error-overlay/src/containers/CompileErrorContainer.js index 8618978a8..9d1e399fd 100644 --- a/packages/react-error-overlay/src/containers/CompileErrorContainer.js +++ b/packages/react-error-overlay/src/containers/CompileErrorContainer.js @@ -40,9 +40,7 @@ class CompileErrorContainer extends PureComponent { > -
+
); } diff --git a/packages/react-error-overlay/src/containers/RuntimeError.js b/packages/react-error-overlay/src/containers/RuntimeError.js index 8d53942ae..1db2aba79 100644 --- a/packages/react-error-overlay/src/containers/RuntimeError.js +++ b/packages/react-error-overlay/src/containers/RuntimeError.js @@ -38,9 +38,8 @@ function RuntimeError({ errorRecord, editorHandler }: Props) { // Make header prettier const message = error.message; - let headerText = message.match(/^\w*:/) || !errorName - ? message - : errorName + ': ' + message; + let headerText = + message.match(/^\w*:/) || !errorName ? message : errorName + ': ' + message; headerText = headerText // TODO: maybe remove this prefix from fbjs? diff --git a/packages/react-error-overlay/src/containers/RuntimeErrorContainer.js b/packages/react-error-overlay/src/containers/RuntimeErrorContainer.js index d1d991d12..91d4a4f54 100644 --- a/packages/react-error-overlay/src/containers/RuntimeErrorContainer.js +++ b/packages/react-error-overlay/src/containers/RuntimeErrorContainer.js @@ -33,17 +33,19 @@ class RuntimeErrorContainer extends PureComponent { previous = () => { this.setState((state, props) => ({ - currentIndex: state.currentIndex > 0 - ? state.currentIndex - 1 - : props.errorRecords.length - 1, + currentIndex: + state.currentIndex > 0 + ? state.currentIndex - 1 + : props.errorRecords.length - 1, })); }; next = () => { this.setState((state, props) => ({ - currentIndex: state.currentIndex < props.errorRecords.length - 1 - ? state.currentIndex + 1 - : 0, + currentIndex: + state.currentIndex < props.errorRecords.length - 1 + ? state.currentIndex + 1 + : 0, })); }; @@ -63,13 +65,14 @@ class RuntimeErrorContainer extends PureComponent { return ( - {totalErrors > 1 && + {totalErrors > 1 && ( } + /> + )} { } } - const canOpenInEditor = this.getErrorLocation() !== null && - this.props.editorHandler !== null; + const canOpenInEditor = + this.getErrorLocation() !== null && this.props.editorHandler !== null; return (
{functionName}
@@ -170,7 +170,7 @@ class StackFrame extends Component { {url}
- {codeBlockProps && + {codeBlockProps && ( { - } + + )}
); } diff --git a/packages/react-error-overlay/src/containers/StackTrace.js b/packages/react-error-overlay/src/containers/StackTrace.js index b936b3952..abec286a3 100644 --- a/packages/react-error-overlay/src/containers/StackTrace.js +++ b/packages/react-error-overlay/src/containers/StackTrace.js @@ -33,14 +33,16 @@ class StackTrace extends Component { renderFrames() { const { stackFrames, errorName, contextSize, editorHandler } = this.props; const renderedFrames = []; - let hasReachedAppCode = false, currentBundle = [], bundleCount = 0; + let hasReachedAppCode = false, + currentBundle = [], + bundleCount = 0; stackFrames.forEach((frame, index) => { const { fileName, _originalFileName: sourceFileName } = frame; const isInternalUrl = isInternalFile(sourceFileName, fileName); const isThrownIntentionally = !isBultinErrorName(errorName); - const shouldCollapse = isInternalUrl && - (isThrownIntentionally || hasReachedAppCode); + const shouldCollapse = + isInternalUrl && (isThrownIntentionally || hasReachedAppCode); if (!isInternalUrl) { hasReachedAppCode = true; diff --git a/packages/react-error-overlay/src/iframeScript.js b/packages/react-error-overlay/src/iframeScript.js index 0c75d0e55..3da820264 100644 --- a/packages/react-error-overlay/src/iframeScript.js +++ b/packages/react-error-overlay/src/iframeScript.js @@ -15,14 +15,12 @@ import { applyStyles } from './utils/dom/css'; let iframeRoot = null; -function render( - { - currentBuildError, - currentRuntimeErrorRecords, - dismissRuntimeErrors, - editorHandler, - } -) { +function render({ + currentBuildError, + currentRuntimeErrorRecords, + dismissRuntimeErrors, + editorHandler, +}) { if (currentBuildError) { return ( { - try { - if (typeof options.onError === 'function') { - options.onError.call(null); - } - } finally { - handleRuntimeError(errorRecord); + listenToRuntimeErrors(errorRecord => { + try { + if (typeof options.onError === 'function') { + options.onError.call(null); } - }, - options.filename - ); + } finally { + handleRuntimeError(errorRecord); + } + }, options.filename); } function handleRuntimeError(errorRecord) { @@ -163,8 +160,8 @@ function updateIframeContent() { } } -window.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ = window.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ || { -}; +window.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ = + window.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ || {}; window.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__.iframeReady = function iframeReady() { isIframeReady = true; isLoadingIframe = false; diff --git a/packages/react-error-overlay/src/listenToRuntimeErrors.js b/packages/react-error-overlay/src/listenToRuntimeErrors.js index 4ee3d2743..8146b377c 100644 --- a/packages/react-error-overlay/src/listenToRuntimeErrors.js +++ b/packages/react-error-overlay/src/listenToRuntimeErrors.js @@ -38,7 +38,7 @@ export type ErrorRecord = {| |}; export function listenToRuntimeErrors( - crash: (ErrorRecord) => void, + crash: ErrorRecord => void, filename: string = '/static/js/bundle.js' ) { function crashWithFrames(error: Error, unhandledRejection = false) { diff --git a/packages/react-error-overlay/src/utils/generateAnsiHTML.js b/packages/react-error-overlay/src/utils/generateAnsiHTML.js index 7768fd0b5..306165e85 100644 --- a/packages/react-error-overlay/src/utils/generateAnsiHTML.js +++ b/packages/react-error-overlay/src/utils/generateAnsiHTML.js @@ -70,7 +70,8 @@ function generateAnsiHTML(txt: string): string { var open = false; for (var index = 0; index < arr.length; ++index) { var c = arr[index]; - var content = c.content, fg = c.fg; + var content = c.content, + fg = c.fg; var contentParts = content.split('\n'); for (var _index = 0; _index < contentParts.length; ++_index) { diff --git a/packages/react-error-overlay/src/utils/isInternalFile.js b/packages/react-error-overlay/src/utils/isInternalFile.js index 3f2ecbf42..97dbeaae5 100644 --- a/packages/react-error-overlay/src/utils/isInternalFile.js +++ b/packages/react-error-overlay/src/utils/isInternalFile.js @@ -7,13 +7,15 @@ /* @flow */ function isInternalFile(sourceFileName: ?string, fileName: ?string) { - return sourceFileName == null || + return ( + sourceFileName == null || sourceFileName === '' || sourceFileName.indexOf('/~/') !== -1 || sourceFileName.indexOf('/node_modules/') !== -1 || sourceFileName.trim().indexOf(' ') !== -1 || fileName == null || - fileName === ''; + fileName === '' + ); } export { isInternalFile }; diff --git a/packages/react-error-overlay/src/utils/parser.js b/packages/react-error-overlay/src/utils/parser.js index faae066f2..2e8afaa8b 100644 --- a/packages/react-error-overlay/src/utils/parser.js +++ b/packages/react-error-overlay/src/utils/parser.js @@ -11,13 +11,16 @@ import StackFrame from './stack-frame'; const regexExtractLocation = /\(?(.+?)(?::(\d+))?(?::(\d+))?\)?$/; function extractLocation(token: string): [string, number, number] { - return regexExtractLocation.exec(token).slice(1).map(v => { - const p = Number(v); - if (!isNaN(p)) { - return p; - } - return v; - }); + return regexExtractLocation + .exec(token) + .slice(1) + .map(v => { + const p = Number(v); + if (!isNaN(p)) { + return p; + } + return v; + }); } const regexValidFrame_Chrome = /^\s*(at|in)\s.+(:\d+)/; @@ -53,7 +56,10 @@ function parseStack(stack: string[]): StackFrame[] { if (e.indexOf('(at ') !== -1) { e = e.replace(/\(at /, '('); } - const data = e.trim().split(/\s+/g).slice(1); + const data = e + .trim() + .split(/\s+/g) + .slice(1); const last = data.pop(); return new StackFrame(data.join(' ') || null, ...extractLocation(last)); } diff --git a/packages/react-error-overlay/src/utils/unmapper.js b/packages/react-error-overlay/src/utils/unmapper.js index f71afbf08..c61fad4fb 100644 --- a/packages/react-error-overlay/src/utils/unmapper.js +++ b/packages/react-error-overlay/src/utils/unmapper.js @@ -13,7 +13,8 @@ import path from 'path'; function count(search: string, string: string): number { // Count starts at -1 becuse a do-while loop always runs at least once - let count = -1, index = -1; + let count = -1, + index = -1; do { // First call or the while case evaluated true, meaning we have to make // count 0 or we found a character diff --git a/packages/react-error-overlay/src/utils/warnings.js b/packages/react-error-overlay/src/utils/warnings.js index bc637546a..4a99190ac 100644 --- a/packages/react-error-overlay/src/utils/warnings.js +++ b/packages/react-error-overlay/src/utils/warnings.js @@ -9,7 +9,10 @@ import type { ReactFrame } from '../effects/proxyConsole'; function stripInlineStacktrace(message: string): string { - return message.split('\n').filter(line => !line.match(/^\s*in/)).join('\n'); // " in Foo" + return message + .split('\n') + .filter(line => !line.match(/^\s*in/)) + .join('\n'); // " in Foo" } function massage( diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js index cf6467554..fa42747f6 100644 --- a/packages/react-scripts/config/env.js +++ b/packages/react-scripts/config/env.js @@ -86,13 +86,10 @@ function getClientEnvironment(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; - }, - {} - ), + 'process.env': Object.keys(raw).reduce((env, key) => { + env[key] = JSON.stringify(raw[key]); + return env; + }, {}), }; return { raw, stringified }; diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index 6711b8c99..4a0163773 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -41,8 +41,8 @@ const getPublicUrl = appPackageJson => // like /todos/42/static/js/bundle.7289d.js. We have to know the root. function getServedPath(appPackageJson) { const publicUrl = getPublicUrl(appPackageJson); - const servedUrl = envPublicUrl || - (publicUrl ? url.parse(publicUrl).pathname : '/'); + const servedUrl = + envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/'); return ensureSlash(servedUrl, true); } @@ -92,7 +92,8 @@ module.exports = { const ownPackageJson = require('../package.json'); const reactScriptsPath = resolveApp(`node_modules/${ownPackageJson.name}`); -const reactScriptsLinked = fs.existsSync(reactScriptsPath) && +const reactScriptsLinked = + fs.existsSync(reactScriptsPath) && fs.lstatSync(reactScriptsPath).isSymbolicLink(); // config before publish: we're in ./packages/react-scripts/config/ diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index ed7d6400d..794639fe1 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -183,6 +183,22 @@ module.exports = { }, ], }, + // [f2c] add scss loader + { + test: /\.scss$/, + include: paths.appSrc, + use: [ + { + loader: require.resolve('style-loader'), + }, + { + loader: require.resolve('css-loader'), + }, + { + loader: require.resolve('sass-loader'), + }, + ], + }, // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. // "style" loader turns CSS into JS modules that inject