How to use npm package with ASP.NET Web Forms

Question

I have a web project that needs to use a model on GitHub
lasso-canvas-image
react-lasso-select
But the model needs to be managed by npm
I tried to install node in NuGet, and installed the model using npm command in PowerShell

In the folder, you can see that the model has been installed, but an error message will appear "Cannot use import statement outside a module"

In the file manager, I don't see the relevant files for the model
I'm guessing that's the reason, but it still doesn't work after I put the file in
what should I do?

Answer 1

Hi @BananaLin ,

 Cannot use import statement outside a module  

You can try the following three methods to solve this problem.
Solution 1 – Add “type”: “module” to package.json.
Adding “type”: “module” to package.json will tell Node you are using ES2015 modules(es modules), which should get solve the error.

{  
         // ...  
         "type": "module",  
         // ...  
}  

Solution 2 – Add type=”module” attribute to the script tag.
Another reason we get this error is if we are loading the script from the src directory instead of the built file inside the dist directory.

<script type="module" src="some_script.js"></script>  

Solution 3 – Use import and require to load the modules
In some cases, we may have to use both import and require statements to load the module properly.
For Example –

import { parse } from 'node-html-parser';  
   parse = require('node-html-parser');  

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hello @Lan Huang-MSFT
Thank you for the method, unfortunately it doesn't work.

In the file manager, there are no files under the Properties folder
But in the path of the folder, you can see the file exists

First, I try to modify the content of the .json file in the folder, but it didn't work.

I have tried all the solutions, still the same error message. "Cannot use import statement outside a module"
I think your approach is right, but I may have other problems.

I try to put a folder into a project, and get an error message.
"Top_level_declarations_in_d_ts_files_must_start_with_either_a_declare_or_export_modifier_1046": ".d.ts 檔案中的最上層宣告必須以 'declare' 或 'export' 修飾元開頭。"

Am I installing npm the wrong way in ASP.NET Web Forms?

Answer 3

Hi @BananaLin ,

In the file manager, there are no files under the Properties folder
But in the path of the folder, you can see the file exists

For this problem, you can try the following method.
On you solution explorer, click on the "Show All Files" icon, which is the second from the left. Your "missing" files and folders will now show up, but will be grayed out. Right-click on them and select "Include in Project".


Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 4

@Lan Huang-MSFT

Thanks for your help
Following your way, I have put the model into the project, but shows more error messages.

After checking for error messages
I tried to install React and Typescript using npm command
and the "npm install @types/node --save-dev" command
The error message displayed is as follows

I would like to ask if the steps I have installed are correct.
My NuGet has been installed with：

The way I use num is as follows：