npm build:ios creates a file which references the src

[tuqire]

Hi,

So I appear to be seeing a weird issue, not sure if I am doing something stupid (apologies new to NativeScript).

I have taken this project down as described and ran npm run build:ios inside the repo. The file generated in dist/app/app.ios.js doesn't actually contain any transpiled code. Its export is a require of the src.main.js file. Removing the webpack helper functions, I am left with the below:

e.exports=require("/Users/USER/Documents/repos/nativescript-shared-components-spike/nativescript-app/src/main.js")

Is this by design? tns --path dist run ios causes an app crash with the following error file:///Users/USER/Documents/repos/nativescript-shared-components-spike/nativescript-app/src/styles.scss:3:563: JS ERROR SyntaxError: Invalid character: '@'.

Any help would be greatly appreciated.

[lewebsimple]

Did you initialize your project using vue init nativescript-vue/vue-cli-template nativescript-app?
What versions of Node / NPM are you using?
Do 'classic' NativeScript projects work in your environment? (i.e. tns create testapp)

[triniwiz]

@tuqire i'm getting the same problem to get rid of the Invalid character: '@' removed the import of the style and well android can't find the main file :/

[triniwiz]

Node v8.9.4
Npm 5.6.0

Some extra info

[lewebsimple]

Please share a repo with your project so we can test the actual core

[triniwiz]

https://github.com/triniwiz/nativescript-pager it's in the demo-vue 😃

[tuqire]

@lewebsimple yes I did initialise it like that. I have left work and don't have my laptop, so will get back to you Monday.

@triniwiz if you find a solution please do share it here.

[tuqire]

@lewebsimple

Node: 8.9.1
NPM: 5.7.1

I have just tried another bootstrap vue app and it worked fine. If it helps, I only installed nativescript on Friday, possibly something has changed in a new release?

[tuqire]

The fix was removing the nativescript-vue-externals from webpack.externals. Something about it is not playing nice with webpack. Doing some investigating now to figure out why.

[tuqire]

So debugged the issue.

nativescript-vue-externals looks for the string nativescript- in the names of our dependencies to know which dependencies to exclude. However, the first time it is called it is called with the projects path, meaning if the file path contains nativescript- or tns-core-modules the entire build process falls apart. Basically, rename your folder to not include either of those two strings.

[lewebsimple]

Maybe we should add a validation check for 'name' to prevent people from naming their projects nativescript-* ?

[tuqire]

Yes that would make sense, I think when spiking it is very convenient to name something weex-spike nativescript-spike etc. However, it still doesn't stop anyone renaming the folder later, hopefully this thread will help them.

[rigor789]

I think we need to figure out a better way to mark externals, and at this point I feel like a manually managed list might be a better idea. Or mark dependencies as external, and don't mark devDependencies as externals. This is probably a safe bet, because most people will --save their deps, and everything will work, just not get bundled and instead will be handled as external. This is fine, and when someone reaches the point where they would like to improve performance, they can just move the dependencies around, as long as this is documented.

[triniwiz]

So i think the way tns know it's a nativescript is by checking the package.json for the following it can be a lower platform version also

 "nativescript": {
        "platforms": {
            "android": "3.0.0",
            "ios": "3.0.0"
        }
    },