Cannot import any module that is using umd( i guess)

[bugwheels94]

When I have a test like this

import { Input } from '../index.bundled';
import ReactDom from 'react-dom';
import { fixture, assert } from '@open-wc/testing';
import { html } from 'lit/static-html.js';

suite('my-element', () => {
	test('is defined', () => {
		const el = document.createElement('div');
		ReactDOM.render(/*#__PURE__*/ React.createElement(Input, null), el);
	});
});

This throws error like

      SyntaxError: The requested module '/__wds-outside-root__/1/node_modules/react-dom/index.js' does not provide an export named 'default'

Even with classnames module same error comes

[LarsDenBakker]

Web dev server and test runner do not make any alteration to your code. What you're seeing is standard browser behavior, es modules are a web standard and supported by the browser. UMD modules is a customer format, so you need to bring your own module loader or transform your code before loading it in the browser.

You can utilize rollup plugins to do this, for example the commonjs plugin, but usually it's better to look for es module variants instead.

[web-padawan]

Here is a web-dev-server config that should work with React + TypeScript:

import { esbuildPlugin } from '@web/dev-server-esbuild';
import { fromRollup } from '@web/dev-server-rollup';
import rollupCommonjs from '@rollup/plugin-commonjs';
import rollupNodeResolve from '@rollup/plugin-node-resolve';
import rollupReplace from '@rollup/plugin-replace';

const commonjs = fromRollup(rollupCommonjs);
const nodeResolve = fromRollup(rollupNodeResolve);
const replace = fromRollup(rollupReplace);

const devServerConfig = {
  plugins: [
    nodeResolve({
      browser: true,
      extensions: [
        '.js',
        '.jsx',
        '.ts',
        '.tsx',
        '.json',
      ],
      exportConditions: [
        'development',
      ],
    }),
    commonjs({
      include: [
        '**/node_modules/rbush/**/*',
        '**/node_modules/react/**/*',
        '**/node_modules/react-dom/**/*',
        '**/node_modules/scheduler/**/*',
      ],
    }),
    replace({
      values: {
        'process.env.NODE_ENV': '"DEVELOPMENT"',
      },
      preventAssignment: true,
    }),
    esbuildPlugin({
      ts: true,
      jsx: true,
      tsx: true,
    }),
  ],
};

export default devServerConfig;

Closing per above comment, as this is expected behavior and not a bug.