[Bug]: Cannot build if import package name include '@'

[puiks]

Version

npmPackages: @rslib/core: 0.0.14

Details

This is the examples of module federation, i found that would be error when i build, and i just import the button from @shopify/polaris.

import { init, loadRemote } from '@module-federation/enhanced/runtime';
import { Suspense, createElement, lazy } from 'react';
import { CounterButton } from './CounterButton';
import { useCounter } from './useCounter';
import { Button } from '@shopify/polaris'; // what i change

init({
  name: 'rslib_provider',
  remotes: [
    {
      name: 'mf_remote',
      entry: 'http://localhost:3002/mf-manifest.json',
    },
  ],
});

export const Counter: React.FC = () => {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <Suspense fallback={<div>loading</div>}>
        {createElement(
          lazy(
            () =>
              loadRemote('mf_remote') as Promise<{
                default: React.FC;
              }>,
          ),
        )}
      </Suspense>
      <Button primary />
      <h2>
        <span id="mf-e2e-lib-title">Counter From Rslib MF Format: </span>
        <span id="mf-e2e-lib-content">{count}</span>
      </h2>
      <CounterButton id="mf-e2e-lib-decrease" onClick={decrement} label="-" />
      <CounterButton id="mf-e2e-lib-increase" onClick={increment} label="+" />
    </div>
  );
};

And this is the error when building the mf-react-componet

I think it might be an invalid identifier including '@' symbol, but how to solve that, could you please help review this？

Reproduce link

n

Reproduce Steps

1. cd examples/module-federation/mf-react-component
2. yarn add @shopify-polaris@6.6.0
3. add import {Button} from '@shopify-polaris' into the index.tsx
4. yarn build

[nyqykk]

Can you add this pkg into devDependencies? if you want to build this pkg into your assets you should do that because rslib will auto external pkg which is dependencies or peerDependencies.
And in mf format externalType is set to var, it means @xxx is not a standard syntax, so you get this error

[nyqykk]

Another solution is to set externalType to global, i have modify this #331

[puiks]

Can you add this pkg into devDependencies? if you want to build this pkg into your assets you should do that because rslib will auto external pkg which is dependencies or peerDependencies. And in mf format externalType is set to var, it means @xxx is not a standard syntax, so you get this error

Got it. But i think it must be dependencies in mf mode, and i would like to share the @shopify/polaris as common dependencies by the shared configuration.

[fi3ework]

But i think it must be dependencies in mf mode

Rslib enables autoExteranl by default, which means even @module-federation/enhanced/runtime is in dev dep, it will be bundled into the output as well. You could refer to https://modernjs.dev/module-tools/en/api/config/build-config.html#autoexternal as the Rslib's documentation is not finished yet, but the functionality is identical.

It should not be placed in dependencies because the output won't be bundled anymore after Rslib's build process, so it must be bundled ahead and not externalized.

and i would like to share the @shopify/polaris as common dependencies by the shared configuration.

And @shopify/polaris could be defined to be shared by shared.

[puiks]

But i think it must be dependencies in mf mode

Rslib enables autoExteranl by default, which means even @module-federation/enhanced/runtime is in dev dep, it will be bundled into the output as well. You could refer to https://modernjs.dev/module-tools/en/api/config/build-config.html#autoexternal as the Rslib's documentation is not finished yet, but the functionality is identical.

It should not be placed in dependencies because the output won't be bundled anymore after Rslib's build process, so it must be bundled ahead and not externalized.

and i would like to share the @shopify/polaris as common dependencies by the shared configuration.

And @shopify/polaris could be defined to be shared by shared.

Thanks. And what i understand is that there are 2 ways to avoid the error.

1. set the configuration autoExternal: false
2. move the deps to devDeps

If that is correct, for my case, i think the first one is better, because some deps should not be placed in devDeps. In mf mode, it work, but in npm mode, it doesn't work.

[fi3ework]

For npm package consumers, they should not use the mf output. And when publishing to npm, mf output won't be build at all. So putting it to dev dep makes sense for me.

[puiks]

Thanks. I will take another look later.