diff --git a/config/aliases/globalReact.js b/config/aliases/globalReact.js index 207b7d912..e773af670 100644 --- a/config/aliases/globalReact.js +++ b/config/aliases/globalReact.js @@ -1 +1,7 @@ +if (!window.React) { + throw new Error( + 'React must be globally set on window for the cozy-bar to use it' + ) +} + module.exports = window.React || require('my-react') diff --git a/config/webpack.config.base.js b/config/webpack.config.base.js index 0e64e7e5f..53bc9c8d4 100644 --- a/config/webpack.config.base.js +++ b/config/webpack.config.base.js @@ -13,13 +13,13 @@ module.exports = { libraryTarget: 'umd', umdNamedDefine: true }, + externals: { + react: 'React', + 'react-dom': 'ReactDOM' + }, resolve: { extensions: ['.js', '.json', '.yaml', '.jsx'], - modules: [SRC_DIR, 'node_modules'], - alias: { - react: path.resolve(__dirname, 'aliases/globalReact'), - 'react-dom': path.resolve(__dirname, 'aliases/globalReactDOM') - } + modules: [SRC_DIR, 'node_modules'] }, devtool: '#source-map', module: { diff --git a/examples/index.html b/examples/index.html index 2c636acce..90d0a85df 100644 --- a/examples/index.html +++ b/examples/index.html @@ -3,5 +3,8 @@ - + + + + diff --git a/src/index.jsx b/src/index.jsx index e806ceb85..b00f42ff4 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,6 +1,14 @@ /* global __VERSION__ */ +import React from 'react' +import { render } from 'react-dom' +import { connect, Provider } from 'react-redux' + import { isMobileApp } from 'cozy-device-helper' +import I18n from 'cozy-ui/transpiled/react/I18n' +import { CozyProvider } from 'cozy-client' + +import Bar from 'components/Bar' import stack from 'lib/stack' import { @@ -65,14 +73,6 @@ const injectBarInDOM = data => { } const renderBar = (barNode, options) => { - // import React related modules on init only - const React = require('react') - const { render } = require('react-dom') - const { connect, Provider } = require('react-redux') - const I18n = require('cozy-ui/react/I18n').default - const Bar = require('components/Bar').default - const CozyProvider = require('cozy-client').CozyProvider - const { cozyClient } = options // we connect the I18n component to the store to listen