I uninstalled the package #toast-ui/react-image-editor from the server side of my react app because I thought the dependency needed to be client side, so I go and install it client side, and reboot the app and it cannot be found.
Heres my basic folder structure
-myapp
-server.js
-package.json
-node_modules
-package-lock.json
-client
-package.json
-node_modules
-package-lock.json
-src
I receive this error: "./src/components/images/Editor.js
Module not found: Can't resolve '#toast-ui/react-image-editor' in 'C:..\client\src\components\images'"
Following that I consulted
How do I resolve "Cannot find module" error using Node.js?
Can't resolve module (not found) in React.js
Basically I have deleted and installed the individual package, deleted and installed the node_modules on the client and the server run npm cache verify, installed the package on the client only, installed the package on the client and the server, installed on the server only.
and nothing is working, which makes me think possibly its an import error with VS Code,
is there a way to see how npm is trying to import a specific package or any general thing I haven't done for react failing to import a package that's clearly there.
I got the same error. I think there is a problem with the recent version 3.14.3. I went back to 3.14.2 and it worked fine. Here is my sample App.js to get you started, based on the npm page.
import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '#toast-ui/react-image-editor';
function App() {
const myTheme = {
// Theme object to extends default dark theme.
};
const MyComponent = () => (
<ImageEditor
includeUI={{
theme: myTheme,
menu: ['shape', 'filter'],
initMenu: 'filter',
uiSize: {
width: '1000px',
height: '700px',
},
menuBarPosition: 'bottom',
}}
cssMaxHeight={500}
cssMaxWidth={700}
selectionStyle={{
cornerSize: 20,
rotatingPointOffset: 70,
}}
usageStatistics={true}
/>
);
return (
<div className="App">
<header className="App-header">
<div><MyComponent /></div>
</header>
</div>
);
}
export default App;
Related
I'm trying to make a Vue project and use an npm package for connecting to the retroachievements.org api to fetch some data, but I'm getting an error. Here's my process from start to finish to create the project and implement the package.
Navigate to my projects folder and use the vue cli to create the project: vue create test. For options, I usually chose not to include the linter, vue version 2, and put everything in package.json.
cd into the /test folder: cd test and install the retroachievements npm package: npm install --save raapijs
Modify App.vue to the following (apologies for code formatting, not sure why the post isn't formatting/coloring it all properly...):
const RaApi = require('raapijs');
export default {
name: 'App',
data: () => ({
api:null,
user: '<USER_NAME>',
apiKey: '<API_KEY>',
}),
created() {
this.api = new RaApi(this.user, this.apiKey);
},
}
run `npm run serve' and get the error:
ERROR in ./node_modules/raapijs/index.js 2:14-30
Module not found: Error: Can't resolve 'https' in 'C:\Projects\Web\test\node_modules\raapijs'
I'm on Windows 10, Node 16.17.0, npm 8.15.0, vue 2.6.14, vue CLI 5.0.8, raapijs 0.1.2.
The first solution below says he can run it without error but it looks like the exact same code as I'm trying. Can anyone see a difference and a reason for this error?
EDIT: I reworded this post to be more clear about my process and provide more info, like the versions.
This solution works for me. I installed raapijs with npm install --save raapijs command. Then in my Vue version 2 component I used your code as follow:
const RaApi = require('raapijs');
export default {
data: () => ({
api: null,
user: '<USER_NAME>',
apiKey: '<API_KEY>',
}),
created() {
this.api = new RaApi(this.user, this.apiKey);
},
};
It seems the raapijs package was designed to be used in a Node environment, rather than in Vue's browser based environment, so that's the reason I was getting an error. The package itself was looking for the built in https package in Node, but since it wasn't running in Node, it wasn't finding it.
So I solved my problem by looking at the package's github repo and extractingt he actual php API endpoints that were being used and using those in my app directly, rather than using the package wrapper. Not quite as clean and tidy as I was hoping but still a decent solution.
After upgrading Swiper to Version 7.0.7, I'm getting this annoying error:
Error: Cannot find module 'swiper/react'
.
.
.
Source
.next\server\pages\items.js (1:0) # Object.swiper/react
> 1 | module.exports = require("swiper/react");
In the previous Version (6.8) I didn't see this error. I also checked the migration guide and github issues but found no helpful answer.
The thing is "import cost" extension in VSCode is showing the size of the imported module, so I think there's a problem with Next.js or webpack exporting it, but have no idea how to make it work.
I copy/pasted the exact code from Swiper docs, but will write it here too if it helps:
/* _app.js - imported here because Next doesn't allow global css imports elsewhere */
import 'swiper/scss';
/* slider component which is used inside pages/items.js */
import { Swiper, SwiperSlide } from "swiper/react"; /* 72.4k (gzipped 21.4k) */
export default function CategoriesBar() {
return (
<Swiper
spaceBetween={50}
slidesPerView={3}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
</Swiper>
);
}
Update
after upgrading Next.js to 11.1.2, the error message changed to:
Error: Not supported
I found the solution. It was not related to next.js nor webpack. ESM modules support started from Node.js 12.20 and mine was 12.16. Upgraded my Node.js installation & everything is working fine now!
https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
Question regarding NPM, ReactJS, and installed packages both globally, and locally. I have done quite of bit of searching and found no real resolution. Here's my main App component:
import React, { Component } from 'react'
// import ReactLogger from 'react-terminal-logger/console-logger'
import 'whatwg-fetch'
import Intro from '../Intro/Intro'
import './app.css'
// ReactLogger.config({
// visible: ['log', 'error', 'info', 'warn', 'logr'],
// save_logs: false,
// only_msg: true,
// port: 1234,
// stacktrace_hide: true,
// })
// ReactLogger.start()
class App extends Component {
state = {
series: [],
logs: [],
}
componentDidMount() {
// Hook(window.console, (log) => {
// this.setState(({ logs }) => ({ logs: [...logs, Decode(log)] }))
// })
fetch('http://api.tvmaze.com/search/shows?q=Vikings').then((response) => {
console.log(response)
// logr(response)
})
}
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">TV Series List</h1>
</header>
<Intro message="Here you can find all you most loved series!" />
The length of the series array is - {this.state.series.length}{' '}
</div>
)
}
}
export default App
Any time I install a package globally, so I can reuse it in other projects I end up with an error when I try to start the server. Such as the logging package (above) react-terminal-logger. I used the following steps:
npm install -g react-terminal-logger
added import and initialized components as per instructions
tried to use component (eg. logr(response))
I end up with the same error at compile time no matter what I installed globally and add to my project.
C:\Users\DawsonSchaffer\Documents\ProjectsDirectory\Projects\reactjsx-tutorial-old\node_modules\react-scripts\scripts\start.js:19
throw err;
[Error: ENOENT: no such file or directory, stat 'C:\Users\DawsonSchaffer\Application Data'] {
errno: -4058,
code: 'ENOENT',
syscall: 'stat',
path: 'C:\\Users\\DawsonSchaffer\\Application Data'
}
My global package prefix points to "C:\Users\DawsonSchaffer\AppData\Roaming\npm" which is the default. If I simply remove the components use by it commenting out everything works.
How do I resolve this? What is the proper way to install a new global package and add it to an existing project? What am I missing? Any help would be greatly appreciated.
One other note, if I install the component locally in my project it works fine. Overall point though is too not have to install it in every project.
Thanks
Dawson
The first thing to understand here is that the global install option of common JS package managers is not intended to facilitate shared project dependencies. To clarify, from NPM itself:
Installing a package globally allows you to use the code in the package as a set of tools on your local computer.
With that out of the way, the optimization you're looking for is a real one, but for different reasons than you may think. When thinking about dependency management, you're really thinking about a small subset of pros and cons related to deciding whether you want use a mono-repo, multi-repo (microservices) or some hybrid.
If you're dealing with entirely different projects that are using the same dependency, then ignore the previous paragraph as they should definitely each manage their own dependencies independently.
Maybe this answer could help you:
How do I install a module globally using npm?
Usually, global installation are meant to be for CLI tools or executable tools.
So I finally got it all straightened out. I uninstalled react, react-dom, and react-scripts from global; leaving me with only create-react-app. I created an empty project called react-boilerplate, and installed react, react-dom, react-scripts, and react-router-dom in the new project. I then uploaded to my GitHub account so I have a common starting point for new projects. Should have thought about this before but it took me a while to wrap my head around everything. Now I can update my boilerplate as needed, and use it to clone as a starting point for new projects. Yeah!
Thanks to everyone especially Dennis G for all his help!!
Dawson
I'm trying to set up react-snap in my reactjs project being hosted on heroku. I followed the instructions on the react-snap READme and have included the following in my client-side index.js:
import { hydrate, render } from 'react-dom';
const rootElement = document.getElementById('root');
if (rootElement.hasChildNodes()) {
hydrate(<App />, rootElement);
} else {
render(<App />, rootElement);
}
When I try to deploy to heroku i get the following error:
Error: Failed to launch chrome!
.../client/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory
I ran npm i puppeteer on the client side, and am able to locate the puppeteer directory, but it only includes win64-722234. Is there something special I need to do to get the linux directory to install?
I am developing in a windows environment
I have a react component. <myFooter>. It is a simple footer.
import React from 'react';
import './my-footer.scss';
export default class myFooter extends React.Component {
render() {
return (
<footer className="col-xs-12">
hello !
</footer>
);
}
}
I want to render it from the server-side. On the backend, I have an express server. For that I wrote this:
import myFooter from '../components/my-footer.jsx';
app.get('/footer', function(req, res) {
var string1 = ReactDOMServer.renderToString(myFooter);
res.send(string1);
});
Now the problem is that server cannot read sass files. For client side rendering, I am using webpack. Webpack builds everything and gives a bundle file.
But i'm not sure what happens if its the server side. How can I compile using webpack. If I can, will i need to compile my app for each request on node server ?
You need 2 webpack builds:
1 to build the client
1 to build the server.
When building the server, use css-loader/locals instead of css-loader in your webpack configuration.
Read through this issue for more details: https://github.com/webpack/css-loader/issues/59