I'm not sure if this is the right place, I've created a node_modules where I have storybook and all my components, I want to use them in my next project but it doesn't work very well, I can see the component but on the page load is without any style and after half second the style is applied. Moving the components inside nextjs works fine:
// import Nav from '../components/Nav'; => works
// import Footer from '../components/Footer'; => works
import { Nav, Footer } from 'ui-components'; => not working
I'm importing the library with this:
module.exports = withTM({
transpileModules: ['ui-components'],
webpack: (config, options) => {
config.resolve.alias = {
...config.resolve.alias,
'styled-components': path.resolve(__dirname,'node_modules/styled-components')
};
return config;
},
});
and this is the babelrc on the ui-component module:
"presets": [
[
"#babel/preset-env",
{
"modules": false
}
],
"#babel/preset-react"
]
any suggestions?
Related
Hello everyone I'm using vue 3 with storybook 6.5.16 and when i import the SVGs as a component using svg-inline-loader i get the following error in storybook app:
enter image description here
(Failed to execute 'createElement' on 'Document' svg is not a valid name)
Storybook main.js
const path = require('path');
module.exports = {
stories: [
'../src/**/*.stories.mdx',
'../src/**/*.stories.#(js|jsx|ts|tsx)',
],
addons: [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/addon-interactions',
],
framework: '#storybook/vue3',
core: {
builder: '#storybook/builder-webpack5',
},
webpackFinal: async (config, { configType }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
config.module.rules.push({
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: "sass-loader",
options: {
additionalData: `
#import "#/assets/scss/main.scss";
`,
implementation: require('sass'),
},
},
],
});
(() => {
const ruleSVG = config.module.rules.find(rule => {
if (rule.test) {
const test = rule.test.toString();
const regular = /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
const regularString = regular.toString();
if (test === regularString) {
return rule;
}
}
});
ruleSVG.test = /\.(ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
})();
config.module.rules.push({
test: /\.svg$/,
use: ['svg-inline-loader'],
});
config.resolve.alias['#'] = path.resolve('src');
return config;
},
}
package.json file
enter image description here
SVG Vue components
<template>
<div
ref="icon"
class="v-icon"
#click="onClick"
>
<component
:is="iconName"
class="v-icon__svg"
/>
</div>
</template>
<script>
import Cards from '#/assets/icons/Cards.svg';
export default {
name: 'VIcon',
components: {
Cards,
},
props: {
iconName: {
type: String,
required: true,
},
},
};
</script>
.babelrc file
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
i tried to use vue-svg-loader to replace svg-inline-loader but it didn't work and I got another error while building the app
ModuleBuildError: Module build failed: Error: Cannot find module './Block'
I also tried to use babel-loader in conjunction with vue-svg-loader but unfortunately I also got an error:
enter image description here
has anyone come across this or can you show your use cases of using SVGs components in Storybook and Vue 3?
On
local the active input field is fine but in
production active input field is white.
When using vuetify the text input fields are fine locally but when I push to production the fields go white when active. You can see at https://www.rehop.com.au/post
I am using Nuxt v3. This is waht the plugin file looks.
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives,
theme: { dark: true }
})
nuxtApp.vueApp.use(vuetify)
})
and my nuxt config file
export default {
css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'],
buildModules: [],
modules: ['#nuxtjs/tailwindcss', '#nuxtjs/dotenv'],
target: 'static',
imports: {
autoImport: true
},
build: {
transpile: ['vuetify'],
},
vite: {
define: {
'process.env.DEBUG': false,
},
},
runtimeConfig: {
public: {
SUPABASE_KEY: process.env.SUPABASE_KEY,
SUPABASE_URL: process.env.SUPABASE_URL,
IS_TEST: process.env.IS_TEST,
}
},
};
I tried changing variables in the styles section of the developer tools but was not able to find the cause.
By switching the label variant to solo this was fixed.
I'm trying to set up file system based routing for a Vue 3 application using Vite with the help of vite-plugin-pages.
I created the project using yarn create vite with vue-ts as the options and added the plugin via yarn add vite-plugin-pages --dev, yarn add vue-router.
Following the readme on the github, I have added the following to my vite.config.ts:
import Pages from 'vite-plugin-pages'
export default {
plugins: [
// ...
Pages(),
],
}
However, at the next step, in main.ts:
import { createRouter } from 'vue-router'
import routes from '~pages'
const router = createRouter({
// ...
routes,
})
I cannot seem to import from ~pages. I cannot find the module. vue-router itself is working fine, as I can create a router fine, declaring the routes myself. In a vite template, they seem to be using import routes from 'virtual:generated-pages' instead and I have no idea how either works.
So, the question is, how would I go about generating the dynamic routes and as a whole, set up the usage of vite-plugin-pages?
You can try like this:
import Pages from "vite-plugin-pages"
export default defineConfig({
plugins: [
Pages({
pagesDir: [
{dir: 'src/pages', baseRoute: ''},
],
extensions: ['vue'],
syncIndex: true,
replaceSquareBrackets: true,
extendRoute(route) {
if (route.name === 'about')
route.props = route => ({query: route.query.q})
if (route.name === 'components') {
return {
...route,
beforeEnter: (route) => {
// eslint-disable-next-line no-console
// console.log(route)
},
}
}
},
}),
],
});
Then in main.js
import { createRouter, createWebHistory } from 'vue-router';
import generatedRoutes from 'virtual:generated-pages';
const router = createRouter({
history: createWebHistory(),
routes: generatedRoutes,
});
You can also declare the reference in any of your type declarations.
/// <reference types="vite-plugin-pages/client" />
// tsconfig.json
"compilerOptions": {
...
"types": ["vite-plugin-pages/client"]
}
I am currently coding a small vue component library for company's internal use. However, I faced some difficulties on building and deploy the project. This component library contains several components inside. And it will finally build by vue-cli-service build --target lib. The problem I am facing right now is that I have a component (i.e. called Audio.vue), and it will import a .mp3 file inside the component. The component is look like this
<template>
<audio controls :src="soundSrc" />
</template>
<script>
import { defineComponent } from 'vue';
import sound from './assets/sound.mp3';
export default defineComponent({
name: 'Audio',
props: {},
setup() {
return { soundSrc: sound };
},
});
</script>
<style scoped></style>
However, I use this component by serving (vue-cli-service serve") my project is fine. But if I build this project by running vue-cli-service build --target lib --name project-name-here. And I use this built version as a git submodule of my library in another vue project by importing project-name-here.common built before. The sound.mp3 import from './assets/sound.mp3' could not be found. It seems it is using a relative path of my another vue project (i.e. localhost:8080) instead of the library project
Here is my vue.config.js
const path = require('path');
module.exports = {
css: {
extract: false,
},
lintOnSave: false,
productionSourceMap: false,
configureWebpack: {
resolve: {
alias: {
mediaAsset: path.resolve(__dirname, './src/components/Audio/assets'),
},
},
},
chainWebpack: (config) => {
const imgRule = config.module.rule('images');
imgRule
.use('url-loader')
.loader('url-loader')
.tap((options) => Object.assign(options, { limit: Infinity }));
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.test(/\.svg$/)
.use('svg-url-loader') // npm install --save-dev svg-url-loader
.loader('svg-url-loader');
config.module
.rule('raw')
.test(/\.txt$/)
.use('raw-loader')
.loader('raw-loader');
config.module
.rule('media')
.test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.tap((options) =>
Object.assign(options, {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: 'media/[name].[hash:8].[ext]',
},
},
})
);
},
};
Appreciated for answering this question. Thanks.
I've built a creat-react-app application and deployed it into Netlify (https://festive-booth-3f3a79.netlify.app/) but as you can see, for some reason styles are not being loaded.
I've tried to deploy the app with Vercel, but I've the same problem.
This is my tailwind.config.js
module.exports = {
important: true,
// Active dark mode on class basis
darkMode: "class",
i18n: {
locales: ["en-US"],
defaultLocale: "en-US",
},
purge: {
content: ["./pages/**/*.tsx", "./components/**/*.tsx"],
// These options are passed through directly to PurgeCSS
},
theme: {
extend: {},
},
variants: {
extend: {
backgroundColor: ["checked"],
borderColor: ["checked"],
inset: ["checked"],
zIndex: ["hover", "active"],
},
},
plugins: [],
future: {
purgeLayersByDefault: true,
},
};
Here you can check all the others files I have: https://gitlab.com/lucas.distasi/react-tmdb
Running on my local with yarn start inside the build folder created after yarn run build works perfectly fine. So I'm guessing it's a problem with the Tailwind CSS files when deploying on a remote server.
Ok, the problem was that I was pointing to the wrong folders in the purge object. So, modifying what I had with this:
purge: {
content: ["./src/pages/**/*.{js,jsx,ts,tsx}", "./src/components/**/*.{js,jsx,ts,tsx}"]
// These options are passed through directly to PurgeCSS
}
Makes the page to display properly.
The directory might be different in your project.
Are you importing the "tw-elements.js"?
If dont, use the useEffect() to to "import tw-elements" (in file _app.js):
import { useEffect } from "react";
import Layout from "../components/Layout"
import "../styles/globals.css"
function MyApp({ Component, pageProps }) {
useEffect(() => {
import('tw-elements');
}, []);
return (
<Layout className="scroll-smooth transition-all">
<Component {...pageProps} />
</Layout>
)
}
export default MyApp
Simply add important: true in your tailwind.config.js file and it should work.
module.exports = {
important: true, // Add this in config file
// Rest of the content
};