I'm trying to do a very simple app just to test the Uppy file uploader. I've followed the Uppy's documentation, but it just worked with the library links (CDN).
I've already tried npm install #uppy/core (and the same command for the additional plugins). I've already tried to put the code inside my coffee file (I'm using ruby on rails). And other things too, but no results.
Here's my code:
import '#uppy/core/dist/style.css'
import '#uppy/dashboard/dist/style.css'
Uppy = require('uppy/lib/core')
Dashboard = require('uppy/lib/plugins/Dashboard')
uppy = Uppy({ autoProceed: false })
uppy.use(Dashboard, { target: '#drag-drop-area', inline: true })
This is actually throwing no errors, just doesn't appear on the screen.
I just found the answer. It happens that you actually need to use a bundler in order to make the 'require' works in the browser. This is not explicit in uppy's documentation, but I guess I should already know it. Thanks!
In my case I had to add the new keyword when initializing Uppy.
This is from the documentation .
So instead uppy = Uppy({ autoProceed: false }) it should be const uppy = new Uppy({autoProceed: false})
Hope that helps.
P.s I think that is for the new versions of Uppy.
Related
I am using the electron-react boilerplate and want to use an electron dialog in App.tsx:
const { dialog } = require('#electron/remote') //also tried with import
const Hello = () => {
const readFromFile = async () => {
dialog.showOpenDialog({})
}
return (
<>
<button onClick={() => readFromFile()} >Test</button>
</>
)
}
in main.ts I placed the following line at the top
require('#electron/remote/main').initialize()
In the end I always get this error:
Module not found: Error: Can't resolve 'fs' in 'C:\Users\myUsername\source\repos\electronTest\node_modules\electron'
I also tried nodeIntegration: true and contextIsolation: false
Just spent a while on this and <rant about JS community>... eh. Maybe this will help others.
tl;dr
You can only use electron's imports in electron-main side.
longer story
Electron is split into electron-main and electron-renderer. As others suggested, you need to update webpack's config with the target pointing at the correct electron.
In case you're using one of the electron builder boilerplates, you might see directory .erb with a few webpack configs. Especially, there might be one with target = "electron-main" and another with target = ["web", "electron-renderer"]. So it feels like mission accomplished; however, according to webpack's doc on target, if you pass a list, then a common config is set. Since web doesn't include fs, the common part also won't include fs.
For the reason above, some of electron imports, e.g. clipboard, can be only used from the "electron-main" side of your application.
The work-around, e.g. using clipboard on the application side, is to use IPC to communicate between main and renderer sides.
Check your webpack.config.js. Looks like you target is not electron-main or electron-renderer.
I'm trying to access the strftime JS library in my Rails application. I've followed the instructions on how to add it using yarn add and I've added a debugger statement in one of my react components so I can try and access it through the console. strftime is not defined and the instructions say this about requiring it:
var strftime = require('strftime') // not required in browsers
console.log(strftime('%B %d, %Y %H:%M:%S')) // => April 28, 2011 18:21:08
console.log(strftime('%F %T', new Date(1307472705067))) // => 2011-06-07 18:51:45
I believe require is a node.js thing because you can't "require" code in the browser. It states that its not needed in the browser but the instructions also say to add it as a <script> tag but if I have the webpacker gem, I should be able to just do something like:
import strftime from 'strftime'
in my application.js file right?
What is required to get access to a library from node_modules in my Rails app?
Edit:
Some context: This is an existing application running Rails 5.2.3 which is currently being migrated from sprockets/asset pipeline to React components with Webpack(er).
I've updated my environment.js file using the answer from #thanhnha1103.
If I open my app in Chrome for example and go to the console and type strftime it says strftime is not defined. However, if I add a debugger instruction in my application.js file just after import strftime from 'strftime' I get access to two objects called strftime__WEBPACK_IMPORTED_MODULE_0__ and strftime__WEBPACK_IMPORTED_MODULE_0___default.
Now if I do this in console while the JS has stopped because of debugger:
strftime = strftime__WEBPACK_IMPORTED_MODULE_0__
I have access to a function called strftime which is my intended purpose. (I also have to import strftime in my react component to get access to this but that's probably as intended. Any ideas about how to make this work out of the box without doing this in my application.js file?:
import strftime from 'strftime'
strftime = strftime__WEBPACK_IMPORTED_MODULE_0__
debugger // obviously I'll remove this later but this is for testing purposes.
console.log('Hello World from Webpacker')
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);
You should try this in your config files:
// config/webpack/environment.js
const webpack = require('webpack');
const {environment} = require('#rails/webpacker');
environment.plugins.append(
'ProvidePlugin-Strftime', // arbitrary name
new webpack.ProvidePlugin({
strftime: 'strftime'
}),
);
module.exports = environment;
I have created a logging utility function that I plan to use on 99% of components in my site. I am wondering if it is possible to access this file without having to write "import { logger } from 'utils/logging';" for every React component? Sort of like an auto import?
I am using create-react-app.
If I understand your requirement properly, you want the similar usage of console.log (without importing console), then below is something you can try.
In your index file, set it as a global object(for server side js) or window object (for client side js). So that , it can be accessed anywhere.
We had something like this with a mmiddleware(using redux-logger package):
const logger = require('redux-logger').createLogger
return middleware.concat(logger({
collapsed: true,
duration: true
}))
Hope this helps!
What you're trying to do sounds like a bad way to do it. I think the best solution if you need custom data logged, would be to create/add a middleware. Or in React's case maybe a wrapper component. I'm not sure.
Otherwise look into React / Redux Dev Tools Extension.
https://github.com/facebook/react-devtools
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Edit:
If you want to ignore good practices then you can do this:
// in index.js or app.js or wherever
import { logger } from 'utils/logging'
// if you have an env for development use it here
process.NODE_ENV = 'development' && window.logger = logger
// or just
window.logger = logger
// SomeComponent.js
window.logger()
I've been hunting around, and I've seen similar posts, which were all fixed by removing a package, or adding forbidClientAccountCreation: false;I am using accounts-password, and accounts-ui, I've included the {{> loginbuttons}} But I still can't create users. From the documentation, it's supposed to simply work, without writing any further code... As do many tutorials I looked at... Any help appreciated!
I presume you mean you can't self-register? This setting is usually in a startup method in a a /common or /both folder.
This file is from one of my projects as /both/startup.js
import { Meteor } from 'meteor/meteor';
//
// This code is run by both client and server. For Accounts.config this is a MUST!
//
Meteor.startup(() => {
Accounts.config({
sendVerificationEmail: false,
forbidClientAccountCreation: true
});
});
So I've been learning react, and wanted to make a basic firepad instance. My current setup is having one container div in my index.html, and having all of my react components rendering through that div. My current attempts and the code I'm showing with this have been in an environment with gulp and browserify, but I'm also playing around with ES6 and webpack. So I'm pretty flexible about getting this working as I learn. Here's the code:
"use strict"
var React = require('react')
, Firebase = require('firebase')
, fbRoot = 'myURL'
, CodeMirror = require('codemirror')
, Firepad = require('firepad')
, firepadRef = new Firebase(fbRoot + 'session/')
, myCodeMirror = CodeMirror(document.getElementById('firepad'), {lineWrapping: true})
, myFirePad = Firepad.fromCodeMirror(firepadRef, myCodeMirror, { richTextShortcuts: true, richTextToolbar: true, defaultText: 'Hello, World!'});
var WritePage = React.createClass({
render: function(){
return (
<div>
<div id="firepad"></div>
</div>
);
}
});
module.exports = WritePage;
The first error I was getting was that it couldn't find the codemirror.js file. Although CodeMirror was being correctly defined in Chrome's dev tools, I moved that from requiring the npm package to just linking the 2 needed codemirror files to my html. It then gave me an error about not being able to take .replaceChild of undefined. I then tried moving all of the dependency files over to my index.html, but still had the same .replaceChild error. Anyone have any experience with react and firepad? I read in the reactfire docs that it's one way binding from firebase to my site, which for my case making a read-only firepad would be fine. Like I said, I'm flexible all of this stuff is new to me.
From the link that Michael provided.
The problem is that you are trying to reference a DOM element before React has rendered your component.
, myCodeMirror = CodeMirror(document.getElementById('firepad'),{lineWrapping: true})
, myFirePad = Firepad.fromCodeMirror(firepadRef, myCodeMirror, {richTextShortcuts: true, richTextToolbar: true, defaultText: 'Hello, World!'});
By moving this code into componentDidMount(), it runs after the CodeMirror DOM element has been constructed and you'll be able to reference the DOM node. You will also probably find it easier to use the React ref attribute instead of document.getElementById().
Use these npm packages - brace, react-ace, firebase, firepad.
Since firepad needs aceto be present globally, assign brace to global var
like(not the best way, but works) before importing firepad
import firebase from 'firebase/app';
import 'firebase/database';
import brace from 'brace';
global.ace = brace;
global.ace.require = global.ace.acequire;
import Firepad from 'firepad';
Use ref to get instance of ReactAce and initialize it in componentDidMount using:
new Firepad.fromACE(this.firepadRef, this.aceInstance.editor, options);
Similarly for CodeMirror editor.
Hoping, this would be of some help.