I'm trying to find a client-side computer-vision library that plays nicely with React. I've tried tracking.js and js-objectdetect but I can't import them into a standard React component without major efforts that are beyond my skills.
The problem with both these awesome libraries is that they are written as IIFE with no export statements e.g.
(function(){...})()
They are supposed to be imported as <script src = 'etc'> so I can't seem to just import them as normal and follow the API without getting
TypeError: foo.bah is not a constructor
I tried adding my own export statements but a can of worms exploded out of it!
Can anyone suggest a better approach?
If you are using webpack you can try exports-loader to allow you using import syntax.
Here is some more info.
Here is a working implementation of tracking.js with React (using create-react-app)
https://github.com/howardkitto/react-tracking
The solution was provided by https://github.com/gaearon, here... https://github.com/facebookincubator/create-react-app/issues/2958
Related
I'm currently working on an application using preact, tailwindcss and vite. Unfortunately, importing svgs seems to be a bit problematic.
There is a separate repository that only contains the svg resources.
My original plan was to just import them as components as I was used to do it in classic react with webpack applications using SVGR and the following syntax:
import { ReactComponent as Search } from 'assets/icons/search-lg.svg';
This won't work for (at least) two reasons. One being preact the other one being the lack of SVGR.
I then proceeded to give vite-plugin-svgr a try by importing it in my vite.config.js.
plugins: [svgr({ svgrOptions: { jsxRuntime: 'classic-preact' } }), preact(), tsconfigPaths()],
It kinda works using the following import syntax:
import Search from 'assets/icons/search-lg.svg?component';
Unfortunately this raises the following error which I couldn't manage to work around besides ignoring it which is not really an option:
TS2307: Cannot find module 'assets/icons/search-lg.svg?component' or its corresponding type declarations
The alternate plan would now be to create a wrapper component that just imports the svg from the given path and create a component from it myself. This would also simplify styling it with tailwind.
Unfortunately I fail to import the file in a way I can wrap it with <svg> tags. Using <img> is not really an option because I need to be able to manipulate the svg.
So, does anybody have an idea how to either
correctly use the component import in my setup
create a preact component that imports an svg from a file and still is customizable
Thanks in advance!
I finally got it to work by using vite-plugin-svgr. In the end adding /// <reference types="vite-plugin-svgr/client" /> to vite-env.d.ts made the compiler happy.
I can now use the good 'ol syntax:
import { ReactComponent as Search } from 'assets/icons/search-lg.svg';
Thanks to #user-28 for pointing me in the right direction!
Maybe this question has already been asked, but I wasn't able to find anything regarding the matter.
I'm currently trying to build a simple website using firebase in combination with React. I'm using vscode as my IDE. While the process of building the site itself is going quite well, I'm still having some issues getting used to vscode's code suggestions.
'use strict';
import ReactDOM from 'react-dom';
let element = <h1>Hello world test</h1>;
ReactDOM.render(
element,
document.querySelector('#root')
);
In my file app.jsx I'm calling the method ReactDOM.render(...). Here is where my issue comes into play. When I specifically import the class ReactDOM (import ReactDOM from 'react-dom';), my code suggestions work as expected. All available methods with their arguments are suggested, etc. Unfortunatly though, my browser does not like those import statements and throws an error. I am aware that I can use tools like webpack or browserify to solve this issue, but since the ReactDOM-class is available without the import anyways, I don't really see the imminent need to use those tools.
I was just wondering whether I could configrue vscode to just suggest these classes and their methods without explicitly importing them. Thanks for the help!
(In case this was unclear, here's what I want to happen, but without importing ReactDOM:
I created an codepen with react code and I'm importing its libraries trough CDN.
Now I want to implement this code (working) into my react project.
But first It could be handy to put all code into a react sandbox so I can make changes before deploying to my code.
I tried to copy paste all code into a sandbox and add all libraries (react, react-dnd, reactdndhtml5backend, react-dom), but it still gives me a lot of errors.
Also the files in my own project are .tsx and not .js.
My current codepen is found here: https://codepen.io/darkinfore/pen/daJxyP
This works, but just not when I implement this into a react sandbox.
I also tried to implement this into a react sandbox: https://codesandbox.io/s/w01l077w1w
But as you can see it gives me some strange errors.
Can someone help me with converting this codepen into a react sandbox without errors?
I looked over your codesandbox and then forked it here. Actually, the only error encountered had to do with ReactDnD not being defined (such that DropTarget could not be found). This was due to your import statement near the top of index.js:
import ReactDnD from "react-dnd";
Because of the way the react-dnd package is designed, this way of importing will not work for you. The package has multiple exports (for example, DragDropContext and DropTarget) rather than a single, default export. You need to take all of these exports and import them together into a single named import, called ReactDnD. So, what you need to do is:
import * as ReactDnD from "react-dnd";
I did this in the forked codesandbox, and this got you past the TypeError and then displayed your table.
Helpful information:
Different ways to use import
Exported modules from react-dnd package
I have a special scenario. One web application is built upon React. Another JavaScript utility is on React, but that utility is loaded by script tag. So, the application and the utility is built isolatedly. As a result, both the web application bundle file and utility bundle file have React built inside.
Now, we want to make them share one copy of React. It is preferred to export React as global variable in web application code(e.g. global.React) so that the utility can use it directly.
The code in utility is still like below. Hopefully, webpack can ignore it and import React from global.React.
import React from 'react';
import ReactDOM from 'react-dom';
The question is: how to config webpack to tell the utiltiy not to bundle React?
Tested with some non-React application:
in index.html import React from CDN, this will define global React.
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
somewhere in application doing as below, resolves to React instance:
declare var React;
console.log('React is ', React);
So if your first bundle, registers React globally, you may use it.
Just keep in mind, that it considered as bad practice to import from global like this. It beats whole concept of webpack's modularity. For instance, if your first module, upgrades to some backward incompatible version of React, your second module will break eventually as well.
For small projects, might be ok.
Trying to get decorator syntax working for react css modules as shown here.
https://github.com/gajus/react-css-modules#decorator
I've got react-css-modules working using the function syntax, e.g.
CSSModules(Table, styles)
but when using decorators, e.g.
#CSSModules(styles)
export default class extends React.Component {}
nothing seems to be instantiated and no errors are thrown either. I've got the babel-plugin-syntax-decorators loaded.
What could I be missing? Thanks!!
I wasn't able to use that syntax too. It seems that react-scripts uses some babel plugin for running typescript, and that plugin isn't much typescript. So if you're using react-scripts with typescript, consider that it's not "full" typescript, and there is some stuff not working as you could expect.
Also, you can consider using patch-styles instead of react-css-modules. It's much simpler, doesn't require any changes in your project at all, and PatchStyles provides the same with a lot simpler react component.