fully obey nodejs esm import rules with exts

packages/chakra-ui/src/Block.tsx

@@ -1,7 +1,7 @@
 import { chakra, forwardRef } from '@chakra-ui/system';
 import { __DEV__ } from '@moblin/core';
 
-import { ContainerProps } from './props';
+import { ContainerProps } from './props.js';
 
 export interface BlockProps extends ContainerProps<'div'> {}
 

packages/chakra-ui/src/Box.tsx

@@ -1,8 +1,8 @@
 import { forwardRef } from "@chakra-ui/system";
 import { __DEV__, ContentPosition } from "@moblin/core";
 
-import { Flex, FlexItem } from "./Flex";
-import { ContainerProps } from "./props";
+import { Flex, FlexItem } from "./Flex.js";
+import { ContainerProps } from "./props.js";
 
 export interface BoxOptions {
   valign?: ContentPosition;

packages/chakra-ui/src/Flex.tsx

@@ -11,8 +11,8 @@ import {
   unsafeCoerce,
 } from "@moblin/core";
 
-import { ContainerProps, SafeFlexItemProps } from "./props";
-import { WithChildren } from "./react";
+import { ContainerProps, SafeFlexItemProps } from "./props.js";
+import { WithChildren } from "./react.js";
 
 export interface FlexItemProps extends WithChildren, SafeFlexItemProps {
   alignSelf?: AlignSelf;

packages/chakra-ui/src/List.tsx

@@ -2,7 +2,7 @@ import { forwardRef, SystemProps } from "@chakra-ui/system";
 import { __DEV__ } from "@moblin/core";
 import { Children, isValidElement } from "react";
 
-import { Flex, FlexItem, FlexProps } from "./Flex";
+import { Flex, FlexItem, FlexProps } from "./Flex.js";
 
 export interface ListProps extends FlexProps {
   grow?: number;

packages/chakra-ui/src/Scrollable.tsx

@@ -10,7 +10,7 @@ import {
   unsafeCoerce,
 } from "@moblin/core";
 
-import { ContainerProps } from "./props";
+import { ContainerProps } from "./props.js";
 
 export interface ScrollableOptions {
   direction?: FlexDirection;

packages/chakra-ui/src/hierarchy.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react';
 
-import { WithChildren } from './react';
+import { WithChildren } from './react.js';
 
 export const HierarchyValidator = createContext<symbol | undefined>(undefined);
 

packages/chakra-ui/src/index.ts

@@ -1,7 +1,6 @@
-export * from "./Block";
-export * from "./Box";
-export * from "./Flex";
-export * from "./List";
-export * from "./react";
-export * from "./Scrollable";
-export * from "./Text";
+export * from "./Block.js";
+export * from "./Box.js";
+export * from "./Flex.js";
+export * from "./List.js";
+export * from "./Scrollable.js";
+export * from "./Text.js";

packages/core/src/utils.ts

@@ -1,4 +1,4 @@
-import { FlexDirection } from "./types";
+import { FlexDirection } from "./types.js";
 
 export function unsafeCoerce<T>(x: unknown): T {
   return x as T;

packages/dev/base.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "incremental": true,
     "target": "ES5",
-    "module": "ESNext",
+    "module": "NodeNext",
+    "moduleResolution": "nodenext",
     "lib": ["dom", "esnext"],
     "importHelpers": true,
     "sourceMap": true,
@@ -13,7 +14,6 @@
     "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "moduleResolution": "bundler",
     "jsx": "react-jsx",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,

packages/dev/bin.mjs

@@ -8,7 +8,7 @@ $.verbose = true;
 const commonFlags = "--rootDir src";
 
 const build = {
-  esm: `tsc ${commonFlags} --module esnext --outDir dist/esm --declaration true --declarationMap true --declarationDir dist/types`,
+  esm: `tsc ${commonFlags} --outDir dist/esm --declaration true --declarationMap true --declarationDir dist/types`,
 };
 
 const command = argv._.length === 1 ? argv._[0] : null;

packages/storybook-chakra-ui/.storybook/main.js

@@ -12,4 +12,7 @@ module.exports = {
   core: {
     builder: "webpack5",
   },
+  typescript: {
+    reactDocgen: false
+  }
 };

packages/storybook-chakra-ui/src/animatable-demo.tsx

@@ -1,7 +1,7 @@
 import { chakra, HTMLChakraProps, keyframes } from '@chakra-ui/system';
 import isChromatic from 'chromatic/isChromatic';
 
-import * as S from './storybook';
+import * as S from './storybook.js';
 
 interface DemoOptions {
   title?: string;

packages/storybook-chakra-ui/tsconfig.json

@@ -1,4 +1,8 @@
 {
   "include": ["./src/**/*"],
-  "extends": "../dev/base.json"
+  "extends": "../dev/base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  }
 }

packages/storybook-web/.storybook/main.js

@@ -5,4 +5,7 @@ module.exports = {
   core: {
     builder: "webpack5",
   },
+  typescript: {
+    reactDocgen: false
+  }
 };

packages/storybook-web/tsconfig.json

@@ -1,4 +1,8 @@
 {
   "include": ["./src/**/*"],
-  "extends": "../dev/base.json"
+  "extends": "../dev/base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  }
 }

packages/web/src/Box.ts

@@ -1,5 +1,5 @@
-import "./Flex";
-import "./FlexItem";
+import "./Flex.js";
+import "./FlexItem.js";
 
 import type { ContentPosition } from "@moblin/core";
 import { html, LitElement } from "lit";

packages/web/src/index.ts

@@ -1,3 +1,3 @@
-import "./Box";
-import "./Flex";
-import "./FlexItem";
+import "./Box.js";
+import "./Flex.js";
+import "./FlexItem.js";

packages/web/tsconfig.json

@@ -2,15 +2,15 @@
   "compilerOptions": {
     "lib": ["ES2015", "DOM"],
     "target": "ES5",
+    "module": "NodeNext",
+    "moduleResolution": "nodenext",
     "composite": true,
     "incremental": true,
     "declaration": true,
     "declarationDir": "dist/types",
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
-    "esModuleInterop": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler"
+    "esModuleInterop": true
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules/*"]