[Bug]: Unable to Compile Tokens

[elliot-huffman]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 15.65 GB / 31.60 GB
  Browsers:
    Edge: Chromium (122.0.2365.80)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/p/devbox/suspicious-bogdan-kqnwyc?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cltt96drb00073j6iatxtu4sq%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cltt96dra00023j6if96kou7l%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cltt96drb00043j6izyinjebv%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cltt96drb00063j6i18e8qcgv%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cltt96dra00023j6if96kou7l%2522%253A%257B%2522id%2522%253A%2522cltt96dra00023j6if96kou7l%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522cltt96drb00063j6i18e8qcgv%2522%253A%257B%2522id%2522%253A%2522cltt96drb00063j6i18e8qcgv%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltt96drb00053j6ij991evfb%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cltt96drb00053j6ij991evfb%2522%257D%252C%2522cltt96drb00043j6izyinjebv%2522%253A%257B%2522id%2522%253A%2522cltt96drb00043j6izyinjebv%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522cltt97pvx00um3j6ia2syvd0t%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cltt97pvx00um3j6ia2syvd0t%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Bug Description

Actual Behavior

fill this out
Error on compile of the page

Expected Behavior

fill this out
Successful compile of the page

Logs

⨯ ../node_modules/@fluentui/tokens/lib-commonjs/global/index.js:5:0
Module not found: Can't resolve '@swc/helpers/_/_export_star.js'

Import trace for requested module:
../node_modules/@fluentui/tokens/lib-commonjs/index.js
../node_modules/@fluentui/react-theme/lib-commonjs/index.js
../node_modules/@fluentui/react-components/lib-commonjs/index.js
./app/page.tsx
 ⨯ ../node_modules/@fluentui/tokens/lib-commonjs/global/index.js:5:0
Module not found: Can't resolve '@swc/helpers/_/_export_star.js'

Requested priority

Blocking

Products/sites affected

All that use the Fluent Project with the latest updates

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[elliot-huffman]

This happened with the latest update. I believe this to be part of the latest update as it didn't happen before updating to the latest version (9.47.0). I think since it has to do with the tokens package that this PR may have caused it:
#30770

[elliot-huffman]

Pinging @Hotell, @spmonahan and @ling1726 for visibility as they created or approved this PR.

[kidlj]

Same issue here with the latest @fluentui/react-component version.

[mojofawad]

+1

I was following this Excel Add In guide. Everything was working fine from the yo office (@fluentui/react-components": "^9.30.4") install, until I ran npm install @fluentui/react-calendar-compat and npm install @fluentui/react-datepicker-compat.

---

I removed the compat components and installed @fluentui/react-components.

Error thrown:

ERROR in ./node_modules/@fluentui/tokens/lib-commonjs/global/index.js 5:21-62
Module not found: Error: Package path ./_/_export_star.js is not exported from package /path/to/project/node_modules/@swc/helpers (see exports field in /path/to/project/node_modules/@swc/helpers/package.json)

[yzh503]

Got this error in next.js projects as well. A workaround is to replace all require("@swc/helpers/_/_export_star.js") with require("@swc/helpers/_/_export_star") in @fluentui/tokens. This will solve the issue temporarily.

In next.js, this replacement can be automated by adding a webpack loader in next.config.js:

webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
  config.module.rules.push({
    test: /\.js$/,
    include: [path.resolve(__dirname, 'node_modules/@fluentui/tokens')],
    use: [{
      loader: path.resolve(__dirname, 'swcHelpersLoader.js'),
    }]
  });
  return config;
}

swcHelpersLoader.js:

module.exports = function(source) {
  const modifiedSource = source.replace(
    /require\("@swc\/helpers\/_\/_export_star\.js"\)/g,
    `require("@swc/helpers/_/_export_star")`
  );
  return modifiedSource;
};

[dwarfered]

Got this error in next.js projects as well. A workaround is to replace all require("@swc/helpers/_/_export_star.js") with require("@swc/helpers/_/_export_star") in @fluentui/tokens. This will solve the issue temporarily.

In next.js, this replacement can be automated by adding a webpack loader in next.config.js:

webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
  config.module.rules.push({
    test: /\.js$/,
    include: [path.resolve(__dirname, 'node_modules/@fluentui/tokens')],
    use: [{
      loader: path.resolve(__dirname, 'swcHelpersLoader.js'),
    }]
  });
  return config;
}

swcHelpersLoader.js:

module.exports = function(source) {
  const modifiedSource = source.replace(
    /require\("@swc\/helpers\/_\/_export_star\.js"\)/g,
    `require("@swc/helpers/_/_export_star")`
  );
  return modifiedSource;
};

Appreciate the share, I tried to start a new project on the weekend and was immediately hit with this error and was stumped as to a work around.

[dwarfered]

For TypeScript projects this will look something like

next.config.mjs

/** @type {import('next').NextConfig} */
import path from 'path';

const nextConfig = {
  // Extend the Webpack configuration
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Add a new rule for processing .js files
    config.module.rules.push({
      test: /\.js$/,
      include: [path.resolve("node_modules/@fluentui/tokens")],
      use: [
        {
          loader: path.resolve("swcHelpersLoader.js"),
        },
      ],
    });

    // Return the modified configuration
    return config;
  },
};

export default nextConfig;

with [yzh503]'s swcHelpersLoader.js in the root of your project.

[hermanwenhe]

Same issue here. Anyone has an idea of how to fix it?

[dwarfered]

Same issue here. Anyone has an idea of how to fix it?

Above dude, just edit your next.config.js or next.config.mjs and create a swcHelpersLoader.js as per yzh503 in your project until a fix is released.

[micahgodbolt]

This will be fixed in the upcoming release (process now)