I have a meteor project where I want to include the conversational form framework.
There is a npm package, however it is not properly imported (probably due to some kind of bug). According to the github issue, this:
import cf from 'conversational-form'
does not work, because the export function exports cf.ConversationalForm, not cf (but cf is needed for existing declarations). The form is created and styled, but cannot be addressed in the js.
I was already able to use the framework in a normal html/js/css project, so now I wanted to just include the external script as a workaround.
However, downloading + importing in client/main.js did not work for me.
I've tried:
import '/imports/api/conversational-form.min.js
as well as:
$.getScript
in Meteor.startup.
Do I need to write specific exports in the external .js? I'm far from a professional, so I'm a little hesitant to dissect the external .js.
Any tips on how to simply mimic the html-script-inclusion? Or other ideas on how to get the framework running?
Sincerely, desperate.
Well Meteor allows you many ways to do that, the first ideas that come to my mind are:
Depending on your project structure you can create your own meteor package as a wrapper and internally load the library.
Hardcoding the script tag in you entry point.(Im not sure if this would work to be honest but you can try).
I ended up downloading the script, modifying it to set my options and including it via \imports.
VERY hacky solution, but well, it works...
Meteor allow you to load external library and scope them in all the client
via the /compatibility folder.
Just put the file in there, and it will be scoped automaticaly.
Pretty new to react-native developpement, apologies if my issue is obvious. I've been searching for quite a long time before posting.
It has been working perfectly for quite a long time.
I can't identify what I have done to break things up.
I believe I'm importing react redux properly, using {connect} properly. I didn't change the way I'm using it.
Also stacktrace is not really helping me ..
Stacktrace Image
Github to my project if need be :
github
And the most important file :
PageLecture.js
Also one thing weird I noticed, is that for some time this error was only occuring when I was using my phone, not emulator. Emulator was working fine. Now this error is also on emulator.
OK so this was actually pretty dumb, and not related to redux connect method (as I thought initially).
It was due to me using at some point a Sound module which I was initializing wrongly (should have done that outside of my PageLecture class, then I can use it inside this very class).
I'd like to mark as solve but looks like I don't have this option available.
I'm trying to get Typescript and React working together in MVC Core
The problem is the requirement for the following lines in my .tsx file:
import React = require('react');
import ReactDOM = require('react-dom');
These lines pass through both compilers becoming the following in the JS for browser processing:
var React = require('react');
var ReactDOM = require('react-dom');
Obviously, the browser cannot run these lines, because "require" is not a function in the browser
And yes, I can verify that both Typescript and React have processed the file.
Elsewhere on the site, it is suggested to use a global import, however this is a bad idea (it even says so in that post), I could also fix this by creating an empty function called "require", but that would also be bad practice
That this situation has arisen at all I find surprising, I thought the whole point of TypeScript was to take better code that the browser doesn't understand and transform it into equivalent code that it would. Thus, that TypeScript has allowed these lines to just pass through is baffling to me.
I have tried using the module directive in tsconfig.json to produce the required output, however there doesn't seem to be a browser compatible option
Is there a way to get React's babel compiler to eat the require functions? Has Typescript left them in because it expects React to do something with them?
EDIT: My question is different from the one suggested as a duplicate because it asks about module() and not import.
Though I suspect the answers to the 2 questions may be the same, suggestions on the accepted answer such as "just us a reference" don't work and although use of an external module loader should solve the issue, it's a broken solution
require() is not a part of browser based JS, therefore I don't want TypeScript to output it at all
EDIT2: Since more details of my setup have been requested, here you go:
The structure of my wwwroot/js directory is as so:
/def
..react.d.ts
..react-dom.d.ts
tsconfig.json
source .tsx and compiled .js files
Note that the d.ts files are copypasta from the repositories. There doesn't seem to be a way to load them in "properly" without adding ridiculous dependencies to the project such as node. NuGet modules that seem to do this in regular mvc have no functionality in mvc core
I've also tried moving the d.ts files to be in the same folder as everything else, this has no effect
tsconfig.json looks like this:
{
"compileOnSave": true, //Doesn't do anything? Build required to compile
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5", //Is this the ES version I'm supposed to be typing in or the ES version to compile to? Irrelevant, changing this does nothing
"jsx": "react" //Using "preserve" outputs a jsx file to go through the React Babel compiler, does not solve issue
//"module": Irrelevant, a "don't worry I've got them covered" flag option doesn't exist, no options are suitable for browser use
//"noResolve": Irrelevant, does nothing
},
//"files":[] Explicitly including the d.ts files here doesn't seem to do anything, does not allow me to remove import lines
"exclude": [ //Have tried removing this, doing so has no effect, does not allow me to remove import lines
"node_modules",
"wwwroot"
]
}
Since I'm using Visual Studio everything compiles on build, I assume it's using tsc.exe under the hood
As for React... I have the following listed in the dependencies section of project.json
"React.AspNet": "2.5.0",
"React.Core": "3.0.0-rc1"
In startup.cs I have the following in ConfigureServices:
services.AddJsEngineSwitcher(
options=>options.DefaultEngineName = V8JsEngine.EngineName
).AddV8();
services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
services.AddReact();
...and the following in configure
app.UseReact(config => {});
For development purposes I have the following in my _Layout.cshtml
<environment names="Development">
<script src="https://unpkg.com/react#15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.2/dist/react-dom.js"></script>
</environment>
This is a learning project so it won't go to production mode, but if it did I would self-host the react source code and put it through the default bundler for bundling and minification. I don't believe that the positives of using a cdn outweigh the risks
I have tried using /// references, they seem to be a deprecated feature and in this case they don't do anything
I have tried using the following syntax to import react, but this also leads to different non-browser compatible code being output
import React = __React;
import ReactDOM = __React.__DOM;
It's important to note that both TypeScript and React work completely under these conditions on their own, no node dependency, no silly packing thing. It is only the TypeScript module system that insists on outputting things I don't need
Right so... after much much researching, my conclusion is that MVC Core, TypeScript and React shouldn't all go together just yet.
A lot of documentation and discussions hint at some sort of implicit referencing that's possible, and that seems to be the preferred way forwards when your project doesn't warrant a client-side module system, however... this feature doesn't seem to work with non-Typescript modules, or if it does it's so obscure and badly documented that I can't figure it out
....this could be one of those things where it's so obvious to everyone else that nobody bothers discussing it, if it is please let me know how stupid I am
The bottom line seems to be that if you want to use TypeScript's module system, you're supposed to have a browser-side module system that it can talk to.
I've looked over all of these and put a lot of work into understanding which is the best one for React and .Net
React places some extra constraints on this because you want to be using it's Server Side Rendering feature... like, you seriously want to be using that it's the best thing about React, so you need a module system that also plays nicely with it.
I've concluded that RequireJS is probably the right way to go for a number of reasons, for the client it's just 1 lightweight JS file, which compares nicely to the gargantuan JS behemoths of it's competitors, and it's own server side components have a .net version which should lead to an easier time making them work with React's server side stuff
....unfortunately RequireJS's server side components have a dependency on the old MVC for .Net Framework, so you can't use them in MVC Core yet, for now it's a dead end
Honestly, coming from a decade and a half of Javascript programming, I find this assumption on TypeScript's part that everyone is using a heavy client-side module system to be more than a little scary
I think it's important to remember that no matter what scripting you do for the browser, it all either runs in, or compiles back to, Javascript. This means that nothing you can bring in can possibly be more powerful than Javascript on it's own.
You use these things because they're quicker to code with, easier to test, show up errors at design time etc etc, i.e. they make life much easier for you and your team, but just like a box of pills, every single one of them has side effects and if you use too many they build up and cause problems
These module systems all look like great tools in the right projects, just like every "pill" in the "box" mentioned above, but I don't think they should be nearly as ubiquitous as TypeScript seems to assume they are
If you go for a small client stack that closely fits the needs of your project, and correctly segregate your JS into a global bundle, and a set of view-specific bundles your application can grow very large without encountering any of the issues that you want a heavy module system to solve
If you ever find yourself thinking you need such a thing, I would take the time to go back over your tech stack and really work out what each piece is doing for you and whether it's worth the cost to have it there, cutting that stack down is in many cases going to be a much better way to keep it stable than adding yet another framework to it
You've got to ask yourself what problems each tool is solving for you, whether it's successful in doing so, and if there's a better way... particularly one provided by another tool on your stack, a solution requiring no additional tools at all, or a solution provided by removing the tool that causes the issue as a side effect
I've seen a lot of people talking about these module loaders as a way to avoid clashes caused by adding things to the global namespace, and I'm sorry but moving all of those names to a module list so that they can clash there instead really doesn't solve anything
That in mind... webpack.... I think I jumped too early on the node dependency here, on taking a closer look I think it just uses node to compile things at design time, which is fine, as long as it doesn't want node on my production server we're cool but... all webpack is doing is taking your require lines and using them to inline other scripts, that's not what these lines are meant to be used for and using them in this way defeats the object of using them in the first place
All it seems to do is take the modules and dump them back into the global namespace where you didn't want them in the first place, furthermore if you're taking my advice above and making a global bundle, and one for each view that needs it's own tooling you're going to run into problems doing things the webpack way.... again, please correct me if I've misjudged this one
Well, that's the best answer that I can come up with for now, really hoping some people will show up and discuss it with me because it feels like I'm missing the point in a few places
For now I'm going to look into a bunch of React specific things and then maybe I'll see if I can get this stack working in MVC for Framework and see what changes
And if someone can come up with a better answer or a proper solution becomes available in a few months after the components have been patched a bit more then I'll move the green tick over
Obviously, the browser cannot run these lines, because "require" is not a function in the browser
Indeed. What tutorial are you following? You definitely need a module bundler in addition to TypeScript compilation e.g. here is a quickstart on webpack : https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html
This seems a simple problem, but I can't find any information online about it, neither here in Stack Overflow.
I am having problems making Intellisense work under Visual Studio 2013/2015 with RequireJS (client-side).
In theory you only need to add a reference in the _references.js file, like this:
/// <reference path="libs/require.js" data-main="main.js" start-page="../default.htm" />
but I get this message all the time through the Output window regarding the "JavaScript Language Service":
Error regarding RequireJS path in VS
It seems as if the feature was trying to load my "main.js" file from the VS JavaScript references folder instead of my real folder which gets a lot of "../" added and can not be resolved. In fact the suggested path that can't be loaded it's OK except for all the "../".
I've tried diverse combinations of relative paths to write the attributes, but no luck.
This is very annoying and I can't find any reliable info on the Web regarding this specific problem. The only reference I've found is this one:
http://blog.nansen.com/2015/09/getting-visual-studio-intellisense-to.html
and they suggest to add a baseUrl config code to the _references.js file, which hasn't worked for me at all.
Any ideas on how to solve this?
And by the way: any reference on how to make this work under VS Code also?
Found out that it related to the solution/project that is on another drive letter.
VS studio is installed on drive C: and the solution/project is on drive D:.
Have not found a solution to this problem, but can be corrected by moving to drive C:.
Figured I would see what React Native is all about, so I followed the instructions here and can't even get the out of the box project to run correctly. Chrome dev tools throws all sorts of errors. Here is the stack trace shown in the simulator, anybody else run into this?
It seems like what may have happened here is that you named your project "React". The CLI replaces the word "SampleApp" with the name that you specified in the sample files that it generates.
This is the original file here: https://github.com/facebook/react-native/blob/master/Examples/SampleApp/index.ios.js You can see where it has "SampleApp" in a few places where on your file has "React" for all of them.
It really wasn't your fault, the CLI just needs to be a little smarter and not allow someone to create a project named "React". :)
I got the same error when I used different version of JSXTransformer.js and react.js . Using 0.13.3 from cdn solved the problem. https://cdnjs.com/libraries/react/