Fix admin build with node_modules paths

packages/core/admin/admin/src/pages/Admin/index.js

@@ -45,15 +45,6 @@ const SettingsPage = lazy(() =>
   import(/* webpackChunkName: "Admin_settingsPage" */ '../SettingsPage')
 );
 
-const CTB = lazy(() =>
-  import(
-    /* webpackChunkName: "content-type-builder" */ '@strapi/plugin-content-type-builder/admin/src/pages/App'
-  )
-);
-const Upload = lazy(() =>
-  import(/* webpackChunkName: "upload" */ '@strapi/plugin-upload/admin/src/pages/App')
-);
-
 // Simple hook easier for testing
 const useTrackUsage = () => {
   const { trackUsage } = useTracking();
@@ -100,8 +91,6 @@ const Admin = () => {
                 <Route path="/me" component={ProfilePage} exact />
 
                 <Route path="/content-manager" component={CM} />
-                <Route path="/plugins/content-type-builder" component={CTB} />
-                <Route path="/plugins/upload" component={Upload} />
                 {routes}
                 <Route path="/settings/:settingId" component={SettingsPage} />
                 <Route path="/settings" component={SettingsPage} exact />

packages/core/admin/index.js

@@ -48,7 +48,18 @@ async function build({ plugins, dir, env, options, optimize }) {
     ceRoot: path.resolve(cacheDir, 'admin', 'src'),
   };
 
-  const config = getCustomWebpackConfig(dir, { entry, dest, env, options, optimize, roots });
+  const pluginsPath = Object.keys(plugins).map(pluginName => plugins[pluginName].pathToPlugin);
+
+  const config = getCustomWebpackConfig(dir, {
+    entry,
+    pluginsPath,
+    cacheDir,
+    dest,
+    env,
+    options,
+    optimize,
+    roots,
+  });
 
   const compiler = webpack(config);
 
@@ -170,22 +181,25 @@ async function createCacheDir({ dir, plugins }) {
 
 async function watchAdmin({ plugins, dir, host, port, browser, options }) {
   // Create the cache dir containing the front-end files.
+  const cacheDir = path.join(dir, '.cache');
   await createCacheDir({ dir, plugins });
 
-  const entry = path.join(dir, '.cache', 'admin', 'src');
+  const entry = path.join(cacheDir, 'admin', 'src');
   const dest = path.join(dir, 'build');
   const env = 'development';
 
-  const cacheDir = path.join(dir, '.cache');
-
   // Roots for the @strapi/babel-plugin-switch-ee-ce
   const roots = {
     eeRoot: path.resolve(cacheDir, 'ee', 'admin'),
     ceRoot: path.resolve(cacheDir, 'admin', 'src'),
   };
 
+  const pluginsPath = Object.keys(plugins).map(pluginName => plugins[pluginName].pathToPlugin);
+
   const args = {
     entry,
+    cacheDir,
+    pluginsPath,
     dest,
     env,
     port,

packages/core/admin/webpack.config.js

@@ -13,6 +13,8 @@ const getClientEnvironment = require('./env');
 
 module.exports = ({
   entry,
+  cacheDir,
+  pluginsPath,
   dest,
   env,
   optimize,
@@ -98,7 +100,7 @@ module.exports = ({
         {
           test: /\.m?js$/,
           // TODO remove when plugins are built separately
-          exclude: /node_modules\/(?!(@strapi\/plugin-content-type-builder|@strapi\/plugin-upload)\/).*/,
+          include: [cacheDir, ...pluginsPath],
           use: {
             loader: require.resolve('babel-loader'),
             options: {

packages/core/content-type-builder/admin/src/index.js

@@ -19,14 +19,22 @@ const name = pluginPkg.strapi.name;
 export default {
   register(app) {
     app.addReducers(reducers);
-    app.addCorePluginMenuLink({
+
+    app.addMenuLink({
       to: `/plugins/${pluginId}`,
       icon,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
-        defaultMessage: 'Content-Types Builder',
+        defaultMessage: 'Content Types Builder',
       },
       permissions: pluginPermissions.main,
+      Component: async () => {
+        const component = await import(
+          /* webpackChunkName: "content-type-builder" */ './pages/App'
+        );
+
+        return component;
+      },
     });
 
     app.registerPlugin({

packages/core/upload/admin/src/index.js

@@ -24,7 +24,7 @@ export default {
     // TODO update doc and guides
     app.addComponents({ name: 'media-library', Component: InputModalStepper });
 
-    app.addCorePluginMenuLink({
+    app.addMenuLink({
       to: `/plugins/${pluginId}`,
       icon,
       intlLabel: {
@@ -32,6 +32,11 @@ export default {
         defaultMessage: 'Media Library',
       },
       permissions: pluginPermissions.main,
+      Component: async () => {
+        const component = await import(/* webpackChunkName: "upload" */ './pages/App');
+
+        return component;
+      },
     });
 
     // TODO update guide