question

BananaLin-4905 avatar image
0 Votes"
BananaLin-4905 asked BananaLin-4905 commented

How to use npm package with ASP.NET Web Forms

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
177073-004.png

177074-001.png

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"
177016-005.png

177075-003.png

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?
177077-006.png


dotnet-aspnet-webforms
004.png (61.3 KiB)
001.png (138.0 KiB)
005.png (64.4 KiB)
003.png (3.2 KiB)
006.png (21.1 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LanHuang-MSFT avatar image
0 Votes"
LanHuang-MSFT answered

Hi @BananaLin-4905,

  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.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

BananaLin-4905 avatar image
0 Votes"
BananaLin-4905 answered

Hello @LanHuang-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
177178-002.png




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

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' 修飾元開頭。"
177264-004.png



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





002.png (64.5 KiB)
003.png (145.0 KiB)
004.png (102.7 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LanHuang-MSFT avatar image
0 Votes"
LanHuang-MSFT answered

Hi @BananaLin-4905,

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".
177386-1.jpg
177416-2.jpg
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.



1.jpg (99.7 KiB)
2.jpg (110.1 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

BananaLin-4905 avatar image
0 Votes"
BananaLin-4905 answered BananaLin-4905 commented

@LanHuang-MSFT

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

177687-001.png

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
177660-002.png

I would like to ask if the steps I have installed are correct.
My NuGet has been installed with:
177678-003.png
177718-004.png


The way I use num is as follows:
177650-005.png
177751-006.png



001.png (77.5 KiB)
002.png (155.3 KiB)
003.png (70.1 KiB)
004.png (48.0 KiB)
005.png (24.7 KiB)
006.png (9.8 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @BananaLin-4905,
Maybe you can try the following method.
Start PowerShell and navigate to the folder where package.json is located, then run npm install Restart Visual Studio once the installation is complete.
You can also try deleting the node_modules folder and then run npm install.
Hope this solves your problem.
Best regards,
Lan Huang

0 Votes 0 ·

Thanks for your help, although still no success :(
I decided to give up using this model and find another way to complete my work.

0 Votes 0 ·