Open Closed

React.js importing problem #2027


User avatar
0
karolis created
  • ABP Framework version: v4.4.2
  • UI type: MVC
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes

Hello, I am getting this error: Uncaught SyntaxError: Cannot use import statement outside a module

I am trying to import npm package within .jsx file:

import {AgGridTable} from 'ag-grid-react'

The packages are provided via .cshtml file

src="~/libs/react/umd/react.development.js" 
src="~/libs/react-dom/umd/react-dom.development.js" 
src="~/libs/ag-grid-react/bundles/ag-grid-react.min.js"

Packages.json:

"type": "module:

I can access React methods like that without import, but this becomes a problem with other packages/libraries:

const { useState, useEffect } = React

So far I have tried changing types in script tag, package.json type and different script src files, but no luck. Can someone please explain how to fix import? Thank You!


3 Answer(s)
  • User Avatar
    0
    enisn created
    Support Team .NET Developer

    MVC bundling system does not support dynamic imports. If you use a 3rd party library that needs those imports, you need to bundle them together and serve it

  • User Avatar
    0
    karolis created

    MVC bundling system does not support dynamic imports. If you use a 3rd party library that needs those imports, you need to bundle them together and serve it

    Can you please provide instructions on how to bundle. I used rollup and .js it gave was having same import/export errors

  • User Avatar
    0
    enisn created
    Support Team .NET Developer

    I can't recommend an exact bundler. You have to chosse one according to your project requirements.

    Again, I can not recommend one of them directly but you may want to browse https://dev.to/underscorecode/javascript-bundlers-an-in-depth-comparative-is-webpack-still-the-best-bundler-in-2021-59jk

Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11