chore: refactor @src imports

The webpack configuration used to include a weird line, that allowed all
non-implicit imports from src/. Such imports were ambiguous, and
required modification of the resolve path, which is unconventional.

To resolve this, we adopt the same solution as frontend-app-learning:
src/ imports are written as `from '@src/...'`.

To inform ESLint of this, we again draw inspiration from
frontend-app-learning by loading the webpack config from tsconfig.json.
This in turn triggers a new set of errors, which we fix in the next
commit.

Author: regisb

.env

@@ -1,5 +1,4 @@
 NODE_ENV='production'
-NODE_PATH=./src
 BASE_URL=''
 LMS_BASE_URL=''
 LOGIN_URL=''

.eslintrc.js

@@ -14,15 +14,13 @@ const config = createConfig('eslint', {
     'no-promise-executor-return': 'off',
     'import/no-cycle': 'off',
   },
-});
-
-config.settings = {
-  "import/resolver": {
-    node: {
-      paths: ["src", "node_modules"],
-      extensions: [".js", ".jsx"],
+  settings: {
+    'import/resolver': {
+      webpack: {
+        config: 'webpack.prod.config.js',
+      },
     },
-  },
-};
+  }
+});
 
 module.exports = config;

package-lock.json

@@ -83,6 +83,7 @@
     "@openedx/frontend-build": "^14.3.3",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "12.1.5",
+    "eslint-import-resolver-webpack": "^0.13.9",
     "axios-mock-adapter": "^1.20.0",
     "fetch-mock": "^9.11.0",
     "husky": "^7.0.0",

package.json

@@ -6,11 +6,11 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import FooterSlot from '@openedx/frontend-slot-footer';
 import { LearningHeader as Header } from '@edx/frontend-component-header';
 
-import { selectors } from 'data/redux';
+import { selectors } from '@src/data/redux';
 
-import DemoWarning from 'containers/DemoWarning';
-import NotificationsBanner from 'containers/NotificationsBanner';
-import ListView from 'containers/ListView';
+import DemoWarning from '@src/containers/DemoWarning';
+import NotificationsBanner from '@src/containers/NotificationsBanner';
+import ListView from '@src/containers/ListView';
 
 import './App.scss';
 import Head from './components/Head';

src/App.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { AlertModal, ActionRow, Button } from '@openedx/paragon';
-import { nullMethod } from 'hooks';
+import { nullMethod } from '@src/hooks';
 
 export const ConfirmModal = ({
   title,

src/components/ConfirmModal.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { formatMessage } from 'testUtils';
+import { formatMessage } from '@src/testUtils';
 import { DemoAlert } from '.';
 
 describe('DemoAlert component', () => {

src/components/DemoAlert/index.test.jsx

@@ -2,8 +2,8 @@ import { useState, useRef } from 'react';
 
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 
-import { ErrorStatuses } from 'data/constants/requests';
-import { StrictDict } from 'utils';
+import { ErrorStatuses } from '@src/data/constants/requests';
+import { StrictDict } from '@src/utils';
 import * as module from './pdfHooks';
 
 export const errors = StrictDict({

src/components/FilePreview/BaseRenderers/pdfHooks.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { MockUseState } from 'testUtils';
-import { keyStore } from 'utils';
-import { ErrorStatuses } from 'data/constants/requests';
+import { MockUseState } from '@src/testUtils';
+import { keyStore } from '@src/utils';
+import { ErrorStatuses } from '@src/data/constants/requests';
 
 import * as hooks from './pdfHooks';
 

src/components/FilePreview/BaseRenderers/pdfHooks.test.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { get } from 'axios';
 
-import { StrictDict } from 'utils';
+import { StrictDict } from '@src/utils';
 import * as module from './textHooks';
 
 export const state = StrictDict({