I have a React template that I downloaded and I'm attempting to move part of its assets, components, containers, etc. over to my project (Visual Studio 2019 React Application) to make it look like the template. I thought this would be a better learning exercise than just modifying the template (the template is pretty big too and I don't want my project to be populated with too many unused content).
So I have this script (src/reducers/Settings.js) in my project (same location as in the template) which refers to another file as such:
import {
CHANGE_DIRECTION,
CHANGE_NAVIGATION_STYLE,
DARK_THEME,
DRAWER_TYPE,
FIXED_DRAWER,
HORIZONTAL_MENU_POSITION,
INSIDE_THE_HEADER,
SWITCH_LANGUAGE
} from 'constants/ActionTypes';
I do have a ActionTypes.js file in src/constants.
But when I try to run the application, I get this error saying the application failed to compile
./src/reducers/Settings.js
Module not found: Can't resolve 'constants/ActionTypes' in
'C:\path\ClientApp\src\reducers'
But all of this is working fine in the template itself and I'm pretty sure the physical file/folders structure is the same.
If I change the import statement to import from /constants/ActionTypes it works but there's a lot of these scripts that will come from the template and I certainly don't want to have to go through modifying them all.
Is there a config in my app that would allow resolution to work properly without modifying the template's import statements?
Turns out I missed a file to transfer over from the working template project.
jsconfig.json had this which made absolute paths work
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"#/*":["src/*"]
}
}
}
Related
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 have a Vue.js project that is using Typescript and it is working well but I have an old piece of javascript with a lot of logic in it that I need to use and I would like to import it but I seem to have tried every combination of Import syntax to the .vue file and am unable to load the javascript.
I've tried
import * as revpubeditor from '../modules/revpubeditor'
import revpubeditor from '../modules/revpubeditor'
import { revpubeditor } from '../modules/revpubeditor'
and have also altered the .js file and added a .d.ts file so that it will compile and not give any errors but at runtime in the browser the revpubeditor that I have imported is not found by webpack.
How should this be setup and consumed? I am not worried about it being strongly typed I just want the webpack loader to find the module.
I've got an Angular 6 project that's made of up a main application, and a separate sub-project that is a library. I'm trying to consume this library from the main application, and I can't seem to get it working.
In the tsconfig.json, I have the following paths configuration:
"paths": {
"#my-company/my-package/*": "dist/my-package/*"
}
And then in the main app, I import the library like so:
import { ButtonModule } from '#my-company/my-package/button';
However, when I build the main application, I get tons of errors about not being able to find modules. For the above import statement, I'll get this error:
Module not found: Error: Can't resolve '/Users/jattardi/code/myproject/dist/my-package/button'
However, if I check the dist/my-package directory, there certainly is a button directory containing the type definitions.
The reason my imports have subpaths, e.g. #my-company/my-package/button instead of just #my-company/my-package is to make it tree-shakeable. Not sure this is possible. Since this is an Angular 6/ng-packagr generated build, do I lose this ability?
I was hit with the same error when trying to consume in the main application. My answer will not solve that case as I am trying to get my lazy loaded module, I moved into the new Angular6 library, to work.
I was able to publish my library project to npm and consume it in the main application as an npm dependency. For eg: #santony/ngx-material. May be as a workaround you could do that until this is resolved.
For those who are still facing this problem, there's a "how to" at ng-packagr's documentation:
https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md
Basically,
All you have to do is create a package.json file and put it where you want a secondary entry point to be created.
The contents of my_package/testing/package.json can be as simple as:
{
"ngPackage": {}
}
And also, in dev application, I've added the path reference to the secondary endpoint, so it worked:
"#my-company/my-library/another": [
"dist/my-library/another"
]
I am using Gatsby and importing jquery.
When I run Gatsby build I get the following error:
WebpackError: jQuery requires a window with a document.
This is due to Gatsby doing server side rendering.
I have read through a number of issues on GitHub (this one being the best one I could find).
My code looks like the following:
import React, { Component } from 'react'
import Link from 'gatsby-link'
import LandingScreen from '../components/LandingScreen'
import $ from 'jquery'
import 'fullpage.js/dist/jquery.fullPage.js'
import 'fullpage.js/dist/jquery.fullpage.css'
class TestPage extends Component {
componentDidMount() {
$('#fullpage').fullpage({
verticalCentered: false
});
}
render(){
return (
<main id="fullpage">
<LandingScreen />
</main>
)
}
}
export default TestPage
This is breaking so I tried the following based on the GitHub thread above, but this also fails:
if (typeof window !== 'undefined') {
import $ from 'jquery'
}
Can anyone advise how to import jquery?
Gatsby's components will run on both Node (no window object there) in order to produce static HTML and on the client's browser as React components. This is why you get this error.
The plugin you are trying to use needs to run only on the client because it needs the actual viewport dimensions to operate. Gatsby has a special API for this that you can use to run the plugin only on client side. A quick solution would be to load jQuery there and initialize your plugin on onClientEntry.
I would also suggest you find a more lightweight plugin that does the same thing without the jQuery dependency. It's a pity to use jQuery in a React stack. Maybe somebody else can recommend one.
Peter, I recently reported this to jQuery maintainers, but they politely told me... well... to kick rocks. Would be good, if you could badger them about this a bit, too.
Currently jquery absolutely requires window object, so it won't work on Node.js as a dependency. (with one exception: if you don't need a global jquery object, but just a local instance in one module, you can manually initialise it with JSDom, but that's probably not your use case)
Your way around this whole problem is that you don't actually have to import jQuery or its plugins on server side. So my approach was to create 2 separate entry point files - app.jsx and server.jsx - for client bundle and server-side bundle respectively and Layout.jsx as a shared root component.
app.jsx and server.jsx are entry points for client-side bundle and server-side bundle respectively, while Layout.jsx contains shared code with html.
I import jquery only in app.jsx bundle, so on client side it is present. On server side it is never imported and not included in server bundle.
You can take a look at my blog's code, how I set up Webpack in it and how do server rendering.
In the context of a Node.js / Express / Angular2 / typescript (IDE=Visual Studio) app, I am trying to load a third party .js utility (packery) onto the client side (for use in a directive). Someone made typescript definitions for it. The d.ts file looks like:
declare module "packery" {
interface PackeryOptions { stuff... }
class Packery { stuff .... }
export = Packery;
}
I refer to this d.ts file, tell the browser where the .js packery script lives, and then import the module as such:
import Packery = require('packery');
This compiles without complaint. However, upon running, the browser attempts (and fails) to find "packery" at http://localhost/packery as opposed to knowing packery is an imported library. This is in contrast to the other import statements I have made on the client such as:
import {Http, HTTP_PROVIDERS} from 'angular2/http';
which work - as far as I can tell the only two pieces of information I gave it for those were also a d.ts file and the location of the .js file, just like packery. But, I must be missing something. Have tried many combinations of file locations and linking and can't get it to work. How can I get the proper linking to "packery"?
Thanks!
I found a workaround for this and thought I'd post in case it helps anyone, although I am still having difficulty with the setup posed in the original question, that is, getting statements of the type:
import foo = require('foo')
to run on the CLIENT side. These work for me in node.js on the server, but on the client, for third party libraries that have been loaded via a script tag, I cannot get it to work, even if I add mapping entries to the system.js config file, irrespective of if I point to a .js file or a d.ts file.
Anyway, what does work is if you load the library using the script tag, then in your IDE put a reference path as such at the top of the CLIENT side code
/// <reference path="foo.d.ts" />
and ensure that your d.ts file does not declare a module/namespace but rather exports methods etc. directly. This lets the IDE compile without complaint, and the client side code is able to access the third party library.
However, I'm not sure if it is preferable / best practices to do what I did or if one should be configuring System.js somehow.
Typings are empty definitions of js libraries that aren't written in a typed language. They are only useful in development for IDEs hints and stuff, in your app, you'll still use the library as you normally would, adding the js file in your index.html or w/e you load your js files from.