After successfully Clone Angular Project from GitHub, using git clone ---link. Then when I run "npm install" I found those errors.
That's because uikit does not export a specific property name UIkit.
You should use import UIkit from 'uikit'; and it should work. Without the { } wrapping.
See here for more
Related
Describe the bug
Hi, I'm trying using Metaplex to upload the assets and verify the collection, I am now moving towards "Minting Website": https://docs.metaplex.com/candy-machine-v2/mint-frontend
run rpm start inside the folder ~/metaplex/js/packages/candy-machine-ui to test the mint button, it doesn't load the localhost and it shows me the following error on the terminal:
Failed to compile.
./node_modules/#solana/buffer-layout-utils/lib/esm/web3.mjs
Can't import the named export 'PublicKey' from non EcmaScript module (only default export is available)
Anyone know how to solve this? thanks
I'm using Visual Studio on Windows, node 14.15.
Update:
It seems I'm not alone:
https://github.com/solana-labs/buffer-layout-utils/issues/6
Solved it:
How to downgrade the version of Solana to 1.9.1
For some reason yarn install wasn't doing it for me like in the docs.
I deleted node_module, package-lock.json and yarn.lock then installed with npm instead
npm install && npm start
that worked for me
I made a new react project using npx create-react-app app-name --template typescript and it ran fine until I imported another .tsx file. Now when I try to import another .tsx file it gives me an error: Module not found: Error: Can't resolve './components/component' in '/Users/benbaldwin/Desktop/project/frontend/teacher/src'
The only thing I'm doing differently than normal is the file structure. Since I have multiple react projects in the frontend folder that share dependancies I moved the node_modules to cover all of those subdirectories. my file structure looks like this:
- frontend
- node_modules
- project-1
- public
- src
index.tsx
react-app-env.d.ts
- components
component.tsx
- project-2
package.json
tsconfig.json
the component file looks like this:
import React from 'react';
const Component: React.FC = () => {
return <div>hello</div>;
};
export default Component;
and the index file looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import Component from './components/component';
import './index.css';
ReactDOM.render(
<React.StrictMode>
<Component />
</React.StrictMode>,
document.querySelector('#root')
);
do I need to eject create-react-app and write out my own web pack config or is there a better way to fix this?
the full source code is on my GitHub: https://github.com/baldwin-dev-co/mountaineer
I just came across this problem as well, with a brand new React project.
Temporarily downgrading react-scripts from version 5.0.0 to 4.0.3 solved it for me, because after invoking npm install and npm run start this added the missing tsconfig.json file - which was the actual cause of the problem.
After this I could safely go back to 5.0.0 and everything worked fine.
I've run into this issue as well upgrading a project to typescript, using react-scripts 5.0.1.
In an attempt to diagnose what was going on, since there are only a few hits on this searching the problem, I setup 2 new projects.
First, is the npx create-react-app myapp non-typescript-template project;
Let it run and install as is
Builds as expected
Run npm install --save typescript #types/node #types/react #types/react-dom #types/jest
Change a file to tsx, didn't matter which one, any change had the same result
No tsconfig.json generated (as spoken about in the documentation), build fails with errors Module not found: Error: Can't resolve './App' in 'E:\create-react-tsx\myappts\src'
Second, run npx create-react-app myappts --template typescript typescript-template project;
Let it run and install as is
Builds as expected
Observations;
Copying the generated tsconfig.json from the typescript-template project (myappts) to the non-typescript-template project (myapp) didn't resolve the issue. The errors relate to the svg import etc. Cannot find module './logo.svg' or its corresponding type declarations.
Additionally copying the typescript-template project (myappts) react-app-env.d.ts over to the non-typescript-template project (myapp) got the project to build.
As an alternative, downgrading to react-scripts#4 in the non-typescript-template project (myapp), then changing a file to tsx and run a build generates the two required files. A subsequent upgrade to react-scripts continues to generate successful builds.
There is a bug filed for this issue;
https://github.com/facebook/create-react-app/issues/10951
Further links;
What is the react-app-env.d.ts in a react typescript project for
https://create-react-app.dev/docs/adding-typescript/
I've created a repository which contains a React app (created with create-react-app) and a components directory which contains a simple Material UI button. The folder structure is:
/components
/react-app
Both directories are set up to use Yarn 2, and are not in a workspace (as I'm trying to simulate projects in separate directories and simplify my real world scenario).
I build the components:
$ cd ~/components && yarn build
I then Yarn link the components to the React app:
$ cd ~/react-app & yarn link ../components -r -p
This results in a modification to package.json file in the react-app directory:
{
"name": "react-app",
...
"resolutions": {
"components": "portal:../components"
}
}
My App.tsx file looks like this:
import './App.css';
import { Button } from 'components';
import React from 'react';
function App() {
return (
<Button>Test</Button>
);
}
export default App;
However, when I run the React app using yarn start I get the following error:
./src/App.tsx
Module not found: Your application tried to access components, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.
I'm not sure what I'm doing wrong. If I add an explicit reference to the components directory within dependencies (which I don't believe I should have to do because I've already linked it) such as:
"dependencies": {
"components": "portal:../components"
}
Then I get the error:
./src/App.tsx
Module not found: You attempted to import ~/react-app/.yarn/$$virtual/components-virtual-de9a8055ab/2/components which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Surely, I don't have to eject the app and find a way to bypass this error?
EDIT: According to the Yarn documentation "Webpack 5 will support PnP natively, but if you use Webpack 4 you'll need to add the pnp-webpack-plugin plugin yourself". At the time of writing, the latest version of create-react-app relies on v3.4.1 of react-scripts which in turn relies on Webpack 4. I therefore ejected my app to inspect the Webpack configuration, and it appears that this plugin is already installed. It's therefore not a CRA/Webpack issue. I also upgraded my version of Node from v10.16.0 to v12.16.3 to no avail.
TLDR; Add the package as a dependency then modify your React setup to import files outside of the /src directory.
In my case, it doesn't look like yarn link is doing anything other than adding a resolutions entry in package.json, which according to the documentation is only used to specify the version to resolve. Perhaps my understanding of Yarn link is wrong (even though it held up in v1).
To fix the issue I had to add the reference to dependencies in package.json (even though I'd already run yarn link):
"dependencies": {
"components": "portal:../components"
}
This caused the aforementioned You attempted to import components which falls outside of the project src/ directory error. To resolve this we either need to eject the React app and disable the ModuleScopePlugin in Webpack (therefore allowing the import of files outside the /src folder), or use craco with custom configuration. I've created yarn-eject and craco branches to demonstrate both.
It's not a particularly elegant solution, and I'm hoping someone can post a better alternative. I switched to Yarn 2 so that I could utilise the "Improved Peer Dependency Links" feature (so that I'm only relying on one version of react across my applications and shared components packages). I'd rather not have to eject my React app or use custom configuration if possible.
Trying to create a panel plugin with react in Grafana.
As shown in their demos, added the workshop-panel created by them and added it my set up.
When running it, getting the error:
Failed to import plugin module TypeError: a.ReactPanelPlugin is not a constructor
I got the same error. This it is probably due to grafana latest not yet fully supporting the react plugins.
What I did to solve it:
Use yarn link as described here: https://www.npmjs.com/package/#grafana/ui:
"For development purposes we suggest using yarn link that will create symlink to #grafana/ui lib. To do so navigate to packages/grafana-ui
and run yarn link. Then, navigate to your project and run yarn link
#grafana/ui to use the linked version of the lib. To unlink follow the
same procedure, but use yarn unlink instead."
Then in the react panels module.tsx change export const reactPanel = new PanelPlugin(MyPanel); to export const plugin = new PanelPlugin(MyPanel);
It worked for me :-)
I've created a react app using "create-react-app" command and updated all packages in package.json, App was not working in IE(any version) but after adding #babel/polyfil dependecy, it worked with IE-11, but facing problem with IE-10 and older version.
SCRIPT438: Object doesn't support property or method 'setPrototypeOf'
Create React App requires polyfills to work on Internet Explorer. You should follow the official guide to make it work on IE 9, 10 or 11. At the time of this writing it requires the following steps:
Install react-app-polyfill via npm or yarn.
npm install react-app-polyfill
Import it in your code:
import 'react-app-polyfill/ie9';
// or
import 'react-app-polyfill/ie11';