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.
Related
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.
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
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.
In the case of react native web we have a possibility to use files with .web and .android extensions.
Eg.
myFile.web.js
myFile.android.js
then we can include them via
import myFile from './myFile';
and React native web automatically provides proper file content depends on the platform.
It works so far but after I added Typescript the ts compiler started to complain about the missing module 'myFile' and it's logically okay because we don't have this file and TS compiler doesn't know that the RNWeb will automatically pick a proper file later.
When I disabling Typescript, everything works fine so the system is working.
The question is how to solve it in the case of Typescript?
Thanks for any help.
The only way I found how to avoid this issue is using CommonJS module system - require instead of ES6 - import standard
Example: const MyFile = require('./myFile')
In this case, the TS compiler will ignore it. Unfortunately, it isn't a perfect/right solution as I'd like to see but it works so I just use it as is.
P.S. If someone finds another way, please, provide your solution, I'll be appreciated.
Goal:
Enable to run the tensorflow.js toxicity classifier demo in the local computer.
Problem:
Based on instruction "https://github.com/tensorflow/tfjs/issues/149"
"You cannot call imports in a browser since browsers don't support such imports. Instead of loading tfjs as import * as tf from '#tensorflow/tfjs';, you need to import the library by either transpiring the node module and load it as a bundle using tools like webpack or load it using ready-to-use cdn mentioned here."
I have removed "import * as tf from '#tensorflow/tfjs';" and started to use
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#latest"></script>
But I still retrieve an error message
"Uncaught (in promise) ReferenceError: toxicity is not defined
at predict (index.js:71)
at index.js:95"
What part do I need to fix in order for everything to be working?
https://jsbin.com/wiqigayoqu/edit?html,js,console,output
Thank you!
Info:
*I'm new in Tensorflow.js
*The raw of the source code is located "https://github.com/tensorflow/tfjs-models/tree/master/toxicity/demo"
* https://github.com/tensorflow/tfjs-models/tree/master/toxicity
*I don't know if you are enabled to see the code problem at jsbin and I have used the file index.html and index.js from "https://github.com/tensorflow/tfjs-models/tree/master/toxicity/demo" and used it in my local computer.
https://stackblitz.com/edit/typescript-tkmkho
Apply the code as typescript in stackblitz.