Merge pull request #605 from embroider-build/es-compat

Add es-compat to make asset loaders work as expected
embroider-build · Dec 23, 2023 · 7562cfd · 7562cfd
2 parents ad83213 + d1be0e5
commit 7562cfd
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ember-auto-import/ts/webpack.ts b/packages/ember-auto-import/ts/webpack.ts
@@ -74,16 +74,20 @@ module.exports = (function(){
     {{! this is only used for synchronous importSync() using a template string }}
     return r('_eai_sync_' + specifier)(Array.prototype.slice.call(arguments, 1))
   };
+  {{!- es compatibility. Where we're using "require", webpack doesn't necessarily know to apply its own ES compatibility stuff -}}
+  function esc(m) {
+    return m && m.__esModule ? m : Object.assign({ default: m }, m);
+  }
   {{#each staticImports as |module|}}
-    d('{{js-string-escape module.specifier}}', EAI_DISCOVERED_EXTERNALS('{{module-to-id module.specifier}}'), function() { return require('{{js-string-escape module.specifier}}'); });
+    d('{{js-string-escape module.specifier}}', EAI_DISCOVERED_EXTERNALS('{{module-to-id module.specifier}}'), function() { return esc(require('{{js-string-escape module.specifier}}')); });
   {{/each}}
   {{#each dynamicImports as |module|}}
     d('_eai_dyn_{{js-string-escape module.specifier}}', [], function() { return import('{{js-string-escape module.specifier}}'); });
   {{/each}}
   {{#each staticTemplateImports as |module|}}
     d('_eai_sync_{{js-string-escape module.key}}', [], function() {
       return function({{module.args}}) {
-        return require({{{module.template}}});
+        return esc(require({{{module.template}}}));
       }
     });
   {{/each}}

diff --git a/test-scenarios/leader-test.ts b/test-scenarios/leader-test.ts
@@ -41,7 +41,7 @@ Scenarios.fromProject(baseApp)
         unit: {
           'asset-test.js': `
             import { module, test } from 'qunit';
-            import * as example from 'images/thing.png';
+            import example from 'images/thing.png';
 
             module('Unit | webpack5', function () {
               test('can use webpack5 asset loading', function (assert) {

diff --git a/test-scenarios/static-import-test.ts b/test-scenarios/static-import-test.ts
@@ -43,6 +43,7 @@ function staticImportTest(project: Project) {
               ],
               allowAppImports: [
                'lib/**',
+               '**/*.txt',
                'assets/*.specialfile',
               ],
               webpack: {
@@ -52,6 +53,10 @@ function staticImportTest(project: Project) {
                       test: /\.specialfile/,
                       use: 'specialfile-loader',
                     },
+                    {
+                      test: /\.txt/,
+                      type: 'asset/resource',
+                    },
                   ],
                 },
               },
@@ -64,6 +69,17 @@ function staticImportTest(project: Project) {
       'reexport.js': `
           export { default as innerLib } from 'inner-lib';
         `,
+      'uses-an-asset.js': `
+        import txtURL from './images/example.txt';
+        export default async function fetchTxt() {
+          let response = await fetch(txtURL);
+          let body = await response.text();
+          return body;
+        }
+      `,
+      images: {
+        'example.txt': 'here is some text',
+      },
       components: {
         'hello-world.js': `
             import Component from '@ember/component';
@@ -191,6 +207,17 @@ function staticImportTest(project: Project) {
               });
             });
           `,
+        'asset-test.js': `
+          import { module, test } from 'qunit';
+          import loadTxt from '@ef4/app-template/uses-an-asset';
+
+          module('Unit | reexports are found', function () {
+            test('can load an asset URL', async function (assert) {
+              let txt = await loadTxt();
+              assert.equal(txt, 'here is some text');
+            });
+          });        
+        `,
         'import-into-tests-test.js': `
             import { module, test } from 'qunit';
             import { capitalize } from 'lodash-es';