From 45d6324ff9d6b9413be8f64e048b24eeb45fda3a Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Tue, 23 Jan 2018 11:21:50 -0700 Subject: [PATCH 1/8] Add named asset import for svg files via babel plugin and webpack loader. --- .../babel-plugin-named-asset-import/index.js | 57 +++++++++++++++++++ .../package.json | 17 ++++++ packages/babel-preset-react-app/index.js | 8 +++ packages/babel-preset-react-app/package.json | 1 + .../config/webpack.config.dev.js | 25 -------- .../config/webpack.config.prod.js | 25 -------- packages/react-scripts/package.json | 2 +- 7 files changed, 84 insertions(+), 51 deletions(-) create mode 100644 packages/babel-plugin-named-asset-import/index.js create mode 100644 packages/babel-plugin-named-asset-import/package.json diff --git a/packages/babel-plugin-named-asset-import/index.js b/packages/babel-plugin-named-asset-import/index.js new file mode 100644 index 00000000000..6a764c22f7a --- /dev/null +++ b/packages/babel-plugin-named-asset-import/index.js @@ -0,0 +1,57 @@ +'use strict'; + +const { extname } = require('path'); + +function namedAssetImportPlugin({ types: t }) { + const visited = new WeakSet(); + + return { + visitor: { + ImportDeclaration(path, { opts: { loaderMap } }) { + const sourcePath = path.node.source.value; + const ext = extname(sourcePath).substr(1); + + if (visited.has(path.node) || sourcePath.indexOf('!') !== -1) { + return; + } + + if (loaderMap[ext]) { + const addLoader = loaderMap[ext]; + + path.replaceWithMultiple( + path.node.specifiers.map(specifier => { + const localName = specifier.local.name; + + if (t.isImportDefaultSpecifier(specifier)) { + const newDefaultImport = t.importDeclaration( + [t.importDefaultSpecifier(t.identifier(localName))], + t.stringLiteral(sourcePath) + ); + + visited.add(newDefaultImport); + return newDefaultImport; + } + + const newImport = t.importDeclaration( + [ + t.importSpecifier( + t.identifier(localName), + t.identifier(specifier.imported.name) + ), + ], + t.stringLiteral( + addLoader(sourcePath, specifier.imported.name, localName) + ) + ); + + visited.add(newImport); + return newImport; + }) + ); + } + }, + }, + }; +} + +module.exports = namedAssetImportPlugin; diff --git a/packages/babel-plugin-named-asset-import/package.json b/packages/babel-plugin-named-asset-import/package.json new file mode 100644 index 00000000000..bb2ca45c5b1 --- /dev/null +++ b/packages/babel-plugin-named-asset-import/package.json @@ -0,0 +1,17 @@ +{ + "name": "babel-plugin-named-asset-import", + "version": "0.1.0", + "description": "Babel plugin for named asset imports in Create React App", + "repository": "facebookincubator/create-react-app", + "license": "MIT", + "bugs": { + "url": "https://github.com/facebookincubator/create-react-app/issues" + }, + "main": "index.js", + "files": [ + "index.js" + ], + "dependencies": { + "@babel/core": "7.0.0-beta.38" + } +} diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index 612e2fd5fff..cb1268bbd75 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -115,6 +115,14 @@ module.exports = function(api, opts) { regenerator: true, }, ], + [ + require('babel-plugin-named-asset-import'), + { + loaderMap: { + svg: filename => `-!svg-react-loader!${filename}`, + }, + }, + ], isEnvProduction && [ // Remove PropTypes from production build require('babel-plugin-transform-react-remove-prop-types').default, diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 25534f59947..2e5c0d6ade7 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -26,6 +26,7 @@ "@babel/preset-flow": "7.0.0-beta.38", "@babel/preset-react": "7.0.0-beta.38", "babel-plugin-macros": "2.0.0", + "babel-plugin-named-asset-import": "^0.1.0", "babel-plugin-transform-dynamic-import": "2.0.0", "babel-plugin-transform-react-remove-prop-types": "0.4.12" } diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 0d7db7c84a2..4874c5b3ba8 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -264,31 +264,6 @@ module.exports = { }, ], }, - // Allows you to use two kinds of imports for SVG: - // import logoUrl from './logo.svg'; gives you the URL. - // import { ReactComponent as Logo } from './logo.svg'; gives you a component. - { - test: /\.svg$/, - use: [ - { - loader: require.resolve('babel-loader'), - options: { - // @remove-on-eject-begin - babelrc: false, - presets: [require.resolve('babel-preset-react-app')], - // @remove-on-eject-end - cacheDirectory: true, - }, - }, - require.resolve('svgr/webpack'), - { - loader: require.resolve('file-loader'), - options: { - name: 'static/media/[name].[hash:8].[ext]', - }, - }, - ], - }, // "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. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 98ddb463391..421717d5001 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -306,31 +306,6 @@ module.exports = { ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, - // Allows you to use two kinds of imports for SVG: - // import logoUrl from './logo.svg'; gives you the URL. - // import { ReactComponent as Logo } from './logo.svg'; gives you a component. - { - test: /\.svg$/, - use: [ - { - loader: require.resolve('babel-loader'), - options: { - // @remove-on-eject-begin - babelrc: false, - presets: [require.resolve('babel-preset-react-app')], - // @remove-on-eject-end - cacheDirectory: true, - }, - }, - require.resolve('svgr/webpack'), - { - loader: require.resolve('file-loader'), - options: { - name: 'static/media/[name].[hash:8].[ext]', - }, - }, - ], - }, // "file" loader makes sure assets end up in the `build` folder. // When you `import` an asset, you get its filename. // This loader doesn't use a "test" so it will catch all modules diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 3c670a23dd6..cc9d7b16a7e 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -54,7 +54,7 @@ "raf": "3.4.0", "react-dev-utils": "^5.0.0", "style-loader": "0.19.1", - "svgr": "1.6.0", + "svg-react-loader": "^0.4.5", "sw-precache-webpack-plugin": "0.11.4", "thread-loader": "1.1.2", "uglifyjs-webpack-plugin": "1.1.6", From 3a1e13f332b9b4616f09f86ceca26c8c94b67f86 Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Tue, 23 Jan 2018 12:45:10 -0700 Subject: [PATCH 2/8] Fix failing e2e test --- packages/babel-plugin-named-asset-import/package.json | 2 +- .../fixtures/kitchensink/src/features/webpack/SvgComponent.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/babel-plugin-named-asset-import/package.json b/packages/babel-plugin-named-asset-import/package.json index bb2ca45c5b1..9c586ac5753 100644 --- a/packages/babel-plugin-named-asset-import/package.json +++ b/packages/babel-plugin-named-asset-import/package.json @@ -11,7 +11,7 @@ "files": [ "index.js" ], - "dependencies": { + "peerDependencies": { "@babel/core": "7.0.0-beta.38" } } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js index 0eb06a027e3..dcb387f40fe 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js @@ -6,6 +6,6 @@ */ import React from 'react'; -import { ReactComponent as Logo } from './assets/logo.svg'; +import { default as Logo } from './assets/logo.svg'; export default () => ; From 3d1de03a4a3952ecc5d4c55165c9764f22ed6018 Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Wed, 31 Jan 2018 18:19:49 -0700 Subject: [PATCH 3/8] Switched to svgr loader --- .../babel-plugin-named-asset-import/index.js | 20 ++++++++++++------- packages/babel-preset-react-app/index.js | 4 +++- packages/react-scripts/package.json | 2 +- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/babel-plugin-named-asset-import/index.js b/packages/babel-plugin-named-asset-import/index.js index 6a764c22f7a..3bf0081fd2b 100644 --- a/packages/babel-plugin-named-asset-import/index.js +++ b/packages/babel-plugin-named-asset-import/index.js @@ -16,15 +16,15 @@ function namedAssetImportPlugin({ types: t }) { } if (loaderMap[ext]) { - const addLoader = loaderMap[ext]; - path.replaceWithMultiple( path.node.specifiers.map(specifier => { - const localName = specifier.local.name; - if (t.isImportDefaultSpecifier(specifier)) { const newDefaultImport = t.importDeclaration( - [t.importDefaultSpecifier(t.identifier(localName))], + [ + t.importDefaultSpecifier( + t.identifier(specifier.local.name) + ), + ], t.stringLiteral(sourcePath) ); @@ -35,12 +35,18 @@ function namedAssetImportPlugin({ types: t }) { const newImport = t.importDeclaration( [ t.importSpecifier( - t.identifier(localName), + t.identifier(specifier.local.name), t.identifier(specifier.imported.name) ), ], t.stringLiteral( - addLoader(sourcePath, specifier.imported.name, localName) + loaderMap[ext][specifier.imported.name] + ? loaderMap[ext][specifier.imported.name]( + sourcePath, + specifier.imported.name, + specifier.local.name + ) + : sourcePath ) ); diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index cb1268bbd75..4402fb647a9 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -119,7 +119,9 @@ module.exports = function(api, opts) { require('babel-plugin-named-asset-import'), { loaderMap: { - svg: filename => `-!svg-react-loader!${filename}`, + svg: { + ReactComponent: filename => `svgr/webpack!${filename}`, + }, }, }, ], diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index cc9d7b16a7e..3cfe635b9dd 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -54,7 +54,7 @@ "raf": "3.4.0", "react-dev-utils": "^5.0.0", "style-loader": "0.19.1", - "svg-react-loader": "^0.4.5", + "svgr": "^1.8.1", "sw-precache-webpack-plugin": "0.11.4", "thread-loader": "1.1.2", "uglifyjs-webpack-plugin": "1.1.6", From f172ee3684b8c39d0a37f96de1dbcd0a3c7d4887 Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Thu, 1 Feb 2018 12:16:36 -0700 Subject: [PATCH 4/8] Updated SVG component test --- .../fixtures/kitchensink/src/features/webpack/SvgComponent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js index dcb387f40fe..0eb06a027e3 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js @@ -6,6 +6,6 @@ */ import React from 'react'; -import { default as Logo } from './assets/logo.svg'; +import { ReactComponent as Logo } from './assets/logo.svg'; export default () => ; From 8cdc51a78a5ea80e1cd339700e90410ea410136a Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Thu, 1 Feb 2018 13:05:11 -0700 Subject: [PATCH 5/8] Disable named asset import plugin in test environment --- packages/babel-preset-react-app/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index 4402fb647a9..96b7ebd77ac 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -115,7 +115,7 @@ module.exports = function(api, opts) { regenerator: true, }, ], - [ + !isEnvTest && [ require('babel-plugin-named-asset-import'), { loaderMap: { From 1e2d8a5bce40aee9201d16fb4971651fde3da9f0 Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Thu, 1 Feb 2018 13:46:52 -0700 Subject: [PATCH 6/8] Added tests for including SVG in CSS --- .../kitchensink/integration/webpack.test.js | 16 ++++++++++++++++ .../fixtures/kitchensink/src/App.js | 16 +++++++++++++--- .../src/features/webpack/SvgComponent.js | 2 +- .../kitchensink/src/features/webpack/SvgInCss.js | 4 ++++ .../src/features/webpack/SvgInCss.test.js | 10 ++++++++++ .../src/features/webpack/assets/svg.css | 3 +++ 6 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgInCss.js create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgInCss.test.js create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/svg.css diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js index 06ec83602f3..37aa7680ace 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js @@ -71,6 +71,22 @@ describe('Integration', () => { ); }); + it('svg component', async () => { + const doc = await initDOM('svg-component'); + + expect(doc.getElementById('feature-svg-component').textContent).to.match( + /\/static\/media\/logo\..+\.svg$/ + ); + }); + + it('svg in css', async () => { + const doc = await initDOM('svg-in-css'); + + expect( + doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') + ).to.match(/\/static\/media\/logo\..+\.svg$/); + }); + it('unknown ext inclusion', async () => { const doc = await initDOM('unknown-ext-inclusion'); diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js index d1affb48af9..750f8a90b98 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/App.js +++ b/packages/react-scripts/fixtures/kitchensink/src/App.js @@ -82,9 +82,9 @@ class App extends Component { ); break; case 'css-modules-inclusion': - import( - './features/webpack/CssModulesInclusion' - ).then(f => this.setFeature(f.default)); + import('./features/webpack/CssModulesInclusion').then(f => + this.setFeature(f.default) + ); break; case 'custom-interpolation': import('./features/syntax/CustomInterpolation').then(f => @@ -174,6 +174,16 @@ class App extends Component { this.setFeature(f.default) ); break; + case 'svg-component': + import('./features/webpack/SvgComponent').then(f => + this.setFeature(f.default) + ); + break; + case 'svg-in-css': + import('./features/webpack/SvgInCss').then(f => + this.setFeature(f.default) + ); + break; case 'template-interpolation': import('./features/syntax/TemplateInterpolation').then(f => this.setFeature(f.default) diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js index 0eb06a027e3..62bad3b1075 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js @@ -8,4 +8,4 @@ import React from 'react'; import { ReactComponent as Logo } from './assets/logo.svg'; -export default () => ; +export default () => ; diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgInCss.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgInCss.js new file mode 100644 index 00000000000..edf34137940 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgInCss.js @@ -0,0 +1,4 @@ +import React from 'react'; +import './assets/svg.css'; + +export default () =>
; diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgInCss.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgInCss.test.js new file mode 100644 index 00000000000..f0c0bd68372 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgInCss.test.js @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import SvgInCss from './SvgInCss'; + +describe('svg in css', () => { + it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/svg.css b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/svg.css new file mode 100644 index 00000000000..ad0ff93655a --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/svg.css @@ -0,0 +1,3 @@ +#feature-svg-in-css { + background-image: url("./logo.svg"); +} From d27b4881274b98a7da5ecda49d8d6b6a4fe1da84 Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Thu, 1 Feb 2018 14:09:33 -0700 Subject: [PATCH 7/8] Update tests --- .../fixtures/kitchensink/integration/webpack.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js index 37aa7680ace..e479be4b81a 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js @@ -74,8 +74,8 @@ describe('Integration', () => { it('svg component', async () => { const doc = await initDOM('svg-component'); - expect(doc.getElementById('feature-svg-component').textContent).to.match( - /\/static\/media\/logo\..+\.svg$/ + expect(doc.getElementById('feature-svg-component').textContent).to.equal( + '' ); }); @@ -84,7 +84,7 @@ describe('Integration', () => { expect( doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') - ).to.match(/\/static\/media\/logo\..+\.svg$/); + ).to.match(/\/static\/media\/logo\..+\.svg/); }); it('unknown ext inclusion', async () => { From f047ac0e85918378e6b964d42811b38d9aa4e036 Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Fri, 2 Feb 2018 12:21:15 -0700 Subject: [PATCH 8/8] Moved babel plugin config into webpack config --- packages/babel-plugin-named-asset-import/index.js | 7 +++---- packages/babel-preset-react-app/index.js | 10 ---------- packages/babel-preset-react-app/package.json | 1 - packages/react-scripts/config/webpack.config.dev.js | 12 ++++++++++++ packages/react-scripts/config/webpack.config.prod.js | 12 ++++++++++++ packages/react-scripts/package.json | 3 ++- 6 files changed, 29 insertions(+), 16 deletions(-) diff --git a/packages/babel-plugin-named-asset-import/index.js b/packages/babel-plugin-named-asset-import/index.js index 3bf0081fd2b..6fd919bc676 100644 --- a/packages/babel-plugin-named-asset-import/index.js +++ b/packages/babel-plugin-named-asset-import/index.js @@ -41,10 +41,9 @@ function namedAssetImportPlugin({ types: t }) { ], t.stringLiteral( loaderMap[ext][specifier.imported.name] - ? loaderMap[ext][specifier.imported.name]( - sourcePath, - specifier.imported.name, - specifier.local.name + ? loaderMap[ext][specifier.imported.name].replace( + /\[path\]/, + sourcePath ) : sourcePath ) diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index 8b3d6a24691..6ec10b5a0cd 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -115,16 +115,6 @@ module.exports = function(api, opts) { regenerator: true, }, ], - !isEnvTest && [ - require('babel-plugin-named-asset-import'), - { - loaderMap: { - svg: { - ReactComponent: filename => `svgr/webpack!${filename}`, - }, - }, - }, - ], isEnvProduction && [ // Remove PropTypes from production build require('babel-plugin-transform-react-remove-prop-types').default, diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 5add5b1c47b..5e3f3b0a5ff 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -26,7 +26,6 @@ "@babel/preset-flow": "7.0.0-beta.38", "@babel/preset-react": "7.0.0-beta.38", "babel-plugin-macros": "2.0.0", - "babel-plugin-named-asset-import": "^0.1.0", "babel-plugin-transform-dynamic-import": "2.0.0", "babel-plugin-transform-react-remove-prop-types": "0.4.12" } diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 1804386a336..bd5d218cc8d 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -192,6 +192,18 @@ module.exports = { babelrc: false, // @remove-on-eject-end presets: [require.resolve('babel-preset-react-app')], + plugins: [ + [ + require.resolve('babel-plugin-named-asset-import'), + { + loaderMap: { + svg: { + ReactComponent: 'svgr/webpack![path]', + }, + }, + }, + ], + ], // 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. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 6db57d24571..6c9a879e851 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -200,6 +200,18 @@ module.exports = { babelrc: false, // @remove-on-eject-end presets: [require.resolve('babel-preset-react-app')], + plugins: [ + [ + require.resolve('babel-plugin-named-asset-import'), + { + loaderMap: { + svg: { + ReactComponent: 'svgr/webpack![path]', + }, + }, + }, + ], + ], compact: true, highlightCode: true, }, diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 7df0d3bcca2..fd876f502f2 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -28,6 +28,7 @@ "babel-eslint": "8.2.1", "babel-jest": "22.1.0", "babel-loader": "8.0.0-beta.0", + "babel-plugin-named-asset-import": "^0.1.0", "babel-preset-react-app": "^3.1.1", "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "2.3.0", @@ -56,7 +57,7 @@ "raf": "3.4.0", "react-dev-utils": "^5.0.0", "style-loader": "0.19.1", - "svgr": "^1.8.1", + "svgr": "1.8.1", "sw-precache-webpack-plugin": "0.11.4", "thread-loader": "1.1.2", "uglifyjs-webpack-plugin": "1.1.6",