Unable to import base64 image into react component with webpack - javascript

I created a b64Images.js file in my images folder. Inside it I have the following:
export const placeholder = "data:image/png;base64,longb64string"
I'm trying to import it into one of my react components using:
import { placeholder} from '../../../images/b64Images.js'
It's able to find the file, but i'm getting the error:
Module parse failed: fullpath/b64Images.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
It's just a js file and my webpack is already configured to handle this. I don't have any issues importing my reducer functions.

The answer is to forget converting the images yourself, and install this package.
https://github.com/antelle/base64-loader
import { placeholder} from '../../../images/b64Images.js'
becomes
import placeholder from 'base64!../../../images/image.png'
sadness becomes happiness

Related

How to import file from general path in cypress?

I have a file called 'contents' in cypress.
in my test file I want to import this file.
I do the following :
import contents from 'C:/Users/asus/cypress/support/contents';
But I want to make it more general path (not contain my own path).
I tried to import it inside the index file in cypress.
As follow:
import './contents'
But it is not working by this way. Cypress will throw an error that contents is not defined.
Not knowing the data type and assuming that the exact location of the file doesn't matter, I would recommend moving the file to the /fixtures folder and importing it as recommended in the Cypress docs here. So you can use a relative path for the import in your test like:
import contents from '../fixtures/contents';
You can also find an example for importing a JSON file in this answer.
First, you have to export that file
const contents = {
// Your data
}
export { contents };
You can import files like this way
import { contents } from '../support/contents.js'
If ../support/contents.js is not working Please use ../../ to get the root directory of your system like ../../support/contents.js.
Please replace your file extension with .js.

warning only in design view on import statement to use qml component from file

I have a .qml file with a component 2 steps above in my project path because I want to have a component folder above many projects to be shared by some of these. So in my main.qml I do:
import 'qrc:/../../components'
That works and I can use my qml component from file.
However in the design view, I get the warning:
found not working imports: ...<file and import line number where the import is> "qrc:/../../components": no such directory
Many other things I tried make the project not compile or throwns error at runtime.
Trial1: import "qrc:/": compile time error: Unknown component. (M300). Makes sense as the component is in a path above.
Trial2: import './../../components': runtime error: import "./../../components" has no qmldir and no namespace.
Tried also to put a qmldir file in my components folder where my component is with the text "MyComponent MyComponent.qml" as explained in Importing QML Document Directories
Apart from the warning everything works fine. Project compiles, runs and the changes in the component are shown when I work in the design view.
info:
-> component resource is added to the .qrc resource file, and the file exists (project works)
-> QtQuick version QtQuick 2.9
-> Qt Creator 4.15.2 Based on Qt 5.15.2
How do I get rid of the warning?
Edit: I also tried following the steps of this answer with no success.
Adding the content of my .qrc file:
<RCC>
<qresource prefix="/">
...<other not relevant resources>
<file>../../components/MyComponent.qml</file>
</qresource>
</RCC>
Screenshot of the warning:
Adding an alias for the file in your .qrc should resolve the issue, like so:
<file alias="MyComponent.qml">../../components/MyComponent.qml</file>
and then for your import statement simply:
import "qrc:/"
The alias should resolve whatever relative path issue is causing the warning to be thrown by the designer.

Error: Could not find declaration file for module VueJS application

Hi I am using NuxtJS to build a VueJS application. I have installed an image cropping library vue-croppie. I have imported the Vue component as per the documentation like below
import VueCroppie from 'vue-croppie'
However, I am getting the following error on import statement
Could not find a declaration file for module 'vue-croppie'. 'xxx/node_modules/vue-croppie/dist/vue-croppie.cjs.js' implicitly has an 'any' type.
Try npm i --save-dev #types/vue-croppie if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-croppie';
I have tried declaring index.d.ts file at the root of my project with following content but id doesn't solve the problem
declare module 'vue-croppie';
I have tried using require like below as suggested on other posts but of no use
const VueCroppie = require('vue-croppie')
I understand this is a Typescript issue but have no knowledge about Typescript. Can somebody throw more light on this. What is happening and how to fix it.
Thanks
The issue was I had not installed the plugin with VueJS app. Here is how to do it.
VueJS
We can use Vue.use to isntall a plugin before it can be used like below
import Vue from 'vue';
import VueCroppie from 'vue-croppie';
Vue.use(VueCroppie)
NuxtJS
In case of NuxtJS it is little different. The plugin is registered globally, here's how.
Create a file called vue-croppie.js under plugin folder. And add the following to it
import Vue from 'vue'
import VueCroppie from 'vue-croppie'
Vue.use(VueCroppie)
In your nuxt.config.js add this under plugins
{ src: '~/plugins/vue-croppie.js', ssr: false }
Now, the plugin will be available globally. So there is no need to import and can be used directly.

how to import a local js package instead of a network package

I want to customize the default apollo-server that is included in grand-stack-starter
to do this, I cloned apollo-server
and replaced it (in grand-stack-starter)
import { ApolloServer } from "apollo-server-express";
for
import { ApolloServer } from "C:/Users/a1ole/Documents/GitHub/apollo-server/packages/apollo-server-express/";
but console return Error: "Cannot find module..."
You should not use an absolute path.
If you ever move the directory it will not work anymore. Also this will not work for anyone else, other than you.
Instead copy your apollo-server-express into your node_modules folder in your project, and import it like you would with any other module.

Create react app App fails when importing custom library

I created a brand new app using creat-react-app. got it running. My company has a custom library of components in an npm repository.
I pull that in, and import one of the components. I get a failure immediately.
The error I'm getting is:
./node_modules/the module in question/index.js
Module parse failed: Unexpected token (1:7)
When I look at the index.js file of this node module, the only line there is:
export * from './src';
The ./src/index.js file exports all the components individually.
It's clear this is choking webpack or something. I haven't really seen things exported like this.

Categories