I am starting a vue 3 component library which uses a component with a dynamic template.
The dynamic template requires the use of vue/dist/vue.esm-bundler.js. The vue 3 component compiles using vite as long as the following alias fpr
"vue" is included in the vite.config.ts file:
export default defineConfig({
plugins: [vue()],
define: {
global: {},
},
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
'vue': 'vue/dist/vue.esm-bundler.js',
'./runtimeConfig': './runtimeConfig.browser',
},
},
});
However, the same component is used in the vitepress documentation for this library and does not compile. I have added the same alias to the vitepress configuration file:
const path = require('path')
module.exports = {
title: '',
description: '',
themeConfig: {
repo: '',
sidebar: [
{
text: 'Introduction',
items: [
{ text: 'What is My Lib?', link: '/' },
],
}, {
text: 'Components',
items: [
{ text: 'B-Markdown', link: '/components/b-markdown/desc' },
],
}
],
},
vite: {
resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler.js'
}
},
}
}
I also tried switching the alias to use
'vue': path.resolve(__dirname, '../../node_modules/vue/dist/vue.esm-bundler.js'),
When compiling the vitepress documentation using either of these vue alias lines, I obtain the following error:
runtime-core.esm-bundler.js:38 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
at <Anonymous content="Test content." imgFolder="" class="toastui-editor-contents" ... >
at <VRuntimeTemplate class="toastui-editor-contents" style= {max-width: '900px', margin: 'auto'} template="<div><p>Test content.</p>\n</div>" >
at <BMarkdown content="Test content." >
at <Basic>
at <DemoContainer>
at <Components/bMarkdown/desc.md>
at <VitePressContent class="vp-doc _components_b-markdown_desc" >
at <VPDoc key=3 >
at <VPContent>
at <Layout>
at <VitePressApp>
Is this a problem with vitepress not registering the alias?
Related
in my Vue3 project I import the components in the router index.js like that:
{
path: settingsStore.startUri,
name: "home",
component: () => import("../views/Home/Home.vue"),
},
My vite.config looks like that:
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import vuetify from "vite-plugin-vuetify";
const path = require("path");
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
vuetify({
autoImport: true,
}),
],
define: {
"process.env": {},
__VUE_I18N_FULL_INSTALL__: true,
__VUE_I18N_LEGACY_API__: false,
__INTLIFY_PROD_DEVTOOLS__: false,
},
resolve: {
alias: {
"#": path.resolve(__dirname, "src"),
},
},
build: {
rollupOptions: {
output: {
entryFileNames: "news-[name].js",
assetFileNames: "news-[name].[ext]",
manualChunks: undefined,
chunkFileNames: "chunks/[name].js",
},
},
},
optimizeDeps: {
include: ["vue", "axios"],
},
});
When I run npm run build it creates a chunk directory with some smaller .js files beeing imported in the index.js but as relativ paths like that:
import("./chunks/Home.js")
But I need to import the files from an url like that:
import("https://example.com/chunks/Home.js")
Does anyone know if thats possible and how can I do that?
I tried a lot, read a lot of documentations but didnt find an answer
I only used Vite with the default settings so far, but now I am trying to migrate an old Vue 2 project to Vue 3 and trying to use Vite instead of webpack.
I have the following vue.config.js (excerpt)
var path = require('path');
module.exports = {
filenameHashing: false,
outputDir: 'src/main/resources/public/clientlibs/vue-dist',
css: {
extract: false,
},
pages: {
'attachments': {
entry: 'src/vue/pages/attachments/main.ts',
chunks: ['chunk-vendors', 'chunk-common', 'attachments'],
},
'base': {
entry: 'src/vue/pages/base/main.ts',
chunks: ['chunk-vendors', 'chunk-common', 'base'],
},
'templates': {
entry: 'src/vue/pages/templates/main.ts',
chunks: ['chunk-vendors', 'chunk-common', 'templates'],
},
},
configureWebpack: {
output: {
libraryExport: 'default',
filename: '[name].js',
chunkFilename: 'chunks/[name].js',
},
resolve: {
alias: {
'#': path.resolve(__dirname, 'src/vue'),
},
},
},
}
Reading the documentation I can use this for the vite.config.js:
import { defineConfig } from 'vite'
export default defineConfig({
build: {
lib: [
{
entry: 'src/vue/pages/attachments/main.ts',
fileName: 'attachments',
},
{
entry: 'src/vue/pages/base/main.ts',
fileName: 'base',
},
{
entry: 'src/vue/pages/templates/main.ts',
fileName: 'templates',
},
]
}
});
But how do I manage to have the chunk-vendors (3rd party plugins) and chunk-common (own shared code) extracted as well with proper tree shaking?
Also relevant how does the rollupOptions look like to have something similar as the configureWebpack section?
I'm having trouble getting storybook to play nice with css modules within my Gatsby project. I'm able to render the button component but it does not add any of my styling. On inspection of the element, I'm only getting undefined undefined from the following code.
button.jsx
import React from "react"
import * as css from "./style.module.css"
const Button = ({ variant = "button", type, value = null }) => {
const baseOfVariant = () => {
if (variant === "input") {
return (
<input
type={type}
value={value}
className={`${css.button} ${css.clear_button}`}
/>
)
}
return (
<button type={type} className={`${css.button} ${css.submit_button}`}>
{value}
</button>
)
}
return baseOfVariant()
}
export default Button
button.stories.jsx
import React from "react"
import Button from "./button"
export default {
title: "Button",
component: Button,
}
export const Template = args => <Button {...args} />
export const ButtonRegular = Template.bind({})
ButtonRegular.args = {
variant: "button",
value: "Click Me",
type: "submit",
}
main.js
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.#(js|jsx|ts|tsx)"],
addons: ["#storybook/addon-links", "#storybook/addon-essentials"],
core: {
builder: "webpack5",
},
}
Storybook stuff in my devDeps
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/polyfill": "^7.12.1",
"#storybook/addon-actions": "^6.4.0-alpha.2",
"#storybook/addon-essentials": "^6.4.0-alpha.2",
"#storybook/addon-links": "^6.4.0-alpha.2",
"#storybook/addon-viewport": "^6.4.0-alpha.2",
"#storybook/builder-webpack5": "^6.4.0-alpha.2",
"#storybook/manager-webpack5": "^6.4.0-alpha.2",
"#storybook/react": "^6.4.0-alpha.2",
"babel-loader": "^8.2.2",
"prettier": "2.2.1",
"resize-observer-polyfill": "^1.5.1"
}
Gatsby needs to import css modules with the following synthax:
import * as css from "./style.module.css"
Where Storybook recognizes only this synthax:
import css from "./style.module.css"
This is due to the fact that Gatsby and Storybook don't use the same import convention. Fortunately, you can configure Storybook css module import mechanism via .storybook/main.js file.
const path = require("path")
module.exports = {
// You will want to change this to wherever your Stories will live
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.#(js|jsx|ts|tsx)"],
addons: ["#storybook/addon-links", "#storybook/addon-essentials"],
core: {
builder: "webpack5",
},
webpackFinal: async config => {
// Prevent webpack from using Storybook CSS rules to process CSS modules
config.module.rules.find(
rule => rule.test.toString() === "/\\.css$/"
).exclude = /\.module\.css$/
// Tell webpack what to do with CSS modules
config.module.rules.push({
test: /\.module\.css$/,
include: path.resolve(__dirname, "../src"),
use: [
{
loader: "style-loader",
options: {
modules: {
namedExport: true,
},
},
},
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
namedExport: true,
},
},
},
],
})
// Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
// use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
config.module.rules[0].use[0].options.plugins.push(
require.resolve("babel-plugin-remove-graphql-queries")
)
return config
},
}
With the above configuration, Storybook now accept this import synthax and button.jsx is correctly styled.
import * as css from "./style.module.css"
If any one is looking for sass/scss related fix
import * as style from "./style.module.scss"
Where Storybook recognizes only this synthax:
your .storybook/main.js file.
const path = require("path");
module.exports = {
stories: ["../src/**/*.stories.{js,mdx}"],
addons: [
"#storybook/addon-docs",
"#storybook/addon-actions",
"#storybook/addon-controls",
"#storybook/addon-a11y",
"#storybook/addon-viewport",
],
// https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324
core: {
builder: "webpack5",
},
webpackFinal: async config => {
// https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/
config.module.rules.push({
test: /\.(js)$/,
use: [
{
loader: require.resolve("babel-loader"),
options: {
presets: [
// use #babel/preset-react for JSX and env (instead of staged presets)
require.resolve("#babel/preset-react"),
require.resolve("#babel/preset-env"),
],
plugins: [
// use #babel/plugin-proposal-class-properties for class arrow functions
require.resolve("#babel/plugin-proposal-class-properties"),
// use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
require.resolve("babel-plugin-remove-graphql-queries"),
// use babel-plugin-react-docgen to ensure PropTables still appear
require.resolve("babel-plugin-react-docgen"),
],
},
},
],
exclude: [/node_modules\/(?!(gatsby)\/)/],
});
config.module.rules.push({
test: /\.s[ac]ss$/i,
oneOf: [
// module.scss files (e.g component styles.module.scss)
// https://webpack.js.org/loaders/style-loader/#modules
{
test: /\.module\.s?css$/,
use: [
// Add exports of a module as style to DOM
{
loader: "style-loader",
options: {
esModule: true,
modules: {
namedExport: true,
},
},
},
// Loads CSS file with resolved imports and returns CSS code
{
loader: "css-loader",
options: {
esModule: true,
modules: {
namedExport: true,
},
},
},
// Loads and compiles a SASS/SCSS file
{
loader: "sass-loader",
// only if you are using additional global variable
options: {
additionalData: "#import 'src/styles/global.scss';",
sassOptions: {
includePaths: ["src/styles"],
},
},
},
],
},
// scss files that are not modules (e.g. custom.scss)
{
use: [
// Add exports of a module as style to DOM
"style-loader",
// Loads CSS file with resolved imports and returns CSS code
"css-loader",
// Loads and compiles a SASS/SCSS file
{
loader: "sass-loader",
// only if you are using additional global variable
options: {
additionalData: "#import 'src/styles/global.scss';",
sassOptions: {
includePaths: ["src/styles"],
},
},
},
],
},
],
});
return config;
},
};
With the above configuration, Storybook now accept this import synthax and button.jsx is correctly styled.
import * as styles from "./style.module.scss"
I'm working on a Nuxt.js Project, I created a Docker image as well to handle everything; I'm also trying to include MDBVue as a CSS library, after reading I understand that in order to use this I have to include it as a plugin and reference it on my nuxt.config.js file;
This is how my file looks:
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'skfe',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress bar color
*/
loading: { color: '#3B8070' },
css: [
{ src: "bootstrap-css-only/css/bootstrap.min.css" },
{ src: "mdbvue/build/css/mdb.css" }
],
/*
** Build configuration
*/
build: {
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}
Now the CSS classes work, but I'm not able to get any autocompletion from VSCode, I have to type in the full class name; is this normal behavior or is there a way to get IntelliSense to work on my Vue files?
This is the normal behaviour:
https://github.com/Microsoft/vscode/issues/27635
Try the plugin:
IntelliSense for CSS class names in HTML
or
HTML CSS Support
Source: https://code.visualstudio.com/docs/languages/css
And of course Vetur a must-have plugin for vue development in vscode.
I'm trying to set up a very basic css configuration for my react project. I'm using webpack and style loaders, like so:
// webpack.config.js
const {resolve} = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const port = process.env.PORT || 3000;
module.exports = {
entry: "./src/js/index.js",
output: {
filename: "bundle.[hash].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}, {
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader, {
loader: "css-loader",
options: {
modules: true,
camelCase: true,
sourceMap: true
}
}, {
loader: "sass-loader",
options: {
sourceMap: true,
precision: 8,
data: "$ENV: " + "PRODUCTION" + ";"
}
}
]
}
]
},
devServer: {
host: 'localhost',
port: port
},
devtool: 'inline-source-map',
plugins: [
new HtmlWebpackPlugin({
template: resolve("public", "index.html"),
favicon: resolve("public", "favicon.ico")
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
My problem is that changes in my css file aren't reflected in the html that my react components return.
So if I have a component like:
import React from 'react'
require('../../styles/style.scss')
const App = () => (<div className="root">
<div id='banner1' className='banner'>
<h1>foo</h1>
<h2>bar</h2>
</div>
</div>)
export default App
... and an scss file like:
#banner1 {
height: 100vh;
background: blue;
width: 100%;
}
h1 {
font-size: 30px;
color: white;
}
... my styles will show up initially, but any changes while the server is still running won't be reflected if I refresh the page. It will only reflect the changes in my stylesheet when I restart the server.
My suspicion is that the mini-css-extract-plugin package is minifying the css and packing it into a bundle that react doesn't see in the development environment whenever it's changed, and it doesn't get rebundled.
If I'm right, my conflict is that this is the ubiquitous way I've read in tutorials to set up your webpack configuration, and there is literally zero mention of this side effect being present in a dev environment. Is there an alternate configuration I should be specifying for a dev environment? Is there something I'm missing?
Try using classname={styles.banner} in case of scss.