import { EncryptStorage } from 'encrypt-storage';
export const encryptStorage = EncryptStorage('secret_key');
encryptStorage.setItem('user', userObj);
error :
I am trying to encrypt the localstorage using encrypt-storage but the import is giving me error and project crashed after putting only 3 line of code.
Dynamic import of next is not working as most of the solution i found is for component not for package.
This solution is not working for dynamic module import as i am getting some assignment error in loader.
Thanks in advance. :)
Related
I just started using Snowpack for a React/Typescript project and initialized it with: https://www.npmjs.com/package/#snowpack/app-template-react-typescript. It looks very promising but I get an error [#snowpack/plugin-typescript] Cannot find module '../../dummy.webp or its corresponding type declarations when trying to import a .webp image. Somebody an idea how to get it working without using #ts-ignore?
Just found the solution. You need to add the following lines in types/static.d.ts:
declare module '*.webp' {
const ref: string;
export default ref;
}
I had this error,
Attempted import error: 'LeafletProvider' is not exported from 'react-leaflet'.
when I tried to import LeafletProvider to one of my component file as follows:
import { withLeaflet, MapControl, LeafletProvider } from "react-leaflet";
I believe I have installed the latest version of react-leaflet (v.3.2.2) and have read the documentation as much as I could but I didn't see LeafletProvider in it.
Hope someone could help me fathom what to do with this. Basically, I just want to be able to change between two or more leaflet map tilelayers.
It seems the Provider has to be imported as such:
import { LeafletContext } from '#react-leaflet/core';
and used as :
<LeafletContext.Provider>
according to this page of the documentation:
https://react-leaflet.js.org/docs/core-api/#leafletprovider
Following the documentation in #Ivo's answer, here's what I did:
First install:
npm install #react-leaflet/core
Then import it like this:
import { LeafletContext } from "#react-leaflet/core"
And then use as:
<LeafletContext.Provider>
// enter code here
</LeafletContext.Provider>
I was trying to represent csv data using chart on react.
I have no clue about the error occurring.
I have installed d3 as well as victory.
My code
Error occurring
Try to replace
import { VictoryBar, VictoryChart } from "Victory";
By
import { VictoryBar, VictoryChart } from "victory";
I'm getting this error in an index.js file. I'm trying to make a simple react, javascript project using an api as well.
/*
import React from 'react'; // this enables jsx
^^^^^^
SyntaxError: Cannot use import statement outside a module
*/
My code looks like this:
/*import React from 'react'; // this enables jsx
import ReactDOM from '...react-dom'; // this allows us to attach the APP
import {
BrowserRouter as Router,
Route,
Link,
Switch
} from 'react-router-dom'; // this allows front end routing
import Home from './Home';
import Login from './Login';
import Activities from './Activities';
import MyRoutines from './MyRoutines';
import Register from './Register';
import Routines from './Routines';
const PORT = 3000;
const express = require('express');
const { client } = require('./db/client');
const server = express();
function App() {
*/
Method 1
A lot of interfaces still do not understand ES6 Javascript syntax/features, hence there is a need for Es6 to be compiled to ES5 whenever it is used in any file or project. The possible reasons for the SyntaxError: Cannot use import statement outside a module error is you are trying to run the file independently, you are yet to install and set up an Es6 compiler such as Babel or the path of the file in your runscript is wrong/not the compiled file. If you will want to continue without a compiler the best possible solution is to use ES5 syntax which in your case would be var react = require('react'); this can later be updated as appropriate or better still setup your compiler and ensure your file/project is compiled before running and also ensure your run script is running the compiled file usually named dist, build or whatever you named it and the path to the compiled file in your runscript is correct.
Method 2
Add "type": "module" to your package.json
{
// ...
"type": "module",
// ...
}
Note: When using modules, if you get ReferenceError: require is not defined, you'll need to use the import syntax instead of require.
Method 3
Update node.
im trying to import from a file called "data.json", however I am getting this error: Module not found: Can't resolve './src/data/data.json' in ...src/components/Table'
Anyone know how to help?
My code:
import {data} from "./src/data/data.json";
if Table is folder and you are importing in a file inside it then try this:
import * as data from "../../data/data.json";
if Table is a js file then try this:
import * as data from "../../data/data.json";