- 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)
-
0
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
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
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
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
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
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
