diff --git a/config/build/babelrc.js b/config/build/babelrc.js index cbaa2dd6..c6049a02 100644 --- a/config/build/babelrc.js +++ b/config/build/babelrc.js @@ -11,9 +11,11 @@ import pluginNodeEnvInline from 'babel-plugin-transform-node-env-inline'; import pluginMinifyDeadCodeElimination from 'babel-plugin-minify-dead-code-elimination'; import pluginMinifyGuardedExpressions from 'babel-plugin-minify-guarded-expressions'; import pluginDiscardModuleReferences from 'babel-plugin-discard-module-references'; +import pluginReactJsxSource from 'babel-plugin-transform-react-jsx-source'; +import pluginReactJsxSelf from 'babel-plugin-transform-react-jsx-self'; import { vitaminResolve } from '../utils'; -export default env => ({ +export default (env, dev) => ({ presets: [ env === 'client' && [preset2015, { modules: false }], presetReact, @@ -24,10 +26,14 @@ export default env => ({ plugins: [ // Make optional the explicit import of React in JSX files pluginReactRequire, - // Add Object.entries, Object.values and other ES2017 functionalities - // in the client, we prefer solution like https://polyfill.io/v2/docs/, to keep the + // Add Object.entries, Object.values and other ES2017 functionalities. + // In the client, we prefer solution like https://polyfill.io/v2/docs/, to keep the // bundle size the smallest possible. env === 'server' && pluginTransformRuntime, + // Adds component stack to warning messages + dev && pluginReactJsxSource, + // Adds __self attribute to JSX which React will use for some warnings + dev && pluginReactJsxSelf, // replace process.env.NODE_ENV by its current value pluginNodeEnvInline, // replace IS_CLIENT and IS_SERVER diff --git a/config/build/webpack.config.client.js b/config/build/webpack.config.client.js index a41fd9cd..d7a6ea62 100644 --- a/config/build/webpack.config.client.js +++ b/config/build/webpack.config.client.js @@ -19,7 +19,7 @@ export default function clientConfig(options) { }, module: { rules: [ - createBabelLoader('client'), + createBabelLoader('client', options.dev), createResolveConfigLoader(), ], }, diff --git a/config/build/webpack.config.common.js b/config/build/webpack.config.common.js index ac8bd8f1..8f3ed0f2 100644 --- a/config/build/webpack.config.common.js +++ b/config/build/webpack.config.common.js @@ -16,14 +16,14 @@ const VITAMIN_MODULES_DIRECTORY = vitaminResolve('node_modules'); const VITAMIN_MODULES_EXAMPLES_DIRECTORY = vitaminResolve('examples'); const MODULES_DIRECTORIES = [appResolve('node_modules'), VITAMIN_MODULES_DIRECTORY]; -export const createBabelLoader = env => ({ +export const createBabelLoader = (env, dev) => ({ test: /\.js(x?)$/, loader: 'babel-loader', include: path => !path.includes('node_modules') || (path.startsWith(VITAMIN_DIRECTORY) && !path.startsWith(VITAMIN_MODULES_DIRECTORY) && !path.startsWith(VITAMIN_MODULES_EXAMPLES_DIRECTORY)), - query: babelrc(env), + query: babelrc(env, dev), }); export const createResolveConfigLoader = () => ({ diff --git a/config/build/webpack.config.server.js b/config/build/webpack.config.server.js index af86e65a..a7b4ed95 100644 --- a/config/build/webpack.config.server.js +++ b/config/build/webpack.config.server.js @@ -55,7 +55,7 @@ export default function serverConfig(options) { module: { rules: [ - createBabelLoader('server'), + createBabelLoader('server', options.dev), createResolveConfigLoader(), ], }, diff --git a/config/build/webpack.config.tests.js b/config/build/webpack.config.tests.js index c8a5235e..5201068d 100644 --- a/config/build/webpack.config.tests.js +++ b/config/build/webpack.config.tests.js @@ -11,7 +11,7 @@ export default function testConfig(options) { }, module: { loaders: [ - createBabelLoader('client'), + createBabelLoader('client', true), // The following loader will resolve the config to its final value during the build { test: vitaminResolve('config/index'), diff --git a/package.json b/package.json index f77392b9..fa788200 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,8 @@ "babel-plugin-react-require": "^3.0.0", "babel-plugin-transform-export-default-name-forked": "^1.2.2", "babel-plugin-transform-node-env-inline": "^6.8.0", + "babel-plugin-transform-react-jsx-self": "^6.22.0", + "babel-plugin-transform-react-jsx-source": "^6.22.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-es2015": "^6.22.0", "babel-preset-es2015-node6": "^0.4.0",