Webpack externals: ModuleNotFoundError at build time

[peabnuts123]

Do you want to request a feature or report a bug? Bug

What is the current behaviour? In preact.config.js I have some Webpack externals configured as follows:

config.externals = {
    // 'import-name-my-module': 'window.my.global.object',
    'chromecast-caf-receiver/cast.framework.breaks': 'cast.framework.breaks',
    'chromecast-caf-receiver/cast.framework': 'cast.framework',
    'chromecast-caf-receiver/cast.framework.events.category': 'cast.framework.events.category',
    'chromecast-caf-receiver/cast.framework.events': 'cast.framework.events',
    'chromecast-caf-receiver/cast.framework.messages': 'cast.framework.messages',
    'chromecast-caf-receiver/cast.framework.system': 'cast.framework.system',
    'chromecast-caf-receiver/cast.framework.ui': 'cast.framework.ui',
    'chromecast-caf-receiver': 'cast',
  };

(I am turning the Chromecast CAF SDK into a module that I can import so I don't have to write cast.framework.___ everywhere)

This works fine when I run preact watch, but when I run preact build I get the following:

> [email protected] build /project/path/here
> NODE_ENV='production' preact build --no-prerender --no-sw

⚠ WARN Could not find sw.js in /project/path/here/src. Using the default service worker.
 Build  [==                  ] 11% (1.2s) building      Duplicate declaration '_iterator = _isArray ? _iterator : _iterator[Symbol.iterator]()'
 Build  [========            ] 40% (2.2s) building

Build failed! 

 ModuleNotFoundError: Module not found: Error: Can't resolve 'chromecast-caf-receiver/cast.framework' in '/project/path/here/src/modules'

If the current behaviour is a bug, please provide the steps to reproduce.

1. Create a new project with any template e.g. default.

2. Add a global to template.html e.g.

   <script>
     window.myThing = () => {
       console.log("This is my thing");
     }
   </script>
   

3. Add an externals config to preact.config.js for this global e.g.:

   export default function preactConfig(config, env, helpers) {
     config.externals = {
       'my-thing': 'myThing',
     };
   }
   

4. Import and call my-thing in, say, app.js

   import myThing from 'my-thing';
   
   // ...
   
   render() {
     myThing();
   
     // ...
   }
   

5. Run preact watch and observe that This is my thing is logged to the console on render

6. Stop the server and run preact build

7. Observe the error:

    ModuleNotFoundError: Module not found: Error: Can't resolve 'my-thing' in '/project/path/here/src/components'
   

What is the expected behaviour? The module should be resolved just as it is when running preact watch and successfully compile.

~~If this is a feature request, what is motivation or use case for changing the behaviour?~~

Please mention other relevant information. None

Please paste the results of preact info here.

Environment Info:
  System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.16.3/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
  Browsers:
    Chrome: 83.0.4103.61
    Safari: 13.1
  npmPackages:
    preact: ^10.3.2 => 10.4.4 
    preact-cli: ^3.0.0-rc.6 => 3.0.0-rc.14 
    preact-render-to-string: ^5.1.4 => 5.1.8 
    preact-router: ^3.2.1 => 3.2.1 
  npmGlobalPackages:
    preact-cli: 3.0.0-rc.14