Import amd (requirejs) modules into React

[bittu]

Hi,

We have a internal library written with requirejs. It is referenced as a git submodule in our React project (scaffolded using cra + ejected) as external dependency. All the imports worked fine out of the box and there were no issues with the amd files.

I wanted to migrate from cra to vite (for performance ofcourse). But i get the following error on the amd module import.

Uncaught SyntaxError: The requested module '/lib/fancy/js/Configuration.js' does not provide an export named 'default' (at apiConstants.js:5:8)

The Configuration.js is like this

  define(
    "fancy/Configuration",
    [
	"fancy/Logger"
    ],
	function(
		Logger
	)
  {
	"use strict";

	function Configuration() {
		this._config = {};
	}

 // ... some Config code
    return Configuration;
  })

I have tried adding rollup and babel plugins that transform amd to es6 but none of them worked. Could someone please help me with this.

Here is the vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgrPlugin from 'vite-plugin-svgr';
import { esbuildCommonjs } from '@originjs/vite-plugin-commonjs'
import amd from 'rollup-plugin-amd';
import { babel } from '@rollup/plugin-babel';


// https://vitejs.dev/config/
export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        esbuildCommonjs(['fancy']),
      ],
    },
  },
  resolve: {
    alias: {
      fancy: '/lib/fancy',
    }
  },
  plugins: [react(), svgrPlugin()],
  build: {
    commonjsOptions: {
      include: [/fancy/],
    },
    rollupOptions: {
      plugins: [
        amd({
          include: ['/lib/fancy/**'],
        }),
        babel({ babelHelpers: 'bundled',
          include: ['/lib/fancy/**'],
          exclude: ['node_modules/**'],
          presets: ['babel-preset-env'],
          plugins: ["transform-amd-to-commonjs", [
            'transform-amd-to-es6',
            {
              umdToAMDModules: false, // false by default
              amdToES6Modules: true, // true by default
              amdDefineES6Modules: true, // false by default
              ignoreNestedRequires: true, // false by default
              defineFunctionName: '__AMD', // __AMD by default
              defineModuleId: (moduleId) => { // No default provided
                // convert filenames to client-side module ids
              },
              ignores: [] // don't transform packages included here
            }
          ]]
        })
      ]
    }
  },
});

Thanks

[ccsenter]

Hi Sandeep,
were you able to make this work? I'm running into the same scenario, Storybook + Preact + Vite + AMD dependencies