Everything seems to work fine, I just see those errors. Is this normal? How can i fix this.
My react application is written in Javascript, not in Typescript, but I do not think that this should matter, should it?
Are you using a package manager like npm/yarn/pnpm for installing react-router? Looking at that pathname it kinda looks like you're not and you should be.
If you're trying to import the index.tsx file directly in your JavaScript it won't work, you'll need the transpiled version which would be available automatically by installing it through a package manager (something like npm install react-router). The plain js files would then be available under node_modules/react-router in the root directory of your project.
To import it somewhere in a React project you could then use:
import { Route } from 'react-router'
(no need for the full path name including node_modules - more info on npm install here: https://docs.npmjs.com/cli/v6/commands/npm-install)
I've just restarted Visual Studio Code and the errors disappeared.
For context, I had Visual Studio running for some days now, so I can see how this could lead to some bugs.
Related
I'm building a simple Electron app for MacOS (using React as the frontend). The purpose of the app was to make executing certain terminal commands a lot easier (using child_process.spawn. Primarily I am interested in using the sfdx Salesforce CLI commands.
When I run the app in dev, everything works fine. However when I package the app, the PATH variable gets changed and I'm no longer able to locate the sfdx library. (*note it is still able to find git commands though).
I found a very similar issue here and a bug report in GitHub, both of which recommend the use of the fix-path package. This is where I run into another issue. According to the docs, I should import the package like this:
import fixPath from 'fix-path';
However when I do that inside of my electron.js file I get this error: SyntaxError: Cannot use import statement outside a module. I've seen other resources that use require to bring in the package:
const fixPath = require('fix-path');
But again, when I do that I get this error require() of ES Module not supported.
I tried adding "type": "module" to my package.json file, but that breaks my app as well.
I feel like there is something simple that I am missing here, but can't seem to figure out. I believe that if I could import and use the fix-path package, then this would solve my problems. But if that isn't possible, does anyone know of a way for me to fix the path in my app so that it works in prod?
Thank you in advance!
Some extra details:
The two dependencies I check for are git and sfdx. The following image shows where both of those live on my machine:
And this is the response to the same commands within the packages asar file:
I found a workaround, it looks like fix-path made a move to ESM during the last release. Because I am using CJS modules I just needed to install version 3 of fix-path by running npm install fix-path#3.0.0 --save
I would like to make a new ReactJS component with Typescript and publish it on npm.
My idea is to have only a project folder with:
/dist build for final distribution on npm
node_modules
/public where I will have my index.js to locally run my app for development purposes and one folder components where all files for my distributed component will be stored (only component folder will be published)
and other files like .gitignore, .npmignore, package.json and so on..
Something like this:
I have seen many guides (and spent many hours) figuring out how to publish a ReactJS component like:
Create an NPM Package from a React Component
Create a React Component Library using TypeScript
How To Make a React Component Library - Making A React Library
Publish A React Component On NPM
create-react-library
But most of them have such a complicated structure (like script files, babel files, webpacks ..) and generated files that I don't understand.
My idea was to use react-script to run and develop the app locally and then run tsc to compile my component to build. I thought that I don't need create-react-app/library, babel or webpack to publish a react component - if they are necessary, why do we need them? I just thought it should be possible to do it simply and lightly - like just to take tsx files compile them into js..
To me, it seems that the process of publishing a ReactJS component library with TS to npm is not that well documented. Can you please provide steps or some well and easy-to-understand guide on how to publish react component? Also with all the configurations (configuration files), since I think I messed it somewhere there.
Thanks in advance!
I've installed a fresh React Application with Typescript as follows:
npx create-react-app my-app --typescript
when I ran the app, everything seemed fine. So I removed the generated code and started writing my own.
When I started typing, I noticed that my IDEs (Webstorm and VS Code) doesn't automatically import default classes such as React:
As you can see in the following example, when I selected React, nothing happened. But when I selected Component (which in't exported as default), it has been imported.
After that, I installed "#material-ui/core": "^4.6.0".
And it seems that I get the same behavior in here too. Now, I can tolerate using snippers such as imr in order to automatically import it. But as an Angular fan, I'm not used to manually import everything and I'm hoping that there's a solution for this.
Which leads me to the following question:
Instead of manually importing every module I'm going to use, is there an easier way to do so? it starts to be very painful.
I have already tried the following solutions:
Installing steoates' Auto Import
Installing Arnuariri's Material UI Snippets
Installing Burke's Simple React Snippets
I'm not looking for a snippet extension, I'm looking for a way to automatically import default exported modules.
you have to install Auto import (VSCode extensions)
Link:https://marketplace.visualstudio.com/items?itemName=NuclleaR.vscode-extension-auto-import
Automatically finds, parses and provides code actions and code completion for all available imports. Works with JavaScript and TypeScript.
I am creating Vue spa and integrating CKEditor here using this package I tried to do just like the tutorial by adding this to my app.js
import Vue from 'vue'
import ClassicEditor from '#ckeditor/ckeditor5-build-classic'
import documentEditor from '#ckeditor/ckeditor5-build-decoupled-document'
import VueCkeditor from 'vue-ckeditor5'
const options = {
editors: {
classic: ClassicEditor,
document: documentEditor
},
name: 'ckeditor'
}
Vue.use(VueCkeditor.plugin, options);
and to make it work I doing NPM install to those 2 editors (ClassicEditor and documentEditor)
npm install --save #ckeditor/ckeditor5-build-decoupled-document
and since I also need CKEditor but with much more simpler or to being said without image upload features then I for the ckeditor5 build classic and remove those plugin from there and then NPM build and then I am doing this on my Vue spa
npm install --save #ckeditor/ckeditor5-build-classic
after that, I open #ckeditor folder on node_modules and find the ckeditor5-build-classic folder and replace build folder with my custom version of CKEditor build classic
but then I get this error
ckeditor-version-collision: The global CKEDITOR_VERSION constant has already been set.
even though the editor still working, but I don't like the idea my console showing error
This problem is precisely described in docs, you can't run two editors from different builds on the same page (or mixing builds and source code).
tl;dr; The easiest way to enable running two different editors on the same site is to create a custom build that will export these two builds. This is described in the above docs.
The behavior has changed ~3 months ago and the error has been added to such situation to prevent bugs and big size of the bundle. Therefore the author of the https://github.com/igorxut/vue-ckeditor5 can just update the readme to follow the latest version's API.
I recommend to create "super build".
For example you can clone repository of classic build and change 3 files.
Check my gits.
I updated example1 for using this build.
I'm having terrible problems when trying to import an external JS project into my meteor folder. This is the project I'll like to use: http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles
As you can see, it is necessary to import two scripts. The first one is JQuery, and that was easily solved by adding it with meteor add jquery.
The problem came out when I tried to import the second script. I'm not sure how I can use it because, as far as I know, on meteor you cannot just import your script into the head section. For that reason, I've created a new template that is rendered and I put the code in there, but nothing happenend. Later on I've created an event that calls the JS when the image is clicked but without any success.
My question is, Which is the correct way to import a local JS code in meteor as in HTML is done with:
<script type="text/javascript" src="../dist/jquery.imagemapster.js"></script>
Since jquery-imagemapster is available as an npm package you can do:
$ npm install jquery-imagemapster
In your project directory and make it available to your project that way.
In early versions of Meteor packages were only available via atmosphere and $ meteor add. Later they added npm support and all npm packages became available.
Prefix npm installs with “meteor” -> “meteor npm install —save ‘js file’. Initializing will be the same as it would be in any other front end environment as will importing it. If you’re having trouble after that, check for it’s existance in your browser console and work from there using its built in properties and methods.