fix: fully specify resolve path with .js extension

Relatively imported modules need to have the .js or /index.js extension to be added to the import path in order to resolve an actual path, when working with esm in environments, where a fully specified path is the default (such as in a create react app with webpack 5, which, if not ejected and changed, has resolve.fullySpecified set to true).
ionic-team · May 25, 2023 · 60432c1 · 60432c1
1 parent a5af0ca
commit 60432c1
Show file tree

Hide file tree

Showing 15 changed files with 33 additions and 30 deletions.
diff --git a/packages/react-output-target/__tests__/generate-react-components.spec.ts b/packages/react-output-target/__tests__/generate-react-components.spec.ts
@@ -52,7 +52,7 @@ describe('generateProxies', () => {
       `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated react proxies */
-import { createReactComponent } from './react-component-lib';
+import { createReactComponent } from './react-component-lib/index.js';
 
 import type { JSX } from 'component-library';
 
@@ -77,7 +77,7 @@ applyPolyfills().then(() => defineCustomElements());
       `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated react proxies */
-import { createReactComponent } from './react-component-lib';
+import { createReactComponent } from './react-component-lib/index.js';
 
 import type { JSX } from 'component-library';
 
@@ -102,7 +102,7 @@ defineCustomElements();
       `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated react proxies */
-import { createReactComponent } from './react-component-lib';
+import { createReactComponent } from './react-component-lib/index.js';
 
 import type { JSX } from 'component-library';
 
@@ -125,7 +125,7 @@ import type { JSX } from 'component-library';
       `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated react proxies */
-import { createReactComponent } from './react-component-lib';
+import { createReactComponent } from './react-component-lib/index.js';
 
 import type { JSX } from 'component-library/components';
 
@@ -149,7 +149,7 @@ import type { JSX } from 'component-library/components';
       `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated react proxies */
-import { createReactComponent } from './react-component-lib';
+import { createReactComponent } from './react-component-lib/index.js';
 
 import type { JSX } from 'component-library/custom-dir/hello';
 

diff --git a/packages/react-output-target/react-component-lib/createComponent.tsx b/packages/react-output-target/react-component-lib/createComponent.tsx
@@ -1,6 +1,6 @@
 import React, { createElement } from 'react';
 
-import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils/index.js';
 
 export interface HTMLStencilElement extends HTMLElement {
   componentOnReady(): Promise<this>;

diff --git a/packages/react-output-target/react-component-lib/createOverlayComponent.tsx b/packages/react-output-target/react-component-lib/createOverlayComponent.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { OverlayEventDetail } from './interfaces';
-import { StencilReactForwardedRef, attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
+import { StencilReactForwardedRef, attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils/index.js';
 
 interface OverlayElement extends HTMLElement {
   present: () => Promise<void>;

diff --git a/packages/react-output-target/react-component-lib/index.ts b/packages/react-output-target/react-component-lib/index.ts
@@ -1,2 +1,2 @@
-export { createReactComponent } from './createComponent';
-export { createOverlayComponent } from './createOverlayComponent';
+export { createReactComponent } from './createComponent.js';
+export { createOverlayComponent } from './createOverlayComponent.js';
diff --git a/packages/react-output-target/react-component-lib/utils/attachProps.ts b/packages/react-output-target/react-component-lib/utils/attachProps.ts
@@ -1,4 +1,4 @@
-import { camelToDashCase } from './case';
+import { camelToDashCase } from './case.js';
 
 export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => {
   // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first

diff --git a/packages/react-output-target/react-component-lib/utils/index.tsx b/packages/react-output-target/react-component-lib/utils/index.tsx
@@ -46,5 +46,5 @@ export const defineCustomElement = (tagName: string, customElement: any) => {
   }
 };
 
-export * from './attachProps';
-export * from './case';
+export * from './attachProps.js';
+export * from './case.js';
diff --git a/packages/react-output-target/src/index.ts b/packages/react-output-target/src/index.ts
@@ -1,2 +1,2 @@
-export { reactOutputTarget } from './plugin';
+export { reactOutputTarget } from './plugin.js';
 export type { OutputTargetReact } from './types';
diff --git a/packages/react-output-target/src/output-react.ts b/packages/react-output-target/src/output-react.ts
@@ -1,6 +1,6 @@
 import path from 'path';
 import type { OutputTargetReact, PackageJSON } from './types';
-import { dashToPascalCase, normalizePath, readPackageJson, relativeImport, sortBy } from './utils';
+import { dashToPascalCase, normalizePath, readPackageJson, relativeImport, sortBy } from './utils.js';
 import type { CompilerCtx, ComponentCompilerMeta, Config, CopyResults, OutputTargetDist } from '@stencil/core/internal';
 
 /**
@@ -62,7 +62,7 @@ export function generateProxies(
   const imports = `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated react proxies */
-import { createReactComponent } from './react-component-lib';\n`;
+import { createReactComponent } from './react-component-lib/index.js';\n`;
 
   /**
    * Generate JSX import type from correct location.

diff --git a/packages/react-output-target/src/plugin.ts b/packages/react-output-target/src/plugin.ts
@@ -1,7 +1,7 @@
 import type { Config, OutputTargetCustom } from '@stencil/core/internal';
-import { normalizePath } from './utils';
+import { normalizePath } from './utils.js';
 import type { OutputTargetReact } from './types';
-import { reactProxyOutput } from './output-react';
+import { reactProxyOutput } from './output-react.js';
 import path from 'path';
 
 /**

diff --git a/packages/vue-output-target/__tests__/output-vue.spec.ts b/packages/vue-output-target/__tests__/output-vue.spec.ts
@@ -23,7 +23,7 @@ describe('generateProxies', () => {
       `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';
+import { defineContainer } from './vue-component-lib/utils.js';
 
 import type { JSX } from 'component-library';
 
@@ -48,7 +48,7 @@ applyPolyfills().then(() => defineCustomElements());
       `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';
+import { defineContainer } from './vue-component-lib/utils.js';
 
 import type { JSX } from 'component-library';
 
@@ -73,7 +73,7 @@ defineCustomElements();
       `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';
+import { defineContainer } from './vue-component-lib/utils.js';
 
 import type { JSX } from 'component-library';
 
@@ -95,7 +95,7 @@ import type { JSX } from 'component-library';
       `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';
+import { defineContainer } from './vue-component-lib/utils.js';
 
 import type { JSX } from 'component-library/components';
 
@@ -118,7 +118,7 @@ import type { JSX } from 'component-library/components';
       `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';
+import { defineContainer } from './vue-component-lib/utils.js';
 
 import type { JSX } from 'component-library/custom-dir/hello';
 

diff --git a/packages/vue-output-target/package.json b/packages/vue-output-target/package.json
@@ -50,6 +50,9 @@
       "json",
       "jsx"
     ],
+    "moduleNameMapper": {
+      "^(\\.{1,2}/.*)\\.[jt]s$": "$1"
+    },
     "testURL": "http://localhost"
   },
   "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0",

diff --git a/packages/vue-output-target/src/generate-vue-component.ts b/packages/vue-output-target/src/generate-vue-component.ts
@@ -1,4 +1,4 @@
-import { dashToPascalCase } from './utils';
+import { dashToPascalCase } from './utils.js';
 import { ComponentCompilerMeta } from '@stencil/core/internal';
 import { ComponentModelConfig } from './types';
 

diff --git a/packages/vue-output-target/src/index.ts b/packages/vue-output-target/src/index.ts
@@ -1,2 +1,2 @@
-export { vueOutputTarget } from './plugin';
+export { vueOutputTarget } from './plugin.js';
 export type { OutputTargetVue, ComponentModelConfig } from './types';
diff --git a/packages/vue-output-target/src/output-vue.ts b/packages/vue-output-target/src/output-vue.ts
@@ -1,8 +1,8 @@
 import path from 'path';
 import type { OutputTargetVue, PackageJSON } from './types';
 import type { CompilerCtx, ComponentCompilerMeta, Config, OutputTargetDist } from '@stencil/core/internal';
-import { createComponentDefinition } from './generate-vue-component';
-import { normalizePath, readPackageJson, relativeImport, sortBy, dashToPascalCase } from './utils';
+import { createComponentDefinition } from './generate-vue-component.js';
+import { normalizePath, readPackageJson, relativeImport, sortBy, dashToPascalCase } from './utils.js';
 
 export async function vueProxyOutput(
   config: Config,
@@ -40,7 +40,7 @@ export function generateProxies(
   const imports = `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';\n`;
+import { defineContainer } from './vue-component-lib/utils.js';\n`;
 
   const generateTypeImports = () => {
     if (outputTarget.componentCorePackage !== undefined) {
@@ -50,7 +50,7 @@ import { defineContainer } from './vue-component-lib/utils';\n`;
       return `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}${dirPath}';\n`;
     }
 
-    return `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`;
+    return `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}.js';\n`;
   };
 
   const typeImports = generateTypeImports();

diff --git a/packages/vue-output-target/src/plugin.ts b/packages/vue-output-target/src/plugin.ts
@@ -1,7 +1,7 @@
 import type { Config, OutputTargetCustom } from '@stencil/core/internal';
-import { normalizePath } from './utils';
+import { normalizePath } from './utils.js';
 import type { OutputTargetVue } from './types';
-import { vueProxyOutput } from './output-vue';
+import { vueProxyOutput } from './output-vue.js';
 import path from 'path';
 
 export const vueOutputTarget = (outputTarget: OutputTargetVue): OutputTargetCustom => ({