I have a styled component that I want to build into an NPM package and be able to import into other projects.
My styled component is something like this:
// src/StyledDiv.styles.js
import styled from "styled-components"
const StyledDiv = styled("div")`
border: solid red 1px;
border-radius: 5px;
padding: 20px;
margin: 15px;
`
export default StyledDiv
I then have a build script that should transpile my code into a dist folder:
"build": "babel src -d dist --copy-files --ignore './src/**/*.test.js'",
// .babelrc
{
"presets": ["env", "react"]
}
I then run npm link in my styled component project and then npm link <styled component> in my other project in order to try import it but seem to get the error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Which I believe arrives from babel not transpiling my styled component correctly so when I import the built files in dist, the app crashes.
My full package.json is as follows:
{
"name": "my-styled-component",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"test": "jest ./src/**/*.test.js --notify --detectOpenHandles",
"test:watch": "jest ./src/**/*.test.js --notify --watch",
"start": "webpack-dev-server --mode development",
"build": "babel src -d dist --copy-files --ignore './src/**/*.test.js'",
"lint:css": "stylelint './src/**/*.styles.js'"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-jest": "^24.8.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.8.0",
"jest-styled-components": "^6.3.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-test-renderer": "^16.8.6",
"style-loader": "^0.23.1",
"stylelint": "^10.0.1",
"stylelint-config-recommended": "^2.2.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.6.0",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"styled-components": "^4.2.0",
"styled-tools": "^1.7.1"
}
}
It looks like you need to import react in the component file.
import React from 'react';
You need use this in .babelrc:
presets: [
'#babel/env',
'#babel/react',
],
Related
These are my setup files
Router.js
import { createWebHistory, createRouter } from 'vue-router';
import MyComponent from './component/MyComponent.vue';
const routes = [{
path: 'main/publish/tasks',
component: MyComponent
}]
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
index.js
import { createApp, configureCompat } from 'vue';
import router from './Router';
import MainApp from './MainApp.vue';
const app = createApp(MainApp);
app.use(router);
configureCompat({
// default everything to Vue 2 behavior
MODE: 2,
});
app.mount('.vue-app');
MainApp.vue
<template>
<router-view />
</template>
<script>
export default{
name: 'MainApp'
}
</script>
Edit:
MyComponent.vue
<template>
<div> Hello world </div>
</template>
<script>
export default {
name: 'MyComponent'
}
</script>
package.json
{
"name": "Demo Project",
"version": "6.0.0",
"dependencies": {
"#vue/compat": "^3.2.39",
"#vue/compiler-sfc": "^3.2.39",
"core-js": "3.1.2",
"mitt": "^3.0.0",
"moment": "^2.29.4",
"regenerator-runtime": "^0.13.9",
"vue": "^3.2.41",
"vue-carousel": "^0.18.0",
"vue-click-outside": "^1.1.0",
"vue-color": "^2.8.1",
"vue-custom-element": "^3.3.0",
"vue-debounce": "^2.6.0",
"vue-multiselect": "^2.1.6",
"vue-router": "^4.1.6",
"vuex": "^4.0.2",
"whatwg-fetch": "^3.6.2"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/plugin-proposal-class-properties": "^7.12.13",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-env": "^7.11.5",
"#types/jest": "^28.1.8",
"#types/node": "^14.14.45",
"#typescript-eslint/eslint-plugin": "^5.31.0",
"#typescript-eslint/parser": "^5.31.0",
"#vue/test-utils": "^1.3.0",
"autoprefixer": "^10.4.12",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^28.1.3",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^4.3.0",
"file-loader": "^6.2.0",
"license-checker": "^25.0.1",
"mini-css-extract-plugin": "^0.12.0",
"postcss": "^8.4.16",
"postcss-loader": "^4.3.0",
"terser-webpack-plugin": "^4.2.3",
"ts-loader": "^8.0.18",
"typescript": "^4.0.8",
"vue-jest": "^3.0.7",
"vue-loader": "^17.0.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-manifest-plugin": "^2.2.0",
"webpack-merge": "^5.7.3"
},
"resolutions": {
"lodash": "^4.17.21"
},
"scripts": {
"dev": "webpack --config webpack.dev.js",
"watch": "webpack --config webpack.dev.js --watch",
"build": "webpack --config webpack.prod.js",
"test": "jest src"
}
}
This code setup leads me to this error
Can anyone help me what I'm doing wrong? Everything works when I remove <router-view/>. I can render component fine by importing and adding it to MainApp.vue. But cannot get it rendered through <router-view/>.
package.json file
{
"name": "myapp",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.2.0",
"#fortawesome/free-regular-svg-icons": "^6.2.0",
"#fortawesome/free-solid-svg-icons": "^6.2.0",
"#fortawesome/react-fontawesome": "^0.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0"
},
"devDependencies": {
"#types/react": "^18.0.17",
"#types/react-dom": "^18.0.6",
"#vitejs/plugin-react": "^2.1.0",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8",
"vite": "^3.1.0"
}
}
icontext component here i am trying to add social media icons:
import React from 'react'
const IconsText = () => {
return (
<div className="container-fluid bg-[#1d3943]">
</div>
)
}
export default IconsText
I don't know what i am doing wrong i tried add code but failed what should I do to add icons
In order to add font-awesome icons you need to make sure you have installed it first. Go to your project folder and execute the command npm install react-icons or yarn add react-icons. Now in your component you should import the react-icons module like:
import * as aiicons from 'react-icons/ai'
react-icons has each folder corresponding to what you wanna use. Hope this helps!
Check out the font awesome guide on importing icons in react
I'm learning TypeScript and I'm trying to add TypeScript into my pet project. In the ReactDOM.render function call I'm getting this error:
No overload matches this call. The last overload gave the following
error.
Argument of type 'BrowserRouter' is not assignable to parameter of type 'ReactElement<any, string | ((props: any) => ReactElement<any,
any> | null) | (new (props: any) => Component<any, any, any>)>[]'.
Type 'BrowserRouter' is missing the following properties from type 'ReactElement<any, string | ((props: any) => ReactElement<any,
any> | null) | (new (props: any) => Component<any, any, any>)>[]':
length, pop, push, concat, and 26 more.
Here is the code:
import React from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import App from "./App";
import configureStore from './store';
const store = configureStore();
ReactDOM.render(
<Router>
<Provider store={store}>
<App />
</Provider>
</Router>,
document.getElementById("root")
);
package.json
{
"name": "WhatToCook",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development --open --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.12.13",
"#babel/core": "^7.12.13",
"#babel/plugin-proposal-class-properties": "^7.12.13",
"#babel/preset-env": "^7.12.13",
"#babel/preset-react": "^7.12.13",
"#types/react-dom": "^17.0.3",
"#types/react-redux": "^7.1.16",
"#types/react-router-dom": "^5.1.7",
"babel-loader": "^8.2.2",
"css-loader": "^1.0.1",
"style-loader": "^0.23.1",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"lodash": "^4.17.20",
"react": "^17.0.1",
"react-addons-update": "^15.6.3",
"react-dom": "^17.0.1",
"react-hot-loader": "^4.13.0",
"react-jss": "^10.5.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0"
}
}
I tried to install the type dependencies for all packages that I'm using in this file but it doesn't help.
If you add typescript and if you have JSX inside your component or component test file must have .tsx as your file extension. The code can not compile if you have the .ts file extension. So if that's your case rename it to .tsx.
Downgrading to 15.04 version of React type definitions could also work see this thread: Allow SFC to return null
I am using vueJS to build an authentication (login) page with Firebase, each time when I run: npm run serve I have the same error asking me to install Firebase: `Failed to compile with 7 errors 10:44:30 AM
These dependencies were not found:
#firebase in ./src/main.js
firebase in ./src/components/firebaseInit.js, ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Login.vue and 3 others
firebase/firestore in ./src/components/firebaseInit.js`.
and asking me to install firebase doing: npm install --save #firebase firebase firebase/firestore. which I did many times, but still the same error.
Here is my package.JSON:
{
"name": "Project",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
},
"dependencies": {
"firebase": "^7.13.1",
"node-pre-gyp": "^0.14.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"gh-pages": "^1.1.0",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
node -v = 16.12.1
npm -v =6.14.4
Any idea ?
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import router from "./router";
import firebase from "#firebase";
import "./components/firebaseInit";
Vue.config.productionTip = false;
let app;
firebase.auth().onAuthStateChanged(function(user) {
if (!app) {
/* eslint-disable no-new */
app = new Vue({
el: "#app",
router,
template: "<App/>",
components: { App }
});
}
});
firebaseInit.js
import firebase from 'firebase';
import 'firebase/firestore';
import firebaseConfig from './firebaseConfig';
const firebaseApp = firebase.initializeApp(firebaseConfig);
export default firebaseApp.firestore();
I find it, just replace "firebase": "^7.13.1" by "firebase": "7.13.1". and it worked.
I don't know why, but it worked!
import { initializeApp } from 'firebase/app'
import { firebaseConfig } from './config'
initializeApp(firebaseConfig)
I followed the directions for registering and using custom elements here:
https://alligator.io/vuejs/custom-elements/
I'm using the standard Webpack template for Vue.
When I run
npm run build
I expect to get a packaged web component file called element.js in the dist directory. Nothing happens, though. Does anyone know if there are any extra steps needed? The documentation doesn't make this clear.
This produced the following files in my project:
<template>
<div id="app">
<example myProp="I can pass props!"></example>
</div>
</template>
<script>
import Example from './components/example.Vue'
export default {
name: 'app',
components: {
Example
}
}
</script>
<style>
</style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import vueCustomElement from 'vue-custom-element'
Vue.config.productionTip = false
Vue.use(vueCustomElement);
/* eslint-disable no-new */
import Example from './components/Example.vue';
// Configure Vue to ignore the element name when defined outside of Vue.
Vue.config.ignoredElements = [
'example-component'
];
// Enable the plugin
Vue.use(vueCustomElement);
// Register your component
Vue.customElement('example-component', Example, {
// Additional Options: https://github.com/karol-f/vue-custom-element#options
});
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
components/example.vue
<template>
<p>Dynamic prop value: {{myProp}}</p>
</template>
<script>
export default {
props: ['myProp']
}
</script>
package.json
{
"name": "example",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-custom-element": "^2.0.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
After including the script files for the custom element and vue libraries, my index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>example</title>
<script src="vue/dist/vue.min.js"></script>
<script src="vue-custom-element/dist/vue-custom-element.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The docs and the alligator.io article don't explain it, but in order to work, a vue-custom-element still requires the Vue.js and vue-custom-element libraries.
So you have to use the <script> includes that webpack generates in the index.html.
Found a tutorial which mentions that:
http://vuetips.com/vue-web-components
This implementation requires Vue.js core files and the
vue-custom-element library to be included in your page.
It also mentions https://github.com/kartsims/vue-customelement-bundler which is a template that builds everything into a single .js file.