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

4

Yea, I was trying something a bit like that yesterday my vite.config to get my configuration closer to ACUL calling out for an actual bundle.js file. This is my bundling file that I also have been trialing:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env': {},
    global: {}
  },
  resolve: {
    alias: {
      process: 'process/browser',
      '@': path.resolve(__dirname, './src')
    },
    dedupe: ['react', 'react-dom']
  },
  build: {
    outDir: 'dist-bundle',
    lib: {
      entry: 'src/main.tsx',
      name: 'CustomACULComponents',
      fileName: () => 'bundle.js',
      formats: ['umd']
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        },
        name: 'CustomACULComponents',
        inlineDynamicImports: true,
        manualChunks: undefined
      }
    },
    minify: false,
    sourcemap: true,
    target: 'es2015'
  }
})

I also added a bundle specific build referencing that config
ā€œbuild:bundleā€: ā€œvite build --config vite.bundle.config.tsā€

This does seem to make it a little further but I cannot bypass this error

react-jsx-runtime.development.js:304 Uncaught TypeError: Cannot read properties of undefined (reading ā€˜__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADEā€™)

Iā€™m pretty sure this is because of Reach versions conflicting but my attempts to fix this are fruitless. See things like dedupe: [ā€˜reactā€™, ā€˜react-domā€™] in my build.

The includsion of the process library was also to bypass some runtime issues.
5

Thanks for the update. This indeed might be an issue due to conflicting React versions.

Could you try the following bundling file configuration and let me know if there are any changes in the behaviour?

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env': {},
    global: {}
  },
  resolve: {
    alias: {
      process: 'process/browser',
      '@': path.resolve(__dirname, './src')
    },
    dedupe: ['react', 'react-dom'] 
  },
  build: {
    outDir: 'dist-bundle',
    lib: {
      entry: 'src/main.tsx',
      name: 'CustomACULComponents',
      fileName: () => 'bundle.js',
      formats: ['umd']
    },
    minify: false,
    sourcemap: true,
    target: 'es2015'
  }
})

Basically, by removing rollupOptions, it should make React external and have Vite pull it in to make it part of the bundle since there might be an instance conflict in your current configuration. Unfortunately, your bundle.js will now be larger because it contains the entire React library.

Kind Regards,
Nik

6

That does look like the react conflict issue :partying_face: thanks!! Now Iā€™m just hitting the error

Uncaught (in promise) TypeError: Cannot read properties of null (reading ā€˜appendChildā€™)

From the main.tsx file. Iā€™ll also start looking into this as I have not seen this one yet.

7

I added a check for the DOM having loaded into the main.tsx and it is now rendering as expected. Thanks for the assistance!!

8

My pleasure!

If you have any other issues/concerns, you can always let us know!

Kind Regards,
Nik