I want to use Ant Design with Snowpack. I followed the And Design docs and installed antd but whenever I run my application the dependency can't be resolved.
I get the following error message:
[snowpack] Import "antd" could not be resolved.
If this is a new package, re-run Snowpack with the --reload flag to rebuild.
If Snowpack is having trouble detecting the import, add "install": ["antd"] to your Snowpack config file.
My App.tsx:
import React from 'react';
import './App.css';
import { Button } from 'antd';
function App(): JSX.Element {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
export default App;
My package.json dependencies:
"dependencies": {
"antd": "^4.6.2",
"axios": "^0.20.0",
"postcss": "^7.0.32",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hook-form": "^6.7.0",
"tailwindcss": "^1.7.6"
},
"devDependencies": {
"#snowpack/app-scripts-react": "^1.10.0",
"#testing-library/jest-dom": "^5.5.0",
"#testing-library/react": "^10.0.3",
"#types/react": "^16.9.35",
"#types/react-dom": "^16.9.8",
"#types/snowpack-env": "^2.3.0",
"#typescript-eslint/eslint-plugin": "^4.0.1",
"#typescript-eslint/parser": "^4.0.1",
"eslint": "^7.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.0",
"jest": "^26.2.2",
"postcss-cli": "^7.1.2",
"prettier": "^2.0.5",
"snowpack": "^2.9.0",
"typescript": "^3.9.7"
}
Am I missing something?
Make sure antd is already installed. Try this in snowpack.config.js:
module.exports = {
mount: {
public: "/",
src: "/_dist_",
},
installOptions: {
namedExports: ["antd"],
},
};
Related
I have a vue2 app which does not implement typescript. I have decided to migrate the app to react. Thought process is to implement new features in react and let the old features run in vue. This is what I have done so far.
Created a new react-migration folder which will have all the new features.
Tried two ways to use the HelloWorld component
Create a react wrapper which takes the react component and renders it.
<template>
<div ref="container" />
</template>
<script>
import { createElement } from "react";
import { createRoot } from "react-dom/client";
export default {
inheritAttrs: false,
props: {
component: {
type: Function,
required: true,
},
},
data() {
return {
reactRoot: null,
};
},
watch: {
$attrs: {
deep: true,
handler() {
this.updateReactComponent();
},
},
},
mounted() {
this.reactRoot = createRoot(this.$refs.container);
this.updateReactComponent();
},
destroyed() {
this.reactRoot.unmount();
},
methods: {
updateReactComponent() {
this.reactRoot.render(createElement(this.component, this.$attrs));
},
},
};
</script>
Used veaury package to do the same.
Issue :
I have added all the ext in the config file.
extensions: ['*', '.js', '.vue', '.json','.tsx','.ts','.jsx']
I believe its because my vue project is not able to recognise the react tsx file.
All the help is appreciated.
Implementation reference articles
Veary implementation reference
React to vue migrations reference
package.json dependencies
"dependencies": {
"#cypress/vue": "^2.2.4",
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-regular-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/vue-fontawesome": "^2.0.2",
"#tiptap/extension-character-count": "^2.0.0-beta.12",
"#tiptap/extension-collaboration": "^2.0.0-beta.19",
"#tiptap/extension-collaboration-cursor": "^2.0.0-beta.20",
"#tiptap/extension-font-family": "^2.0.0-beta.207",
"#tiptap/extension-highlight": "^2.0.0-beta.14",
"#tiptap/extension-link": "^2.0.0-beta.18",
"#tiptap/extension-table": "^2.0.0-beta.24",
"#tiptap/extension-table-cell": "^2.0.0-beta.13",
"#tiptap/extension-table-header": "^2.0.0-beta.15",
"#tiptap/extension-table-row": "^2.0.0-beta.13",
"#tiptap/extension-task-item": "^2.0.0-beta.16",
"#tiptap/extension-task-list": "^2.0.0-beta.16",
"#tiptap/extension-text-style": "^2.0.0-beta.207",
"#tiptap/extension-typography": "^2.0.0-beta.207",
"#tiptap/extension-underline": "^2.0.0-beta.207",
"#tiptap/html": "^2.0.0-beta.84",
"#tiptap/prosemirror-tables": "^1.1.4",
"#tiptap/starter-kit": "^2.0.0-beta.80",
"#tiptap/vue-2": "^2.0.0-beta.39",
"#vue/babel-preset-jsx": "^1.4.0",
"#vue/cli": "^4.5.15",
"axios": "^0.19.2",
"buefy": "^0.9.4",
"canvg": "^4.0.1",
"core-js": "^2.6.5",
"dompurify": "^2.4.3",
"echarts": "^4.4.0",
"eslint-plugin-cypress": "^2.12.1",
"google-fonts-webpack-plugin": "^0.4.4",
"hooper": "^0.3.4",
"html2pdf.js": "^0.10.1",
"jspdf": "^2.5.1",
"lodash": "^4.17.21",
"moment": "^2.24.0",
"npm-run-all": "^4.1.5",
"numeral": ">=2",
"postcss-loader": "^3.0.0",
"prosemirror-commands": "^1.5.0",
"prosemirror-history": "^1.3.0",
"prosemirror-keymap": "^1.2.0",
"prosemirror-schema-list": "^1.2.2",
"raw-loader": "^0.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.57.1",
"sass-rem": "^3.0.0",
"socket.io": "^2.3.0",
"socket.io-client": "^2.3.0",
"veaury": "^2.3.11",
"vee-validate": "^3.2.1",
"vue": "^2.6.10",
"vue-axios": "^2.1.5",
"vue-carousel": "^0.18.0",
"vue-class-component": "^7.1.0",
"vue-content-loading": "^1.6.0",
"vue-drawer-layout": "^1.3.0",
"vue-echarts": "^4.0.4",
"vue-html2pdf": "^1.8.0",
"vue-i18n": "^8.0.0",
"vue-jwt-decode": "^0.1.0",
"vue-line-clamp": "^1.3.2",
"vue-moment": "^4.0.0",
"vue-numerals": "^3.0.5",
"vue-router": "^3.1.3",
"vue-star-rating": "^1.6.1",
"vuedraggable": "^2.23.2",
"vuex": "^3.1.2",
"webpack-dev-server": "^4.7.4",
"y-indexeddb": "^9.0.6",
"y-websocket": "^1.3.15",
"yjs": "^13.5.10"
},
"devDependencies": {
"#iconify/icons-icomoon-free": "^1.2.3",
"#iconify/vue2": "^2.0.1",
"#kazupon/vue-i18n-loader": "^0.3.0",
"#types/uuid": "^9.0.0",
"#vue/cli-plugin-babel": "^3.11.0",
"#vue/cli-plugin-eslint": "^3.11.0",
"#vue/cli-service": "^3.11.0",
"#vue/eslint-config-prettier": "^5.0.0",
"babel-eslint": "^10.0.3",
"cache-loader": "^4.1.0",
"css-loader": "^3.2.1",
"cypress": "^12.3.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "^6.7.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.2.3",
"file-loader": "^3.0.1",
"prettier": "^1.19.1",
"sass-loader": "^7.1.0",
"url-loader": "^2.1.0",
"vue-cli-plugin-i18n": "^0.6.0",
"vue-eslint-parser": "^7.0.0",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
}
I have installed yarn add react-native-svg this library as I want to design circular progress bar on a react-native app screen. I am getting this below error and I have tried everything possible but its not getting resolved. I am also tried to manually link the library (We don't need to do that as I am using react-native >0.60. It provides auto-linking).
ERROR Invariant Violation: requireNativeComponent: "RNSVGCircle" was not found in the UIManager.
The code where it's throwing exception is as below
import React from 'react';
import { View, Text } from 'react-native';
import { Circle } from 'react-native-svg';
const CircularProgressBarTest = ({ progress }) => {
const circumference = 2 * Math.PI * 100;
const strokeDashoffset = circumference - (progress / 100) * circumference;
return (
<View>
<Circle
cx={200}
cy={200}
r={100}
stroke="#000"
strokeWidth={20}
fill="transparent"
strokeDasharray={circumference}
strokeDashoffset={strokeDashoffset}
/>
<Text>{progress}%</Text>
</View>
);
};
export default CircularProgressBarTest;
My package.json file looks like this
"dependencies": {
"#dietime/react-native-date-picker": "^1.2.0",
"#react-native-async-storage/async-storage": "^1.14.1",
"#react-native-community/datetimepicker": "^6.5.2",
"#react-native-community/masked-view": "^0.1.10",
"#react-native-community/push-notification-ios": "^1.8.0",
"#react-native-firebase/app": "^12.0.0",
"#react-native-firebase/auth": "^12.0.0",
"#react-native-firebase/firestore": "^12.0.0",
"#react-native-picker/picker": "^1.16.1",
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.4",
"expo": "~42.0.1",
"expo-constants": "~11.0.1",
"expo-font": "^9.1.0",
"expo-linear-gradient": "^12.0.1",
"expo-notifications": "^0.12.3",
"expo-task-manager": "~9.2.2",
"react": "17.0.1",
"react-native": "0.64.2",
"react-native-chart-kit": "^6.12.0",
"react-native-circular-progress": "*",
"react-native-circular-progress-indicator": "^4.4.2",
"react-native-date-picker": "^4.2.5",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "~1.10.2",
"react-native-linear-gradient": "^2.6.2",
"react-native-modalize": "^2.0.8",
"react-native-paper": "^4.8.1",
"react-native-radio-check": "^1.0.0",
"react-native-reanimated": "^2.13.0",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "~3.4.0",
"react-native-snap-carousel": "^3.9.1",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^13.6.0",
"react-native-unimodules": "~0.14.5",
"react-native-vector-icons": "^8.1.0",
"react-usestateref": "^1.0.5"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native"
}
}
Problems with Proguard
When Proguard is enabled (which it is by default for Android release builds), it causes runtime error. To avoid this, add an exception to android/app/proguard-rules.pro:
-keep public class com.horcrux.svg.** {*;}
If you have build errors, then it might be caused by caching issues, please try:
watchman watch-del-all
rm -fr $TMPDIR/react-*
react-native start --reset-cache
Or,
rm -rf node_modules
yarn
react-native start --reset-cache
Took from the Troubleshooting area of react-native-svg
I'm creating an internal NPM package that contains the base layout for all of our ReactJS web applications. In this package, I am using styled-components for formatting the components, and rollup to build the package. Styled components is also used in the target application.
Here are the config files:
packages.json
{
....
"dependencies": {
"#azure/msal-browser": "^2.7.0",
"#microsoft/microsoft-graph-client": "^2.1.1",
"#microsoft/microsoft-graph-types": "^1.27.0",
"#microsoft/signalr": "^3.1.8",
"#types/react-custom-scrollbars": "^4.0.7",
"#types/react-html-parser": "^2.0.1",
"react-contextmenu": "^2.14.0",
"react-custom-scrollbars": "^4.2.1",
"react-html-parser": "^2.0.2",
"react-loading": "^2.0.3"
},
"devDependencies": {
"#rollup/plugin-commonjs": "^16.0.0",
"#rollup/plugin-image": "^2.0.5",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-node-resolve": "^10.0.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/axios": "^0.14.0",
"#types/react": "^16.14.2",
"#types/react-dom": "^16.9.10",
"#types/react-router-dom": "^5.1.6",
"#types/styled-components": "^5.1.4",
"axios": "^0.21.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"reactjs-popup": "^2.0.4",
"rollup": "^2.33.3",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-typescript2": "^0.29.0",
"styled-components": "^5.2.1",
"typescript": "^4.1.2"
},
"peerDependencies": {
"axios": ">=0.21.0",
"react": ">=17.0.1",
"react-dom": ">=17.0.1",
"react-html-parser": ">=2.0.2",
"react-router": ">=5.2.0",
"react-router-dom": ">=5.2.0",
"reactjs-popup": ">=2.0.4",
"styled-components": ">=5.2.1",
"typescript": ">=4.1.2"
},
...
}
rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import image from '#rollup/plugin-image';
import resolve from '#rollup/plugin-node-resolve';
import commonjs from "#rollup/plugin-commonjs";
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import json from '#rollup/plugin-json';
import pkg from './package.json';
const plugins = [
resolve( { preferBuiltins: true, mainFields: [ 'browser' ] } ),
peerDepsExternal(),
commonjs(),
typescript( {
typescript: require( "typescript" ),
useTsconfigDeclarationDir: true
} ),
json(),
image(),
];
export default [
{
input: "src/index.ts",
output: {
file: pkg.module,
format: "esm",
sourcemap: true
},
plugins,
},
];
When I add the package to the reactJS application, everything seems fine, I can see the package, use it where it is required, but when I run and browse to it, I get the following error:
The code in question was working before I moved it to an NPM package,
So, after two weeks, it turns out that having an image in the theme was what was causing this. Changing the image from an import to a url reference fixed this problem.
I am trying to add the #DragDropContext decorator on my class but I am getting an error when I load it in my browser.
My component looks like:
import React from 'react';
import Link from 'react-router-dom';
import { connect } from 'react-redux';
import { DragDropContext } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import PropTypes from 'prop-types';
#DragDropContext(HTML5Backend)
class UserShowView extends React.Component {
}
export default connect(mapStateToProps)(UserShowView);
This is what the error looks like in chrome console:
bundle.js:977 Uncaught Error: Expected the backend to be a function or
an ES6 module exporting a default function. Read more:
http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html
My babelrc file:
{
"plugins": ["transform-decorators-legacy"],
"presets": ["react", "es2015", "stage-0"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
packages.json:
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node tools/srcServer.js",
"test": "NODE_ENV=test jest",
"lint": "eslint --max-warnings=0 src test",
"test:watch": "NODE_ENV=test jest --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-plugin-react-display-name": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"colors": "^1.1.2",
"compression": "^1.7.1",
"eslint": "^4.15.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.5.1",
"eslint-watch": "^3.1.3",
"express": "^4.16.2",
"jest": "^22.0.6",
"node-sass": "^4.7.2",
"npm-run-all": "^4.1.2",
"redux-devtools": "^3.4.1",
"sass-loader": "^6.0.6",
"webpack": "^3.10.0",
"webpack-dev-middleware": "^2.0.4",
"webpack-dev-server": "^2.10.1",
"webpack-hot-middleware": "^2.21.0"
},
"dependencies": {
"axios": "^0.17.1",
"history": "^4.7.2",
"lodash": "^4.17.5",
"moment": "^2.20.1",
"react": "^16.2.0",
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.5.4",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
}
What am I doing wrong or am I missing a babel preset?
Is my "transform-decorators-legacy" even working?
As the error messages shows, #DragDropContext(HTML5Backend) is expecting a module or function.
From the documentation you should be importing the HTML5Backend module with:
import HTML5Backend from 'react-dnd-html5-backend';
Since you are using
import { HTML5Backend } from 'react-dnd-html5-backend';
You are trying to import a specific export that doesn't exist thus DragDropContext showing the error.
Importing with curly brackets is for specific exports vs without curly brackets which is for default exports.
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
for more information on different ways of importing modules and functions.
Just remove the curly braces around HTML5Backend
import HTML5Backend from 'react-dnd-html5-backend';
http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html#usage
I am trying to get started in building a react application using konva, react-konva.
I built a basic react component:
import React, { Component } from "react";
import { Stage } from "react-konva";
import Square from "./Square.jsx";
class Map extends Component {
render() {
return (
<Stage height={100} width={100}>
<Layer>
</Layer>
</Stage>
);
}
}
export default Map;
and also a test using jest:
/* global beforeEach describe expect it */
import { shallow } from "enzyme";
import React from "react";
import Map from "../Map";
function createComponent() {
const wrapper = shallow(
<Map />
);
return wrapper;
}
describe("Map component test", () => {
describe("When initializing the component", () => {
let sut;
beforeEach(() => {
sut = createComponent();
});
it("it should render a Stage component", () => {
expect(sut.find("Stage").exists()).toBe(true);
});
});
});
When this test runs, I get the following error:
TypeError: Cannot read property 'webkitBackingStorePixelRatio' of null
at node_modules/konva/konva.js:1291:36
at node_modules/konva/konva.js:1298:7
at Object.<anonymous> (node_modules/konva/konva.js:1477:3)
at Object.<anonymous> (node_modules/react-konva/src/react-konva.js:4:13)
at Object.<anonymous> (src/mapping/Map.jsx:2:19)
at Object.<anonymous> (src/mapping/MapContainer.js:3:12)
at Object.<anonymous> (src/App.jsx:3:21)
at Object.<anonymous> (src/tests/App.spec.js:5:12)
My dependencies from package.json:
"dependencies": {
"konva": "^1.6.3",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-konva": "^1.1.3",
"react-redux": "^5.0.5",
"redux": "^3.7.1"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"canvas": "^1.6.5",
"chalk": "^1.1.3",
"coveralls": "^2.13.1",
"css-loader": "^0.28.4",
"enzyme": "^2.8.2",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-plugin-import": "^2.5.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.1.0",
"eslint-watch": "^3.1.2",
"html-webpack-plugin": "^2.28.0",
"jest": "^20.0.4",
"jsdom": "^11.1.0",
"node-gyp": "^3.6.2",
"npm-run-all": "^4.0.2",
"react-test-renderer": "^15.6.1",
"redux-mock-store": "^1.2.3",
"style-loader": "^0.18.2",
"webpack": "^3.0.0"
}
I'm sure that this is related to node setup, but I am unsure of the correct way to do it. Can anyone help?
I fixed it by installing and using konva-node in my test:
import Konva from 'konva-node';
I also had to specify that it's not used in the browser before executing any tests:
Konva.isBrowser = false;
I am using the following dependencies:
"dependencies": {
"axios": "^0.18.0",
"konva": "^2.5.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-konva": "^16.5.2",
"react-scripts": "2.0.5"
},
"devDependencies": {
"chai": "^4.2.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"konva-node": "^0.5.5",
"sinon": "^7.1.1",
"sinon-chai": "^3.2.0"
},
There are several options:
The one mentioned by Alpar. It works for me but it requires building of old node-canvas version.
Using https://github.com/hustcc/jest-canvas-mock. If you are using Create React App just add import 'jest-canvas-mock' in your setupTests.js
Theoretically npm i -D canvas should solve this problem as well but I have not managed to make it work. Read here https://github.com/jsdom/jsdom/issues/1782 for more ideas.