Rust comile no run in nextjs12? about swc-plugin-another-transform-imports

[Caesar-APAX]

QQ: 454451758, thanks

[lonelyhentxi]

QQ: 454451758, thanks

@Caesar-APAX

This is due to swc team made one breaking change swc-project/swc#5591.

To resolve it, I refactor my code, and release a new version 0.2.0.

If you are using next.js, you can append the follow lines to .next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    swcPlugins: [
      [
        "swc-plugin-another-transform-imports",
        {
          "antd": {
            "transform": "antd/es/${member}",
            "skipDefaultConversion": false,
            "preventFullImport": true,
            "style": "antd/es/${member}/style",
            "memberTransformers": ["dashed_case"]
          },
          "lodash": {
              "transform": "lodash/${member}",
              "preventFullImport": true
            }
        }
      ]
    ],
  },
 ...othersConfigs
}

module.exports = nextConfig

And if your are using antd, please add less-loader by your self

[Caesar-APAX]

@lonelyhentai Can you update the githup source code? We wan't to fork your code. Thanks

[lonelyhentxi]

@lonelyhentai Can you update the githup source code? We wan't to fork your code. Thanks

Updated

[Caesar-APAX]

@lonelyhentai

import Button from './button';
^^^^^^

SyntaxError: Cannot use import statement outside a module

yarn dev, nextjs throw a warning errors.

[Caesar-APAX]

https://github.com/Magento-Headless/Magento-Nextjs-Antd-Headless

This is my githup nextjs repo, can you help run the rust compile antd? Thanks

[lonelyhentxi]

https://github.com/Magento-Headless/Magento-Nextjs-Antd-Headless

This is my githup nextjs repo, can you help run the rust compile antd? Thanks

@Caesar-APAX

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.REACT_APP_BUNDLE_VISUALIZE === '1'
})

const withAntdLess = require('next-plugin-antd-less');

const isProd = process.env.NODE_ENV === 'production'

module.exports = (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = withAntdLess({
    reactStrictMode: true,
    swcMinify: true,
    compress: false,
    distDir: '.next',
    generateEtags: false,
    pageExtensions: ['tsx', 'ts'],
    experimental: {
      swcPlugins: [
        [
          'swc-plugin-another-transform-imports',
          {
            antd: {
              transform: 'antd/lib/${member}',
              skipDefaultConversion: false,
              preventFullImport: true,
              style: 'antd/lib/${member}/style',
              memberTransformers: ['dashed_case']
            }
          }
        ],
        [
          '@swc/plugin-styled-components',
          {
            namespace: 'headless',
            ssr: true,
            displayName: true,
            fileName: false,
            minify: true,
            pure: true,
            transpileTemplateLiterals: true
          }
        ]
      ]
    },
    serverRuntimeConfig: {
      // Will only be available on the server side
    },
    publicRuntimeConfig: {
      // Will be available on both server and client
    },
  })


  return isProd ? withBundleAnalyzer(nextConfig) : nextConfig;
}

I apologize for not replying in time, I am usually too busy during the day and only take some time to reply in the evening. The case above is not written in detail, and may even be a bit misleading, which is my fault.

Given that you are using next.js, which requires the next-transpile-modules package for the files in node_modules to compile, and needs to include all the modules that may need to be compiled in the next-transpile-modules list, I would suggest that antd/lib replace antd/ es to avoid doing this annoying work.

Also, antd's less dependency has some special configuration, and changing the webpack configuration directly will cause nextjs' default css-loader-related configuration to fail. Therefore, it is recommended that you use next-plugin-antd-less to handle antd less-related configuration directly.

[Caesar-APAX]

@lonelyhentai You rust plugin update the 0.2.0, but this version can't not ued in next12, the lastest version can run on the next13. Can you support a version to run in the next12.x.0. Thanks

[lonelyhentxi]

@lonelyhentai You rust plugin update the 0.2.0, but this version can't not ued in next12, the lastest version can run on the next13. Can you support a version to run in the next12.x.0. Thanks

@Caesar-APAX can you give the detailed version next.js, @swc/core and @swc/cli of your real used project package-lock.json?😂

[Caesar-APAX]

@lonelyhentai The nextjs version 12.3.3, please confirm the rust plugin can run.

For next13, the antd design v5 use the CSS-IN-JSS, not used less process language.

[lonelyhentxi]

@lonelyhentai The nextjs version 12.3.3, please confirm the rust plugin can run.

For next13, the antd design v5 use the CSS-IN-JSS, not used less process language.

@Caesar-APAX

For next.js 12.3.3, please use the new 0.1.5 version, and edit your .next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.REACT_APP_BUNDLE_VISUALIZE === '1'
})

const withAntdLess = require('next-plugin-antd-less');

const isProd = process.env.NODE_ENV === 'production'

module.exports = (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = withAntdLess({
    reactStrictMode: true,
    swcMinify: true,
    compress: false,
    distDir: '.next',
    generateEtags: false,
    pageExtensions: ['tsx', 'ts'],
    compiler: {
      styledComponents: {
        ssr: true,
        displayName: true,
        fileName: false,
        minify: true,
        namespace: 'headless',
        pure: true,
        transpileTemplateLiterals: true
      }
    },
    experimental: {
      swcPlugins: [
        [
          'swc-plugin-another-transform-imports',
          {
            antd: {
              transform: 'antd/lib/${member}',
              skipDefaultConversion: false,
              preventFullImport: true,
              style: 'antd/lib/${member}/style',
              memberTransformers: ['dashed_case']
            }
          }
        ]
      ]
    },
    serverRuntimeConfig: {
      // Will only be available on the server side
    },
    publicRuntimeConfig: {
      // Will be available on both server and client
    },
  })


  return isProd ? withBundleAnalyzer(nextConfig) : nextConfig;
}

Since the semantic version association of @swc/core (npm) and swc_core (rust) for nextjs is still experimental. nextjs has a lot of breaking change in the swc native plugin mechanism between major and even minor versions.

I released 0.1.4 in the early stages of nextjs 12.2.x; version 0.2.0 works with next.js 13.0.x, but not with 12.x.x; version 0.1.5 has just been released to address the next.js 13.3.x adaptation issue. Hopefully this compatibility issue will be resolved in a later version of nextjs and swc.

You can use version 0.1.5, I forked your example project, downgraded next.js to 12.3.3 and it works correctly. https://github.com/lonelyhentai/Magento-Nextjs-Antd-Headless-issue-fix-demo

In addition, the next-plugin-antd-less plugin was introduced because antd officially references less files directly in the entry point of each of its lib/es directories, and you must deal with less if you don't want to introduce dist to cause the introduction of full styles.

I also noticed that you have introduced @swc/plugin-styled-components in your project, which is natively integrated by next.js, and you can modify it as in the example above.

[Caesar-APAX]

@lonelyhentai Thank you very much.