I want to add some functionality to my existing website with React.
I followed this tutorial. I came to a point where I wanted to separate classes from single js file to one for each class.
Then I used
import InputField from './InputField';
Which gave me this error:
Uncaught SyntaxError: Unexpected token import
When I imported my classes the same way in an example which was created via this tutorial, it worked perfectly.
I also tried with require(), but that gave me an error message saying that require() is not defined.
So how to divide classes from single file to multiple files on an existing website that has React as an addition? Am I forced to write all code in one file, if I just add React to website? I suspect, that it does not compile as it somehow should. (I am just starting with React)
You either have to use native ES modules or use a bundler like webpack or Rollup
Related
I'm using a library vtk.js. VTK has a special design of classes (https://kitware.github.io/vtk-js/docs/develop_class.html). When I write a class I need to import macro.js module which exposes several base methods such as getters/setters/newInstance etc (https://github.com/Kitware/vtk-js/blob/master/Sources/macro.js).
Looks like CRA uses some special loader for macro.js files. I get an error when trying to import such a file (SyntaxError: Cannot use import statement outside a module). If I copy an original file macro.js from #kitware/vtk.js to my local source folder I still get an error. Even if I remove all the contents of macro.js file I get an error (The macro imported from "../macro" must be wrapped in "createMacro" which you can get from "babel-plugin-macros". Please refer to the documentation to see how to do this properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md#writing-a-macro). However, when I rename macro.js to macro2.js the error is gone.
Is there some way how can I disable this macro loader?
Here is my folder structure
when i tried to run my react app it give me this error
Failed to compile.
./src/css/owl.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I tried google it and it says i need to create manual loader to load my html file. It is regarding to webpack but I don't know how and where I configure loader to load the owl.html file.
Short answer:
No, you can not simply convert your HTML/CSS/JS in to React JS through a plugin.
There is no need of webpack her, as it is already provided and packed by create-react-app, you can simple create a component of your page template provided.
Long Answer:
React project architecture says, One has to create a React JS component for every UI page/segment/section/widget. So for creating a page in react from the html file provided you simple has to crate a component file called Owl.js in the components folder.
In the Owl.js write the following:
import React from 'react';
export default () => {
return (
<React.Fragment>enter code here
// paste the code from your owl.html file. (everything that is written under <body>)
</React.Fragment>
)
}
Use this newly created component in the App.js you have by importing it into.
Also use the css by importing it simply in the Owl.js file, like this:
import '~you-path~/owl.css';
And finally to make all the JS written in owl.js you have to carefully integrate the functions, listeners and data you are using in the newly created component out of the return statement.
I hope this clears the confusion here.
I come from vanilla JavaScript, and I just don't get this. Usually I work directly from the interactive console in chrome or firefox and I can access all my resources to try them out manually.
Right now I have an Angular project with Intellij and I want to try out code inside a module. To be specific I'm busy implementing a queue pattern. So I made a Queue class.
When I type in the name of my class inside the javascript console, Intellij finds it as a suggestion. When I use their suggestion it inserts the import statement like import {Queue} from "./Queue";.
But when I try this it spews SyntaxError: Cannot use import statement outside a module. Which I understand, but how can I import the module from the console? (I figure that there is a compiled .js file somewhere, which I can import, right!?).
I am working on converting a large application from JavaScript (Backbone and Angular 1) to TypeScript. When we convert a file that is used by other files we understand that we have to update the import statements in those other JavaScript files so that it imports the new TypeScript file correctly. Our syntax update in fake-file.js is as follows.
Before:
import OurService from 'our.service';
After:
import { OurService } from 'our.service';
I understand that this is an easy change but TypeScript is new to many developers and there have been problems with people missing some of these import statements or forgetting to change them all together resulting in some issues during runtime. I have looked into compiler options but I do not see any that would fix this issue but I could be misinterpreting them.
Question: Is there a way to configure the compiler (or a Visual Studio Code plugin) to throw a warning or an error to prevent this from happening?
I assume that I understood your requirement and possibly you need to adapt a linting process and consequently I would suggest the following tools (which I also use in my project):
Airbnb Javascript style guide (your import statement concern-https://github.com/airbnb/javascript#modules). These are a well-defined set of standards defined for any JS application (including ES).
ESLint. You can run ESLint from the terminal and configure it for your project that highlights warning/errors in your code. If this looks complicated, you can generate the tslint document for your entire project in the website itself. Click on rules configuration and configure the ES rules for your project. There are some import related rules too.
PS: Feel free to add your comments.
I build an Ionic Project using Ionic 2, Angular 2 and TypeScript to test the framework a bit. I need to include an external library (ntc.js) to my project, since I need it to name hex colors.
I know including a Javascript library to TypeScript should work, since whatever works in JS works in TS. I just don't want to include it the wrong way.
I tried to add the library to www/build/js, but it doesn't seem to work and it doesn't seem like the good way to do this. I tried to search for ways to do this but found nothing (might be because Angular 2 and Ionic 2 is still fresh).
Things like :
import * as ntc from '../../js/ntc';
doesn't seem to work as well, even if my library is located at the right place. TypeScript doesn't seem to read my file properly, if it reads it at all.
What is the good way to do this? Where should I place my .js file in my project directory?
You import it by adding it to your index.html like any other regular javascript file.
Then in your ts file you do:
declare var Tree:any;
Then in your code, you can use the Tree variable, albeit it exists in the Javascript file. this line of code is basically telling the typescript compiler there is a variable out there Tree which it should ignore.
Besides doing a declare var which tells ts that the variable exists you can use typings of typescript.
By writing
typings install libraryname
In your console you get a file that already has declare var/class and you can see all of its functions/properties when you import it.
import {lib} from 'libraryname';