Extract webpack alias configuration in one single file (#4961)

Created by: Spyna

You can verify that:

• Configuration files are created/modified
• Aliases are working
• App tests are working

Configuration files are created/modified

create a react app

yarn create-react-app my-app

verify the alias configuration

cat  my-app/node_modules/react-scripts/config/webpack.alias.config.js 

the file should look like this:

'use strict';

// @remove-on-eject-begin
const path = require('path');
// @remove-on-eject-end

const aliases = {
  // @remove-on-eject-begin
  // Resolve Babel runtime relative to react-scripts.
  // It usually still works on npm 3 without this but it would be
  // unfortunate to rely on, as react-scripts could be symlinked,
  // and thus @babel/runtime might not be resolvable from the source.
  '@babel/runtime': path.dirname(
    require.resolve('@babel/runtime/package.json')
  ),
  // @remove-on-eject-end
  // 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',
};

module.exports = aliases;

now eject the project:

cd my-app && yarn eject

verify the alias config:

cat config/webpack.alias.config.js

it should be like this:

'use strict';



const aliases = {
  
  // 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',
};

module.exports = aliases;

Aliases are working

edit config/webpack.alias.config.js as follow:

'use strict';

const path = require('path');
const paths = require('./paths');

const aliases = {
  
  // 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',
  'my-alias' : path.resolve(paths.appSrc, 'my-package')
};

module.exports = aliases;

edit src/App.js as follow

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import hello from 'my-alias';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <p id="alias">{hello}</p>
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

launch app

yarn start

you should see hello from my-package

App tests are working

Add alias to jest moduleNameMapper, editing the package.json file.

...
"jest": {
...
   "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
      "my-alias" : "<rootDir>/src/my-package"
    },
...
}
...

edit the app test src/App.test.js to verify the import resolve the aliased module

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);

  expect(div.querySelector('#alias').textContent).toBe('Hello from my-package');

  ReactDOM.unmountComponentAtNode(div);
});

Run the test

yarn test