We Keep Coding

Unable to implement dynamic import in vue library

I created the Vue library using vue-cli-service
Package.json
{
"name": "test-lib",
"version": "0.1.0",
"private": true,
"scripts": {
"build-lib": "vue-cli-service build --no-clean --target lib --name test-lib src/init.js"
},
"main": "./dist/test-lib.common.js",
...
In init.js
import Test from './components/test.vue'
export default Test
And imported the component in library like this (test.vue)
<template>
<div>
<sampleText></sampleText>
</div>
</template>
<script>
export default {
props: {
msg: String
},
components: {
sampleText: () => import ('#/components/sampleText.vue')
}
}
</script>
I used this library in the vue project and it's unable to import the dynamic component.
And i can see this test-lib.common.24.js file available in the library dist folder.
Without the dynamic import every thing is working fine.
Is it possible to import component dynamically in vue library? Does it need any web pack config to use dynamic import in vue library?

How to client-side-routing with create-react-app

tl;dr: What changes do I need to make to the npx create-react-app environment to enable client-side routing with react-router?
EDIT: Answered my own question, do not use href to link to within your app, use react-router-dom 'Link'.
In more detail..
I have followed Andrew Mead's React tutorial and all went well.
His setup utilised webpack with the following inserted to the webpack.config.js file..
devServer:{
contentBase:path.resolve(__dirname, 'public'),
historyApiFallback: true
}
..where historyApiFallback: true meant his dev-server utilised client-side routing vs server-side.
Now that I finished the bulk of the tutorial I decided to create my own app using npx create-react-app.
Everything is working fine, but the routing is not client-side and there is no webpack.config.js file.
I understand CSR works by serving index.html only and manipulating the DOM in the background.
The documentation states one way to make this work is to import 'express' which isn't part of the create-react-app initial environment, and include some code using the variable app. However, I don't actually know where this file lives / should live / where to important/edit etc, or whether express is actually required and perhaps there's a way to "natively" do this without adding another module to my react package.
Here are the relevant script snippets for clarity in case I have done something wrong.
Thanks in advance.
Paul.
index.js
// react imports
import React from 'react';
import ReactDOM from 'react-dom';
// materialize imports
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';
import './styles/customcss.css';
// redux imports
import store from './app/store';
import { Provider } from 'react-redux';
import * as serviceWorker from './serviceWorker';
// component imports
import AppRouter from './app/router';
// app render
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<AppRouter />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
./app/router/
import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import AppMainPage from "../pages/portalPage";
import ConnectedAccountPage from "../pages/accountPage";
import ConnectedPostPage from "../pages/postPage";
import { SiteWideNavBar } from "../components/sitewide/navbar";
import { SiteWideFooter } from "../components/sitewide/footer";
const AppRouter = () => (
<BrowserRouter>
<div>
<SiteWideNavBar />
<Switch>
<Route path="/" exact={true} component={AppMainPage} />
<Route path="/account" exact={true} component={ConnectedAccountPage} />
<Route path="/post" exact={true} component={ConnectedPostPage} />
</Switch>
<SiteWideFooter />
</div>
</BrowserRouter>
);
export default AppRouter;
EDIT: package.json if relevant
{
"name": "myproject",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.5.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"materialize-css": "^1.0.0-rc.2",
"moment": "^2.29.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-forms-materialize-css": "^1.0.1",
"react-google-maps": "^9.4.5",
"react-icons": "^4.1.0",
"react-materialize": "^3.9.6",
"react-redux": "^7.2.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"uuid": "^8.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Everything was configured correctly, the issue was I was using NavItem with href="/" etc from react-materialize in my navbar and not Linkfrom from react-router-dom.
If you are getting this issue: You should be using Link from r-r-d and for any redirects also use props.history.push('/'). Whilst this part wasn't relevant to my issue, if you are here you might be experiencing the same issue by trying to redirect using something other than a prop.history.push() method.

HTML - styled-components: Error: Element type is invalid: expected a string or a class/function but got: object

Hello I just started using styled-components on my project.
My working environment is:
1) npm version 6.12
2) Node.js version 12.13
3) VS Code
After installing styled-components from official documentation:
sudo npm install --save styled-components
my project does not compile anymore throwing the following error:
Error: Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
object. You likely forgot to export your component from the file it's
defined in, or you might have mixed up default and named imports.
Check the render method of Home.
What I have done so far:
1) As advised by the debugger I double-checked my Home page and tried to see if I forgot to import the component. However it is correctly imported but still does not work.
2) Always as advised by the debugger I checked if there was a invalid type element. However I think the syntax is correct. To be sure about that I consulted the official documentation on how to correctly reference these types of components. Unfortunately it didn't work too.
3) After more research I came across this useful post. It seems that it could be due to a not precise reference to the include. However, my project correctly worked/compiled/built until I installed styled-components. All the import/export I did in the same way.
I am providing the following snippets of code where I have the error:
StyledHero.js
import styled from "styled-components"
const SimpleButton = styled.button`
color:red;
background:green;
`;
export default SimpleButton;
Home.js
import React from 'react'
import Hero from "../components/Hero"
import Banner from "../components/Banner"
import {Link} from "react-router-dom"
import Services from "../components/Services"
import FeaturedVessel from "../components/FeaturedVessels"
import Button from "../components/StyledHero"
export default function Home () {
return (
<>
<Hero hero="defaultHero">
<Banner title="Vessels" subtitle="Currently Tracked Vessels">
<Link to="/vessels" className="btn-primary">
Vessels
</Link>
</Banner>
</Hero>
<Services />
<FeaturedVessel />
<Button>hello</Button>
</>
);
}
Additional option I tried:
As a final note to try to solve the problem I thought that the component I created using styled-components is supposed to be exported with the same name, so I also tried to export it with the exact name of the component create inside StyledHero.js:
StyledHero.js
import styled from "styled-components"
const SimpleButton = styled.button`
color:red;
background:green;
`;
export default SimpleButton;
Home.js
import React from 'react'
import Hero from "../components/Hero"
import Banner from "../components/Banner"
import {Link} from "react-router-dom"
import Services from "../components/Services"
import FeaturedVessel from "../components/FeaturedVessels"
import SimpleButton from "../components/StyledHero"
export default function Home () {
return (
<>
<Hero hero="defaultHero">
<Banner title="Vessels" subtitle="Currently Tracked Vessels">
<Link to="/vessels" className="btn-primary">
Vessels
</Link>
</Banner>
</Hero>
<Services />
<FeaturedVessel />
<SimpleButton>hello</SimpleButton>
</>
);
}
If could be useful below my package.json:
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-icons": "^3.8.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"styled-components": "^5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Can someone point me in the right direction and understand what is the problem?

How to load three-orbitcontrols with import syntax?

Has anyone tried using the OrbitControls function with ReactJS?
Here is the sample code I wrote:
import React, { Component } from 'react';
import 'tachyons';
import * as THREE from 'react';
import OrbitControls from 'three-orbitcontrols';
class App extends Component {
render() {
...
//Controls
const controls = new OrbitControls(camera, renderer.domElement)
controls.dampingFactor = 0.25
controls.enableZoom = false
It returns the following error:
./node_modules/three-orbitcontrols/OrbitControls.js 1054:70-89 "export
'OrbitControls' (imported as 'THREE') was not found in 'three'
Does anyone know how to resolve this issue?

There is also an option to import OrbitControls directly from "three" package like this:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import * as THREE from 'three';
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
and use it in the app without any issues:
this.controls = new OrbitControls(camera, domElement);
domElement has to be passed as second argument in latest builds of Three.js. React ref can be used for it.
Here is a live demo with latest React and Three.js https://codesandbox.io/s/github/supromikali/react-three-demo

Update 2020:
three.js now exports OrbitControls as a module by default, and as others have pointed out, it can be used as follows:
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
Original Answer:
There is an npm package that you can use: Orbit Controls ES6
Link: https://www.npmjs.com/package/orbit-controls-es6
Installation:
npm i orbit-controls-es6 --save
Usage:
import OrbitControls from 'orbit-controls-es6';
const controls = new OrbitControls(camera, renderer.domElement);

The problem is that when you import THREE, it is not globally scoped which is what the 'three-orbitcontrols' module relies on.
You could use this module instead - 'three-orbit-controls' (https://www.npmjs.com/package/three-orbit-controls)
and import it like so:
const OrbitControls = require('three-orbit-controls')(THREE);
Usage of orbital controls is the same as you have now but with this, an instance of THREE is being passed to the Orbit Controls module.
EDIT - 2020
Although the above answer was useful when the question was first asked, #Marquizzo rightly pointed out this is no longer the case.
Orbit Controls is now packaged with three.js and there's no need to use require(), when you should use the import statement.
Please refer to this answer now - https://stackoverflow.com/a/55929101/8837901

I just did it like this when using parcel bundler:
app.js:
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// the rest of the example from threejs web page
// https://github.com/mrdoob/three.js/blob/master/examples/misc_controls_orbit.html
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Parcel threejs example</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
package.json:
{
"name": "test-threejs-with-parcel",
"version": "0.1.0",
"description": "Threejs with parcel test",
"main": "app.js",
"scripts": {
"start": "parcel index.html",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"parcel-bundler": "^1.10.0"
},
"dependencies": {
"three": "^0.109.0"
}
}

I have to go with Anurag with this one. First i had three-orbit-controls installed which danlong suggested, but i ended up having issues with require not being defined when trying to start the WebClient.
After that i switched to orbit-controls-es6 and everything worked just fine.

React js tomcat, Uncaught SyntaxError: Unexpected token import

I am new to react js, i am trying to create react js based simple page using export and import functionality. Below is the description
App.jsx
import React from '../build/react'
export default class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
main.jsx
import {ReactDOM} from '../build/react-dom'
import {App} from 'App'
ReactDOM.render(<App />, document.getElementById('app'));
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="build/browser.min.js"></script>
<script src="custom/main.jsx"></script>
</head>
</html>
I have deployed it on tomcat, when i am trying to access "test.html" from browser it is giving me
Uncaught SyntaxError: Unexpected token import at main.jsx : 1
Please help me, whether i have missed anything in this.

I had a similar problem. I did all that I could to solve it but to no avail. I deleted node_module from C: and issued npm install to reinstall node_module but still no solution.
I replaced my package.json with
{
"name": "react-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"express": "^4.16.2",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router-dom": "^4.1.1",
"react-scripts": "0.9.5"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
and replaced my index.js with
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
I later made changes to them to suit my app's requirements. It worked perfectly - I can't explain how it happened.