ACUL js files not built in correct format

Get Help
,
1

I am building the acul react boilerplate app and have configured my tenant through the management API to call out for the file \assets\login\index.js in my static folder. I see the request for the file come through my browser after making the management API call so I believe it is configured correctly, but the browser seems to be failing to process the js file as I am getting
Uncaught SyntaxError: Cannot use import statement outside a module Index.js:1.

I did also try to configure a vite bundle config since a lot of the ACUL resources show configuration with a bundle but the docs suggest the regular build should be a production option.

3

Hi @daenzer.gabriel

The issue might be caused by the fact that the Auth0 UL loads the custom script using a standard <script> tag and not <script type=module> one.

Could you please try the following:

  • Intall Vite as a Dev Dependency using:
npm install vite @vitejs/plugin-react --save-dev
  • Create a vite.config.js file. Should look something like:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'src/index.js', 
      name: 'Auth0CustomLogin',
      fileName: (format) => `index.js`, 
      formats: ['umd']
    },
    minify: false
  },
});
  • Update your package.json:
    // your package.json "scripts": { "start": "vite", "build": "vite build", "serve": "vite preview" }
  • Build and Deploy the application

Please let me know if the following works for you!

Kind Regards,
Nik