[Bug] Webpack externals based config not exporting

We use webpack externals powered config file handling to hold stuff like API URLs etc. While testing react-static, I moved this logic into a plugin. Including here for clarity:

export default () => ({
  webpack: (config) => {
    let externalConfig = {
      // getAppConfig simply loads json file and returns object, aka config
      config: JSON.stringify(getAppConfig(currentEnv)),
    };
    if (config.externals != null && !Array.isArray(config.externals)) {
      config.externals = [config.externals, externalConfig];
    } else {
      config.externals = (config.externals ?? []).concat(externalConfig);
    }
    return config;
  },
});

Environment

System:
    OS: Windows 10 10.0.18362
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
    Memory: 5.46 GB / 15.95 GB
  Binaries:
    Node: 12.14.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 85.0.4183.83
    Edge: Spartan (44.18362.449.0)
    Internet Explorer: 11.0.18362.1
  npmPackages:
    react: ^16.9.0 => 16.13.1
    react-dom: ^16.9.0 => 16.13.1
    react-hot-loader: ^4.12.11 => 4.12.21
    react-static: ^7.2.0 => 7.4.2
    react-static-plugin-reach-router: ^7.2.0 => 7.4.2
    react-static-plugin-sitemap: ^7.2.0 => 7.4.2
    react-static-plugin-source-filesystem: ^7.2.0 => 7.4.2
    react-static-plugin-typescript: ^7.2.0 => 7.4.2
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps to Reproduce the problem

All works as expected when running the app using npm start (no errors or warnings, the app works and reads the config). However, npm export returns:

Cannot find module '{"marketingUrl":"https://guestbell.com", /*rest of the config file continues here*/}'      
  Require stack:
  - C:\Coding\GuestBell\delete-me\artifacts\static-app.js
  - C:\Coding\GuestBell\delete-me\node_modules\react-static\lib\static\exportRoutes.threaded.js

  - loader.js:793 Function.Module._resolveFilename
    internal/modules/cjs/loader.js:793:17

  - loader.js:686 Function.Module._load
    internal/modules/cjs/loader.js:686:27

  - loader.js:848 Module.call
    internal/modules/cjs/loader.js:848:19

  - binHelper.js:62 Module.require
    [delete-me]/[react-static]/src/utils/binHelper.js:62:26

  - helpers.js:74 require
    internal/modules/cjs/helpers.js:74:18

  - static-app.js:3 webpackUniversalModuleDefinition
    C:/Coding/GuestBell/delete-me/artifacts/static-app.js:3:28

  - static-app.js:10 Object.<anonymous>
    C:/Coding/GuestBell/delete-me/artifacts/static-app.js:10:3

  - loader.js:955 Module._compile
    internal/modules/cjs/loader.js:955:30

  - index.js:99 Module._compile
    [delete-me]/[pirates]/lib/index.js:99:24

  - loader.js:991 Module._extensions..js
    internal/modules/cjs/loader.js:991:10

  - index.js:104 Object.newLoader [as .js]
    [delete-me]/[pirates]/lib/index.js:104:7

  - loader.js:811 Module.load
    internal/modules/cjs/loader.js:811:32

  - loader.js:723 Function.Module._load
    internal/modules/cjs/loader.js:723:14

  - loader.js:848 Module.call
    internal/modules/cjs/loader.js:848:19

  - binHelper.js:62 Module.require
    [delete-me]/[react-static]/src/utils/binHelper.js:62:26

  - helpers.js:74 require
    internal/modules/cjs/helpers.js:74:18

  - exportRoutes.threaded.js:20 _callee2$
    [delete-me]/[react-static]/src/static/exportRoutes.threaded.js:20:18

  - runtime.js:63 tryCatch
    [delete-me]/[regenerator-runtime]/runtime.js:63:40

  - runtime.js:293 Generator.invoke [as _invoke]
    [delete-me]/[regenerator-runtime]/runtime.js:293:22

  - runtime.js:118 Generator.next
    [delete-me]/[regenerator-runtime]/runtime.js:118:21

  - runtime.js:63 tryCatch
    [delete-me]/[regenerator-runtime]/runtime.js:63:40

  - runtime.js:356 maybeInvokeDelegate
    [delete-me]/[regenerator-runtime]/runtime.js:356:18

  - runtime.js:267 Generator.invoke [as _invoke]
    [delete-me]/[regenerator-runtime]/runtime.js:267:32

  - runtime.js:118 Generator.next
    [delete-me]/[regenerator-runtime]/runtime.js:118:21

  - asyncToGenerator.js:3 asyncGeneratorStep
    [delete-me]/[@babel]/runtime/helpers/asyncToGenerator.js:3:24

  - asyncToGenerator.js:25 _next
    [delete-me]/[@babel]/runtime/helpers/asyncToGenerator.js:25:9

  - task_queues.js:94 processTicksAndRejections
    internal/process/task_queues.js:94:5


  Error: Trace: {
    code: 'MODULE_NOT_FOUND',
    requireStack: [
      'C:\\Coding\\GuestBell\\delete-me\\artifacts\\static-app.js',
      'C:\\Coding\\GuestBell\\delete-me\\node_modules\\react-static\\lib\\static\\exportRoutes.threaded.js'
    ]
  }
      at C:\Coding\GuestBell\delete-me\node_modules\react-static\bin\react-static:6:11
      at processTicksAndRejections (internal/process/task_queues.js:94:5)

MODULE_NOT_FOUND is obviously a typescript thing, yet I don’t understand what could be causing it. Moreover, why it works with the dev server but doesn’t when exporting.

When looking at C:\Coding\GuestBell\delete-me\artifacts\static-app.js, it literally contains stuff like require(‘{/serialized JSON config/}’). I don’t think this is wrong, but since this is a JS file, I have no idea where the typescript error is suddenly coming from.

Repo

Clone this https://github.com/PeterKottas/react-static-webpack-externals

1. install modules
2. run start - notice it works
3. run build - notice it fails

Expected Behavior

I don’t think we are doing something too ‘crazy’ so this should just work.

For bonus points, if you can suggest a different way of working with front-end config (compatible with typescript e.g. typesafe) which works with react-static, I’d be more than happy to adopt it while the situation around this is resolved. Cheers!

[PeterKottas]

Np, if anybody comes here looking for answers, I think this can be achieved using webpack Define plugin. It might need a little bit of work, especially when using with typescript. But it should be doable! Glhf.

[SleeplessByte]

Understood; thanks for trying anyway 😃