diff --git a/config/env.js b/config/env.js index 7c6133b..8b39b6c 100644 --- a/config/env.js +++ b/config/env.js @@ -78,13 +78,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/config/jest/enzymeTestAdapterSetup.js b/config/jest/enzymeTestAdapterSetup.js new file mode 100644 index 0000000..82edfc9 --- /dev/null +++ b/config/jest/enzymeTestAdapterSetup.js @@ -0,0 +1,4 @@ +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +configure({ adapter: new Adapter() }); diff --git a/config/paths.js b/config/paths.js index 2efd3b7..6d16efc 100644 --- a/config/paths.js +++ b/config/paths.js @@ -33,8 +33,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); } diff --git a/config/polyfills.js b/config/polyfills.js index 5c1d866..66dff0a 100644 --- a/config/polyfills.js +++ b/config/polyfills.js @@ -14,3 +14,9 @@ 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'); + +// 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); +} diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 5b56219..8f4f5ef 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -33,6 +33,8 @@ module.exports = { // This means they will be the "root" imports that are included in JS bundle. // The first two entry points enable "hot" CSS and auto-refreshes for JS. entry: [ + // We ship a few polyfills by default: + require.resolve('./polyfills'), // Include an alternative client for WebpackDevServer. A client's job is to // connect to WebpackDevServer by a socket and get notified about changes. // When you save a file, the client will either apply hot updates (in case @@ -44,10 +46,6 @@ module.exports = { // require.resolve('webpack-dev-server/client') + '?/', // require.resolve('webpack/hot/dev-server'), require.resolve('react-dev-utils/webpackHotDevClient'), - // We ship a few polyfills by default: - require.resolve('./polyfills'), - // Errors should be considered fatal in development - require.resolve('react-error-overlay'), // Finally, this is your app's code: paths.appIndexJs, // We include the app code last so that if there is a runtime error during @@ -55,8 +53,6 @@ module.exports = { // changing JS code would still trigger a refresh. ], output: { - // Next line is not used in dev but WebpackDevServer crashes without it: - path: paths.appBuild, // Add /* filename */ comments to generated require()s in the output. pathinfo: true, // This does not produce a real file. It's just the virtual path that is @@ -67,9 +63,9 @@ module.exports = { chunkFilename: 'static/js/[name].chunk.js', // This is the URL that app is served from. We use "/" in development. publicPath: publicPath, - // Point sourcemap entries to original disk location + // Point sourcemap entries to original disk location (format as URL on Windows) devtoolModuleFilenameTemplate: info => - path.resolve(info.absoluteResourcePath), + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'), }, resolve: { // This allows you to set a fallback for where Webpack should look for modules. @@ -84,8 +80,11 @@ module.exports = { // We also include JSX as a common component filename extension to support // some tools, although we do not recommend using it, see: // https://github.com/facebookincubator/create-react-app/issues/290 - extensions: ['.js', '.json', '.jsx'], + // `web` extension prefixes have been added for better support + // for React Native Web. + extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'], alias: { + // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'react-native-web', @@ -97,7 +96,7 @@ module.exports = { // To fix this, we prevent you from importing files out of src/ -- if you'd like to, // please link the files into your node_modules/ and let module-resolution kick in. // Make sure your source files are compiled, as they will not be processed in any way. - // new ModuleScopePlugin(paths.appSrc), + // new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), ], }, module: { @@ -110,12 +109,13 @@ module.exports = { // First, run the linter. // It's important to do this before Babel processes the JS. { - test: /\.(js|jsx)$/, + test: /\.(js|jsx|mjs)$/, enforce: 'pre', use: [ { options: { formatter: eslintFormatter, + eslintPath: require.resolve('eslint'), }, loader: require.resolve('eslint-loader'), @@ -123,94 +123,94 @@ module.exports = { ], include: paths.appSrc, }, - // ** ADDING/UPDATING LOADERS ** - // The "file" loader handles all assets unless explicitly excluded. - // The `exclude` list *must* be updated with every change to loader extensions. - // When adding a new loader, you must add its `test` - // as a new entry in the `exclude` list for "file" loader. - - // "file" loader makes sure those assets get served by WebpackDevServer. - // When you `import` an asset, you get its (virtual) filename. - // In production, they would get copied to the `build` folder. { - exclude: [ - /\.html$/, - /\.(js|jsx)$/, - /\.css$/, - /\.json$/, - /\.bmp$/, - /\.gif$/, - /\.jpe?g$/, - /\.png$/, - ], - loader: require.resolve('file-loader'), - options: { - name: 'static/media/[name].[hash:8].[ext]', - }, - }, - // "url" loader works like "file" loader except that it embeds assets - // smaller than specified limit in bytes as data URLs to avoid requests. - // A missing `test` is equivalent to a match. - { - test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], - loader: require.resolve('url-loader'), - options: { - limit: 10000, - name: 'static/media/[name].[hash:8].[ext]', - }, - }, - // Process JS with Babel. - { - test: /\.(js|jsx)$/, - include: paths.appSrc, - loader: require.resolve('babel-loader'), - options: { - - // This is a feature of `babel-loader` for webpack (not Babel itself). - // It enables caching results in ./node_modules/.cache/babel-loader/ - // directory for faster rebuilds. - cacheDirectory: true, - }, - }, - // "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