I'm having so much trouble using react-pdf to open in a new tab. I'm making a very simple, one page site with links that I want to connect to various pdfs. I think the webpack loader I'm using is incorrect, although I'm not sure how to find the correct one since I'm new to react. Here is my code:
index.js:
{/**import research pdfs */}
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack.js'
import mypdf from '../public/mypdf.pdf';
...
<h1>link</h1>
This is the error that I'm getting:
Import trace for requested module:
./public/mypdf.pdf
wait - compiling /_error (client and server)...
error - ./public/mypdf.pdf
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
I've tried several different versions of:
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack.js'
And I've also tried installing different loaders. But nothing seems to be working. From what I've read it's pretty difficult to work with pdfs in react.
Related
cross post from github
I have two UI components library. One of them (#ikas/components) library does not have any issue but the other (same config) throw this error. Can anyone have any idea?
When i comment inhouse-components it is work. but when i open it it crash... any idea?
I try to external,
Also try add import React from "react" to tsx files. but there error is still there.
I am expecting the #ikas/inhouse-components is should also work as well as #ikas/components
I also control the dist (output folder) .d.ts and show React import different but I don't know if it's relevant
Is there a way around the file size limitation when building with react and threejs? I am building a react module with three js using the cms-react-boilerplate. The project builds fine, but it can't upload the main.js file as it is 2.1MiB. It gives me the following error:
[ERROR] Error validating template.
[ERROR] line 0: Coded files must be smaller than 1.5 MiB
I tried to upload the file directly to the design manager but was given the same error.
I also tried to create a main.js file and paste the code into it, but was given the following error:
Error:Coded file buffer must be smaller than 2.0 MiB
I'd recommend enabling code splitting. If not, you're going to need to use a different host for the JavaScript files. Additionally – make sure you're correctly including only what you need.
Avoid:
import * as x from 'lib';
and instead do:
import { each, func, you, need } from 'lib';
This will allow bundlers such as Webpack to properly Tree Shake your dependencies.
Try compressing your files into .min.js files with this if you are done editing them.
I'm using file loader and can load pngs just fine. I'm doing import myImage from "../../path/image.svg" and then <img src={myImage}/>. When I use the developer tools and click on the SVG I'm trying to include, I get a page with a message like:
"Error on line 1 at column 1: Document is empty
Below is a rendering of the page up to the first error."
Has anyone seen this error before and if so what can be done about it?
If you look at the file loader docs there is no mention of being able to load svg files.
You need to use a specialised loader. Here are webpack docs for one svg loader but there are plenty of others.
I found out about #svgr/webpack, with it you can import the SVGs like modules and then use them as components.
Getting a flow error returned when I import a webp image file into my react application.
I'm using the same syntax for a png image which works correctly and cannot see what the issue is?
(using create-react-app in vscode with flow v0.129.0)
import test from "./assets/test.png";
import testwebp from "./assets/test.webp";
error message returned:
Cannot resolve module `./assets/test.webp
Any chance anyone has encountered anything like this before?
Have looked through other threads but not having much luck finding a solution or clear cause.
Will keep looking in meantime.
Edit 2021-03-20
Flow has just released webp support in version 0.147.0 so you won't need a module mapper anymore for this.
https://github.com/facebook/flow/releases/tag/v0.147.0
Original Answer
It's because flow does not understand what should be returned from a webp format. You can tell it by adding module.name_mapper.extension to your flow configs
https://flow.org/en/docs/config/options/#toc-module-name-mapper-extension-string-string
You want to add something to the [options] section like the following where the assumption that importing webp files returns strings.
[options]
module.name_mapper.extension='webp' -> '<PROJECT_ROOT>/flow-mocks/empty-string.js'
Then you can create a empty-string.js file in flow-mocks
// #flow
export default '';
Now when you import webp files, flow will treat it as a string so you can get soundness if you want to pass it around or toLowerCase it, etc.
I'm building out a library that will be used by both a React Native project and a React project as a node_module hosted on my github.
This is proving quite daunting- and based on how ugly my code has become, I feel I must be doing something wrong.
Here's the presenting problem, the most recent issue:
Failed to compile.
./node_modules/plenti-api/src/services/AccountService.ts 11:10
Module parse failed: Unexpected token (11:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| export default class AccountService {
> private client: IClient
| constructor(client: IClient) {
| this.client = client
This is occurring when trying to build the React project via npm start. The project successfully builds and runs on the React Native side of things.
what do I need to put in my .tsconfig / .webpack.config.js / somethingelse in order to allow for these typescript structures to exist in my library and be imported correctly into my web project?
Thanks to #Mike in the comments, figured out it's because node needs to be written in vanilla javascript and therefore node_modules need to be built so that can be imported by pure javascript.
This article https://www.twilio.com/blog/2017/06/writing-a-node-module-in-typescript.html was very helpful in achieving that task.