# ACUL js files not built in correct format

**URL:** <https://community.auth0.com/t/acul-js-files-not-built-in-correct-format/196310>\
**Category:** Get Help\
**Tags:** adaptive-mfa, mfa\
**Created:** [January 15, 2026, 3:13pm UTC](https://community.auth0.com/t/acul-js-files-not-built-in-correct-format/196310 "2026-01-15T15:13:48Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![daenzer.gabriel](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/daenzer.gabriel/32/71029_2.png) [@daenzer.gabriel](https://community.auth0.com/u/daenzer.gabriel)\
**Post date:** [January 15, 2026, 3:13pm UTC](https://community.auth0.com/t/acul-js-files-not-built-in-correct-format/196310/1 "2026-01-15T15:13:48Z")

</div>

I am [building](https://github.com/auth0-samples/auth0-acul-samples/blob/main/react/package.json#L9) 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.

---

<div class="post-metadata">

**Author:** ![nik.baleca](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/nik.baleca/32/68749_2.png) [@nik.baleca](https://community.auth0.com/u/nik.baleca)\
**Post date:** [January 15, 2026, 5:29pm UTC](https://community.auth0.com/t/acul-js-files-not-built-in-correct-format/196310/3 "2026-01-15T17:29:18Z")

</div>

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:

```auto
npm install vite @vitejs/plugin-react --save-dev

```

- Create a vite.config.js file. Should look something like:

```auto
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

---

<div class="post-metadata">

**Author:** ![daenzer.gabriel](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/daenzer.gabriel/32/71029_2.png) [@daenzer.gabriel](https://community.auth0.com/u/daenzer.gabriel)\
**Post date:** [January 15, 2026, 6:46pm UTC](https://community.auth0.com/t/acul-js-files-not-built-in-correct-format/196310/4 "2026-01-15T18:46:53Z")

</div>

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:

```auto
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.`

---

<div class="post-metadata">

**Author:** ![nik.baleca](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/nik.baleca/32/68749_2.png) [@nik.baleca](https://community.auth0.com/u/nik.baleca)\
**Post date:** [January 15, 2026, 7:15pm UTC](https://community.auth0.com/t/acul-js-files-not-built-in-correct-format/196310/5 "2026-01-15T19:15:24Z")

</div>

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?

```auto
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

---

<div class="post-metadata">

**Author:** ![daenzer.gabriel](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/daenzer.gabriel/32/71029_2.png) [@daenzer.gabriel](https://community.auth0.com/u/daenzer.gabriel)\
**Post date:** [January 15, 2026, 7:31pm UTC](https://community.auth0.com/t/acul-js-files-not-built-in-correct-format/196310/6 "2026-01-15T19:31:40Z")

</div>

That does look like the react conflict issue 🥳 thanks!! Now I’m just hitting the error

`Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘appendChild’)`

From the [main.tsx](https://github.com/auth0-samples/auth0-acul-samples/blob/main/react/src/main.tsx#L20) file. I’ll also start looking into this as I have not seen this one yet.

---

<div class="post-metadata">

**Author:** ![daenzer.gabriel](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/daenzer.gabriel/32/71029_2.png) [@daenzer.gabriel](https://community.auth0.com/u/daenzer.gabriel)\
**Post date:** [January 16, 2026, 1:38pm UTC](https://community.auth0.com/t/acul-js-files-not-built-in-correct-format/196310/7 "2026-01-16T13:38:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nik.baleca](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/nik.baleca/32/68749_2.png) [@nik.baleca](https://community.auth0.com/u/nik.baleca)\
**Post date:** [January 16, 2026, 4:19pm UTC](https://community.auth0.com/t/acul-js-files-not-built-in-correct-format/196310/8 "2026-01-16T16:19:20Z")

</div>

My pleasure!

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

Kind Regards,  
Nik

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [January 30, 2026, 4:20pm UTC](https://community.auth0.com/t/acul-js-files-not-built-in-correct-format/196310/9 "2026-01-30T16:20:20Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.