I'm building an UI Library based on rollup.
An error occurred and I have no idea how to solve it.
TypeError: Cannot read properties of undefined (reading 'scoped')
at transformStyle (C:\my-kit\node_modules\#vitejs\plugin-vue\dist\index.js:4597:19)
at Object.transform (C:\my-kit\node_modules\#vitejs\plugin-vue\dist\index.js:4747:18)
at C:\my-kit\node_modules\rollup\dist\shared\rollup.js:22870:37 {
code: 'PLUGIN_ERROR',
plugin: 'commonjs--resolver',
hook: 'resolveId',
id: 'C:\\my-kit\\packages\\my-ui\\icon\\select-icon-svg.vue?vue&type=style&index=0&scoped=true&lang.less',
it looks like something wrong with parsing vue.
const block = descriptor.styles[index];
the value of block is undefined, error occurred when accessing the scoped property of block.
this is my rollup config. Hope there's someone who can help me.
import { rollup } from "rollup";
import { nodeResolve } from "#rollup/plugin-node-resolve";
import fastGlob from "fast-glob";
import vue from "#vitejs/plugin-vue";
import vueJsx from "#vitejs/plugin-vue-jsx";
import css from "rollup-plugin-css-only";
import commonjs from "#rollup/plugin-commonjs";
import esbuild from "rollup-plugin-esbuild";
import postcss from "rollup-plugin-postcss";
import postcssImport from "postcss-import";
import { babel, getBabelOutputPlugin } from "#rollup/plugin-babel";
import defineOptions from "unplugin-vue-define-options/rollup";
import { UI_PATH } from "./path";
import { resolve } from "path";
import pkgJson from "../packages/my-ui/package.json";
export const buildEsm = async () => {
const input = await fastGlob("**/*.{js,ts,jsx,tsx,vue}", {
cwd: UI_PATH,
absolute: true,
onlyFiles: true,
ignore: ["node_modules"],
});
try {
const bundle = await rollup({
input,
plugins: [
css(),
postcss({
extensions: [".css", ".less", ".scss"],
modules: true,
extract: true,
use: {
sass: null,
stylus: null,
less: { javascriptEnabled: true },
},
plugins: [postcssImport()],
}),
defineOptions(),
vue({
isProduction: false,
}),
vueJsx(),
nodeResolve({
extensions: [".js", ".json", ".ts", ".jsx", ".tsx", ".vue"],
}),
commonjs(),
esbuild({
sourceMap: true,
target: "es2018",
loaders: {
".vue": "ts",
},
}),
getBabelOutputPlugin({
configFile: resolve(__dirname, "../babel.config.js"),
}),
babel({
exclude: "node_modules/**",
extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
babelHelpers: "bundled",
}),
],
external: Object.keys(pkgJson.peerDependencies),
});
// write the bundle to disk
await bundle.write({
format: "esm",
dir: resolve(UI_PATH, "es"),
});
} catch (err) {
console.error(err);
}
};
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
dev dependencies
{
"vue": "^3.2.45",
"vite": "^4.0.3",
"sass": "^1.57.1",
"postcss": "^8.4.19",
"tailwindcss": "^3.2.4",
}
Vite.config.ts
import { defineConfig, type PluginOption } from 'vite'
import vue from '#vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'
import { visualizer } from 'rollup-plugin-visualizer'
import type { UserConfig as VitestUserConfigInterface } from "vitest/config"
import dts from 'vite-plugin-dts'
import { resolve } from 'path'
const vitestConfig: VitestUserConfigInterface = {
test: {
globals: true,
environment: "jsdom",
},
}
export default defineConfig({
build: {
target: ['edge90', 'chrome90', 'firefox90', 'safari15'],
outDir: './dist',
lib: {
formats: ['es', 'cjs'],
entry: resolve(__dirname, './src/components/index.ts'),
name: 'Vuesty',
fileName: 'index',
},
rollupOptions: {
external: ['vue'],
output: { globals: { vue: 'Vue' } },
},
},
test: vitestConfig.test,
plugins: [vue(), eslintPlugin(),
dts({
beforeWriteFile: (filePath, content) => {
const newFilePath = filePath
.replace('/src', '/global');
return {
filePath: newFilePath,
content,
};
},
skipDiagnostics: true,
}),
visualizer({
emitFile: true
}) as PluginOption
],
})
avatar.scss
.v-avatar__status-circle_large{
#apply !w-2.5 ;
}
Avatar.vue
<style lang="scss">
#import "src/assets/themes/main/components/avatar.scss";
</style>
If i use global styles, not importing it directly into component then it works fine, but i need it exactly in the component
If the code is:
.v-avatar__status-circle_large{
#apply !w-2.5 ;
}
Then error is: [vite] Internal server error: [sass] expected ";".
And if the code is:
.v-avatar__status-circle_large{
#apply w-2.5 #{!important};
}
Error:[vite] Internal server error The important class does not exist. If important is a custom class, make sure it is defined within a #layer directive.
Simple webpack setup, when I use import to load my scss it is completely missing from the bundle. The line where the import should be is simply missing. When I use require instead, it works.
optimization: {usedExports: true} is not the problem, I tried with and without
mini-css-extract-plugin also did not work.
when I put a typo in the scss it complains, so it is parsed but simply not bundled in the end?
index.js
require("./scss/style.scss");
//import "./scss/style.scss" <--- not working
import { createApp } from 'vue';
import App from './components/App.vue';
const el = document.getElementById('app');
createApp(App).mount(el);
webpack config
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const { DefinePlugin } = require('webpack');
const dist = path.resolve(__dirname, "dist");
module.exports = env => {
const mode = env.production == true ? "production" : "development";
const devtool = mode == "production" ? false : "inline-source-map";
return {
mode: mode,
entry: './web/index.js',
output: {
filename: 'bundle.js',
path: dist
},
optimization: {
usedExports: true,
},
devServer: {
static: {
directory: dist
},
port: 8888
},
module: {
rules: [{
test: /\.(sa|sc|c)ss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
}, {
test: /\.(ttf|eot|woff|woff2|svg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
},
},
}, {
test: /\.vue$/,
loader: 'vue-loader'
}]
},
plugins: [
new CleanWebpackPlugin(),
new DefinePlugin({
__VUE_OPTIONS_API__: false,
__VUE_PROD_DEVTOOLS__: false,
}),
new HtmlWebpackPlugin({
template: path.resolve("./web/index.html")
}),
new VueLoaderPlugin()
],
resolve: {
extensions: ['.js'],
alias: {
"#": path.resolve(__dirname, 'web')
}
},
devtool
};
};
I found the problem but I don't understand why webpack drops it.
Quote from https://webpack.js.org/guides/tree-shaking/
Note that any imported file is subject to tree shaking. This means if you use something like css-loader in your project and import a CSS file, it needs to be added to the side effect list so it will not be unintentionally dropped in production mode:
In my package.json I put
"sideEffects": false,
to be able to use treeshaking.
But I had to disable it in the loader rule
{
test: /\.(sa|sc|c)ss$/,
use: ['style-loader','css-loader','sass-loader'],
sideEffects: true <----
}
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 have been trying to get a working wallaby.js configuration file for my meteor project and simply can't get it to work. I've borrowed from https://github.com/xolvio/automated-testing-best-practices and I have this currently:
const babel = require('babel-core')
const path = require('path')
const wallabyWebpack = require('wallaby-webpack')
module.exports = function (wallaby) {
const webpackConfig = {
resolve: {
root: path.join(wallaby.projectCacheDir, 'imports'),
extensions: ['', '.js', '.jsx', '.json']
},
module: {
loaders: [
// JavaScript is handled by the Wallaby Babel compiler
{ test: /\.json$/, loader: 'json-loader' }
]
}
}
const wallabyPostprocessor = wallabyWebpack(webpackConfig)
const appManifest = require(path.resolve('../.meteor/local/build/programs/web.browser/program.json')).manifest;
const meteorPackageFiles = appManifest
.filter(function (file) {
return file.type === 'js' && file.path.startsWith('packages/')
})
.map(function (file) {
/* var basePath = packageStubs.indexOf(file.path) !== -1 ?
'tests/client/stubs' :
'src/.meteor/local/build/programs/web.browser';
*/
var basePath = '../.meteor/local/build/programs/web.browser'
return { pattern: path.join(basePath, file.path) }
})
return {
files: [
{ pattern: '**/*.test.*', ignore: true },
'startup/**/*.jsx',
'startup/**/*.js'
].concat(meteorPackageFiles),
tests: [
'**/*.test.*'
],
compilers: {
'**/*.js*': wallaby.compilers.babel({
babel,
presets: ['react', 'es2015', 'stage-2']
})
},
env: {
type: 'node'
},
testFramework: 'mocha'
}
}
This code successfully loads the startup files for the client-side, and the tests, but this simple test:
import should from 'should'
import buildRegExp from './buildregexp.js'
describe('buildRegExp', function() {
it('splits on word characters', function() {
buildRegExp('test this-thing:out').should.equal('(?=.*test)(?=.*this)(?=.*thing)(?=.*out).+')
})
})
fails on line 1, because the npm module "should" is not found.
Does anyone have a working wallaby config or should I just give up?
meteor test --driver-package=practicalmeteor:mocha works, so the error is in the wallaby config.