I'm using the Nativescript tutorial for creating a carousel here.
The problem I'm running into is that I get the following error (minus my obfuscation)
Error: Failed to load component from module: undefined.xml or file: /data/data/{Obfuscated}/files/app/pages/welcome/slides/slide1.xml
when it tries to load xml files on this line (full snippet below):
slides.push(builder.load(slidePath))
Upon some inspection I found that it's the file system that doesn't see the files I'm loading. My code is the same as the tutorials code. I've gone through it line by line (even doing a diff) and the code is in fact the same.
Here's a better look at the file path it's choking on, you can compare that to the image I provided below:
/data/data/{Obfuscated}/files/app/pages/welcome/slides/slide1.xml
I can verify that the folder structure is the same as in the tutorial app/pages/welcome/slides.slide1.xml but when the page loads, I get that error and it never loads the xml.
Here's the full snippet:
private loadSlides(slideFiles, slidesPath) {
return new Promise(function (resolve, reject) {
const slides = []
const currentAppFolder = fs.knownFolders.currentApp();
const path = fs.path.normalize(currentAppFolder.path + "/" + slidesPath);
slideFiles.forEach((dataFile, i) => {
const slidePath = path + "/" + dataFile;
console.log(slidePath);
// Here's where it crashes
slides.push(builder.load(slidePath))
});
resolve(slides);
});
}
When I test it out by debugging and using the file-system module to test whether the path exists... it always comes back false, even though the folder structure definitely exists the way it does in the tutorial.
The console.log line displays this:
/data/data/{myobfuscation}/files/app/pages/welcome/slides
As you can see it matches my folder path below.
How do I get the file-system to see that folder structure? It works just fine when I use it for verifying the existence image files.
Here's an image of the folder structure:
Webpack will never know you would require those XML files at runtime, you will have to adjust webpack.config.js to include those files in the bundle.
Update the CopyWebpackPlugin configuration as follows,
// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin(
[
{ from: { glob: "assets/**" } },
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
{ from: { glob: "**/*.xml" } },
],
{ ignore: [`${relative(appPath, appResourcesFullPath)}/**`] },
),
Adding { from: { glob: "**/*.xml" } }, copies all XML files along with folder structure into the bundle.
Related
Using this guide https://the-guild.dev/graphql/codegen/docs/advanced/generated-files-colocation
It works as intended for "operation-types" file, but how about the "types.ts" file itself, is it possible to generate separate type file depending for each operation needs, or just create the object types inside the ".generated.tsx" file?
my config is as follow, similar to the docs, its just putting into a folder called __generated__. Thank you.
const config: CodegenConfig = {
schema: 'http://localhost:4000/graphql',
documents: ['src/**/*.{gql,graphql}'],
generates: {
'src/codegen/types.ts': {
plugins: ['typescript'],
},
'src/': {
preset: 'near-operation-file',
presetConfig: { extension: '.generated.tsx', baseTypesPath: 'codegen/types.ts', folder: '__generated__' },
plugins: ['typescript-operations'],
}
}
}
I am using the StoryShots addon for Storybook to test snapshots from my React project. I would like to save all snapshot files in one directory in relation to the project directory. The default is that the snapshots are saved in relation to the story's location. I tried various configurations (like working with __dirname) but couldn't come up with a solution yet. Maybe someone has an idea?
Here is my storyshots test file used by Jest (storyshots.test.ts):
import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter } from '#storybook/addon-storyshots'
initStoryshots({
test: multiSnapshotWithOptions(),
stories2snapsConverter: new Stories2SnapsConverter({
snapshotsDirName: './__snapshots__/',
storiesExtensions: ['.js', '.jsx', '.ts', '.tsx'],
})
})
You can do something like this:
const IMAGE_SNAPSHOT_DIR = path.resolve(path.join(__dirname, 'component-image-snapshots'));
initStoryshots({
test: imageSnapshot({
getMatchOptions: (option) => {
const filename = option.context.kind.replace(' ', '');
return {
customSnapshotsDir: path.join(IMAGE_SNAPSHOT_DIR, filename),
};
},
}),
});
I am using NativeScript with Angular 2 and the newest Webpack workflow, and I'm using the iOS Simulator. I am using the nativescript-audio plugin to play sound files when I tap a button.
My goal is to play local sound files built into the app without using any internet connection to stream them or download them first.
I've downloaded and tried every demo app I can find and followed the instructions exactly in my own app, but I can only get the plugin to play a sound when I reference a sound file on a web server somewhere else. Attempting to play an mp3 file stored locally doesn't work.
I've also used the tns-core-modules/file-system module to search for the file I referenced, but I cannot find the file anywhere in the compiled app. It seems the file is simply not even being included in the build process, and I have no idea why.
All of the example apps I have found only play files stored on a server externally. They also are all using the outdated Legacy workflow, and none of them are using the Angular 2 system.
Here is my component.html file:
<ActionBar class="action-bar">
<Label class="action-bar-title" text="Sound Page"></Label>
</ActionBar>
<StackLayout orientation="vertical" width="100%" height="100%">
<Button class="btn btn-primary btn-rounded-sm" id="playButton" text="Play Sound"
(tap)="onPlayTap($event)"></Button>
</StackLayout>
Here is my Angular 2 component.ts file:
import { Component } from "#angular/core"
import { TNSPlayer } from "nativescript-audio"
const player = new TNSPlayer()
const playerOptions =
{
audioFile: "~/audio/session_1.mp3",
loop: false,
autoplay: false
}
#Component({
selector: "SongPage",
moduleId: module.id,
templateUrl: "./song-page.component.html"
})
export class SongPageComponent {
constructor()
{
player
.initFromFile(playerOptions)
.then(res => console.log(res))
.catch(err => console.log("something went wrong...", err))
}
onPlayTap() { player.play() }
}
Instead of the sound file playing, I get an error from the player.initFromFile promise:
CONSOLE LOG file:///app/vendor.js:59907:39: something went wrong... Error Domain=NSOSStatusErrorDomain Code=2003334207 "(null)"
And an error from the system:
CONSOLE ERROR file:///app/vendor.js:41405:24: ERROR Error: Uncaught (in promise): TypeError: null is not an object (evaluating '_this._player.play')
From what I understand, the errors are telling me it can't find the file, which appears to make sense because when I open the compiled app file, I can't find a sound file anywhere.
Is there something wrong with my code itself?
If not, how do I make sure the file is included in the app's compiled file and make sure the plugin can find it?
Make sure your audio file is bundled during build, the default build configuration do not include mp3 files but only image files, fonts, and assets.
webpack.config.js
// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin(
[
{ from: { glob: "assets/**" } },
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
{ from: { glob: "audio/**" } },
],
{ ignore: [`${relative(appPath, appResourcesFullPath)}/**`] },
),
Updating the CopyWebpackPlugin config with { from: { glob: "audio/**" } }, will bundle your audio folder too during the build.
I am currently trying to load a csv file into a Nuxt page. The folder structure is below and produces the error "Failed to load resource: the server responded with a status of 404 (Not Found)":
Project
|
+--pages
|
+--lesson
|
+--index.vue
+--file.csv
import * as d3 from 'd3';
export default{
data(){
return{
dataset1:[]
}
mounted(){
d3.csv('file.csv', (myData) => {
console.log('Mydta', myData);
this.dataset1 = myData;
})
}
}
I have added the following to the web pack config in the nuxt-folder:
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
config = {
module: {
rules: [
{
test: /\.csv$/,
loader: 'csv-loader',
options: {
dynamicTyping: true,
header: true,
skipEmptyLines: true
}
}
]
}
}
}
}
Thanks in advance
I recently had the same question and ended up using the #nuxt/content module – worked like a charm, didn't even need to include d3 (which is usually my go-to for parsing CSV files).
I believe the issue is you cannot access the csv file the way you are attempting to, the way to do that would be storing the file in the '/assets' directory which you can then access as shown in the docs I linked ~/assets/file.csv I think this is also a more correct location for storing such files to avoid having lingering files throughout the project
This worked for me:
async mounted() {
const d = await d3.csv("/data.csv");
console.log(d);
}
With data.csv placed in public folder.
Is there a way to copy a file from anywhere within the source app folder to the documents directory of a device? I've been looking at the file-system plugin documentation but couldn't find anything on this topic.
Well looking through the cookbook docs, it seems you can create a reference to the devices documents folder like this:
var documents = fs.knownFolders.documents();
You can then get the file from your app with something like this(?). Where path is a reference to the file bundled in your app:
var myFile = fs.File.fromPath(path);
So you could then do something like:
// Writing text to the file.
myFile.readText()
.then(function (content) {
// Successfully read the file's content.
documents.writeText(content)
.then(function () {
// Succeeded writing to the file.
}, function (error) {
// Failed to write to the file.
});
}, function (error) {
// Failed to read from the file.
});