This is my data structure
WEBVTT
00:00:15.000 --> 00:00:17.951
At the left we can see...
00:00:18.166 --> 00:00:20.083
At the right we can see the...
00:00:20.119 --> 00:00:21.962
...the head-snarlers
I am trying to parse a web vtt file. For this I wrote :
var data = require('./captions.en.vtt');
Error
client:47 ./src/captions.en.vtt
Module parse failed: C:\Users\sampr\Desktop\MyVIew\WebVtt\src\captions.en.vtt Invalid number (3:0)
You may need an appropriate loader to handle this file type.
Could someone please help me?
You need a appropriate loader for the file type (.vtt).
Install file-loader (npm install --save-dev file-loader) and you could use it directly like this:
var data = require('file-loader!./captions.en.vtt');
Using Next.js, I ended up using this solution.
...add a file called staticdata.js inside the pages/api folder. This will create a Serverless Function that will load the json data from the file, and return it as a response.
Basically the solution is to return the data from an API endpoint.
Related
I keep getting below error in my react app. Not sure what is the issue.
/Users/823222/miniapp/node_modules/headers-polyfill/lib/Headers.js 9:25
Module parse failed: Unexpected token (9:25)
File was processed with these loaders:
../../node_modules/source-map-loader/index.js
You may need an additional loader to handle the result of these loaders.
| class HeadersPolyfill {
| // Normalized header {"name":"a, b"} storage.
[NORMALIZED_HEADERS] = {};
| // Keeps the mapping between the raw header name
| // and the normalized header name to ease the lookup.
Looks like this is due to a recent change in this package, that changed how the symbols were declared:
https://github.com/mswjs/headers-polyfill/pull/33/files
I've started a GitHub issue here, feel free to add details about your environment:
https://github.com/mswjs/headers-polyfill/issues/36
TL;DR: There was a significant change to how the module is prepared in a recent release, I reverted to 3.0.4 and things are working again for me.
Edit:
3.0.10 released that reverts the build target and fixes this issue:
https://github.com/mswjs/headers-polyfill/releases/tag/v3.0.10
Guyz getting this error i have added pdf.js file also and i'm upgrading node version that time i have got this error if anyone know please let me know
Failed to compile.
./node_modules/pdfjs-dist/build/pdf.js 3042:46
Module parse failed: Unexpected token (3042:46)
File was processed with these loaders:
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| key: "getJSActions",
| value: function getJSActions() {
return this._jsActionsPromise ||= this._transport.getPageJSActions(this._pageIndex);
| }
| }, {
It's a compile error. Node said "you need an additional loader to handle this issue" which means while you update you node, something happens in one of your loader file. You should re-install "the issue loader" and then run it again. Are you building your app with CRA template? if so, you should re-install CRA template again and then move all files into the new project folder and run it.
I hope you find a solution! :D
In my MessageItem.tsx component I have the following code:
const data = useFragment(
graphql`
fragment MessageItem_message on Message {
date
body
}
`,
message as any
);
After running relay-compiler --src ./src --schema ../../schema.graphql --language typescript --artifactDirectory ./src/__generated__, a module named MessageItem_message.graphql.ts gets generated.
But when I run the app it gives me an error:
Failed to compile.
./src/components/MessageItem.tsx
Module not found: Can't resolve
'./__generated__/MessageItem_message.graphql'
The reason is only components at the src root can refer to the right path (./__generated__), whereas components in a folder actually need to refer to the path (../__generated__) but it's not doing so.
How can I configure the path?
Edit .babelrc to point to the artifactDirectory
// .babelrc
{
"plugins": [
[
"relay",
{
"artifactDirectory": "./src/ui/graphql/types"
}
]
]
}
Remove "--artifactDirectory ./src/__generated__" from the relay-compiler options.
By default it seems the Relay compiler puts a "__generated__" directory in the directory with any source code containing GraphQL.
As a result any "./__generated__" references anywhere and at any level in the source code hierarchy now work as they should.
Thanks to #ThibaultBoursier for the pointer.
PS I wonder if the --artifcactDirectory option is just meant to be used to change the name of the artifact directory, rather than its location?
Just moments ago I ran into the same issue. The reason is that the relay-compiler is using the artifactDirectory setting to decide where to put the generated files, but the babel-plugin-relay exposing the graphql tag needs to get the very same argument otherwise it just attempts to include a colocated relative file.
I fixed it in my case by configuring the plugin with a babel-plugin-macros.config.js file as follows (where the artifactDirectory is the same as the one supplied to the relay-compiler):
module.exports = {
relay: {
artifactDirectory: "./src/ui/graphql/types",
},
};
This solution assumes you are using the macro via babel-plugin-macros, otherwise you might need to supply that argument via the .babelrc file but I have no experience with that unfortunately.
I am trying to show a static pdf in React app. I have tried a lot of packages:
react-pdf
react-pdf-js
react-pdf-js-infinite
simple-react-pdf
pdfjs-dist
react-pdf-pages
They often say that we can use the URL, or pdf file for the props for the PDF component easily, but I cannot use either.
I had two main errors.
As I want to use myPDF for the props for the component, I write this:
import myPDF from 'path/to/pdf_file';
then, render_some_component pdf:{myPDF}
Here is the error:
ModuleParseError in
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
(When I comment that line, this kind of error disappears)
I used the file-loader in webpack config, I have tried many different ways but failed.
I use the pdf file directly for the props like this:
render_some_component pdf:{'path/to/pdf_file'}
In the Console:
Warning: Setting up fake worker.
11:23:55.962 pdf.worker.js:349 Warning: Ignoring invalid character "33" in hex string
11:23:55.963 pdf.worker.js:349 Warning: Ignoring invalid character "79" in hex string
...
There are a lot of 'Ignoring invalid character' like that and it always ends with:
localhost/:1 Uncaught (in promise) InvalidPDFException {name: "InvalidPDFException", message: "Invalid PDF structure"}
In the Network, Headers, I see:
Request URL:http://localhost:3000/myPdfFile.pdf
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:3000
but In the Network, Response, I see just the HTML layout.
I think the pdf file is loaded correctly but the package cannot recognize its PDF structure.
Except that two main errors, I had another error related to the Worker used in the packages but I don't know how to fix it:
Uncaught DOMException: Failed to construct 'Worker'
(This is something relates to Chrome as people say Chrome does not allow Worker in the local server)
Any help is highly appreciated as I am stuck in this in 4 days already.
Can you pleas clarify what you main task is?
If I understood it right you want to display a PDF file that already exists in a part of your application? You don't want to create a new PDF with JavaScript.
If you want to just show a PDF have you tried to use iframe?
Something like this:
<iframe
title="file"
style={{ width: '100%', height: '100%' }}
src={downloadURL}
/>
You ca use here also relative paths to the file from the location where your Component is or use full URLs to the file.
This post has NOT been accepted by the mailing list yet.
Hi everyone,
Thank you in advance for any help provided.
I encounter a problem trying to keep track of my logs into a file, and do not understand what is wrong in the syntax I am using.
Here are my settings for logging into Config.groovy:
[SNIP]
log4j = {
// Example of changing the log pattern for the default console
// appender:
appenders {
// console name:'stdout', layout:pattern(conversionPattern: '%c{2} %m%n')
file name: "scraperServiceLogger",
file: "target/scraperService.log"
}
error 'org.codehaus.groovy.grails.web.servlet', // controllers
'org.codehaus.groovy.grails.web.pages', // GSP
'org.codehaus.groovy.grails.web.sitemesh', // layouts
'org.codehaus.groovy.grails.web.mapping.filter', // URL mapping
'org.codehaus.groovy.grails.web.mapping', // URL mapping
'org.codehaus.groovy.grails.commons', // core / classloading
'org.codehaus.groovy.grails.plugins', // plugins
'org.codehaus.groovy.grails.orm.hibernate', // hibernate integration
'org.springframework',
'org.hibernate',
'net.sf.ehcache.hibernate'
'grails.app.'
error scraperServiceLogger: "grails.app.service.ScraperService"
warn 'org.mortbay.log'
debug 'grails.test.*'
}
[/SNIP]
Here is how I am trying to use it within my ScraperService.groovy:
[SNIP]
log.error "test"
[/SNIP]
The file I want to write in is created correctly but the logging in only displayed on console.
Any help greatly appreciated :)
All the best.
Try using the full package to your service
error scraperServiceLogger: "grails.app.service.com.whatever.ScraperService"