How to correctly import script from extension package in TS

Cocos Creator
#1

I wrote an extension package and try to import a script from the extension into one of my game scripts written in TS.
The way I do that is to specify only a name of the script to import (without relative path or so):

import MyComponent from 'MyComponent';

It works. However my IDE can’t find 'MyComponent` and highlights me such import as an error. As a result I can’t use any members context suggestions while using MyComponent in the code. The errors checking is disabled as well.

Is there any other correct way to import a script from extension package into one of scripts in the assets?

2 Likes
#2

@ymiroshnyk what version of Creator are you using?

#3

I also found that in built application, some of my ‘imports by name’ don’t work. On the start of the application it gives an error:

image
image1025×146 7.41 KB

In DEV mode everything works fine, but not in built application.

#4

@yufang.wu version 2.4.3

#5

cocos creator only support import by file path, you can refer the document of javascript require, typescript as same as javascript . If the problem still cannot be solved, please provide a test project.

https://docs.cocos.com/creator/manual/en/scripting/modular-script.html#require

#6

Let me describe my question in details. Let’s say we have two scripts in the project folder:

/assets/Scripts/MyScript.ts
/<packages_folder>/MyPackage/MyComponent.ts

I believe it is pretty common thing to import classes from extension packages.
Usually, <packages_folder> is packages and is placed in the root of the project. However, as I understood, this folder can be moved/renamed to any suitable place inside the project folder.
So, my question is: How to correctly import MyComponent from MyScript?

Will it be correct way to import like this:
import MyComponent from '../../<packages_folder>/MyPackage/MyComponent';

#7

Yes, if you code in vscode，bellow code is fine, such code does not have syntax errors.

import MyComponent from '../../<packages_folder>/MyPackage/MyComponent'

and if you code like bellow, editor also can compile ok, because it only check the file name, but has have syntax errors in vscode.

import MyComponent from 'MyComponent'

Note: Don’t use same script name in editor, it would cause error, all the scripts need in assets sub path unless npm packages.

#8

Where is the project?

#9

The project is in the root.

#10

@huanxinyin I tried to use such relative path in the import. It works fine in the Editor and in the built application, but when I try to start it in the browser DEV preview, I have an error:
Can not find deps [../../../packages/neutrinoparticles/runtime/NeutrinoComponent] for path : preview-scripts/assets/neutrinoparticles/components/NeutrinoEffect_water_stream.js

To be more specific, I have two scripts:
<project_dir>/assets/neutrinoparticles/components/NeutrinoEffect_water_stream.ts
<project_dir>/packages/neutrinoparticles/runtime/NeutrinoComponent.ts

And I import NeutrinoComponent into NeutrinoEffect_water_stream with following import:
import NeutrinoComponent from '../../../packages/neutrinoparticles/runtime/NeutrinoComponent';

#11

Please move the <project_dir>/packages/ to assets folder.

#12

@huanxinyin packages is Cocos Creator extensions folder. I try to import class from a script of neutrinoparticles extension. So, it can’t be moved to the assets.

#13

Sorry, I didn’t get you idea first, we talk it on bellow topic.

#14

@huanxinyin It’s not a neutrinoparticles issue. I think it’s more general issue. I believe many people might want to include some script from some extension. That’s what extensions need for. To extend functionality of Cocos and to be able to use it from the game.

So, for now the questions is:
Why in DEV mode in the browser including by relative path from extensions folder (like ‘…/…/…/packages/neutrinoparticles/runtime/NeutrinoComponent’) doesn’t work? While it works well in the editor and in the built application.