I have a project which I am breaking into multiple workspaces using npm7.
I am using sass in vue components in a package (another workspace), and importing that package into my current workspace.
When I use sass in the workspace in which storybook is running, it compiles fine.
When I use css in the other workspace it compiles fine.
When I use sass in another workspace, it doesn't find the loaders.
ModuleParseError: Module parse failed: Unexpected character '#' (39:0)
File was processed with these loaders:
* ../node_modules/vue-docgen-loader/lib/index.js
* ../node_modules/vue-docgen-loader/lib/index.js
* ../node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> #import '../../../bootstrap4/scss/functions';
| #import '../../../bootstrap4/scss/variables';
|
at handleParseError (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/webpack/lib/NormalModule.js:469:19)
at /srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/webpack/lib/NormalModule.js:503:5
at /srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/webpack/lib/NormalModule.js:358:12
at /srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at context.callback (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.module.exports (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/vue-docgen-loader/lib/index.js:28:5)
at LOADER_EXECUTION (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
at runSyncOrAsync (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
at iterateNormalLoaders (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at iterateNormalLoaders (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at context.callback (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.module.exports (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/vue-docgen-loader/lib/index.js:28:5)
My main.js works for local sass. It is as follows:
const path = require('path');
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials"
],
"webpackFinal": async (config, { configType }) => {
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
// Return the altered config
return config;
},
}
Is it possible to use storybook with npm workspaces?
I am using storybook 6.2.8.
I am using vue.js 2.6.12
On further investigation, I found the error is in the line:
include: path.resolve(__dirname, '../'),
I removed this line and it worked fine. Clearly it is limiting the rule to the current workspace instead of all workspaces.
Related
I am using fullcalendar with vue3. I want to change change colors for button and text in fullcalendar.
vue version
"vue": "^3.2.26",
I am getting error
Syntax Error: Error: PostCSS plugin postcss-custom-properties requires
PostCSS 8.
I am following steps mentioned in fullcalendar documentation.
fullcalendar-vars.css
:root {
--fc-border-color: green;
--fc-button-text-color: #ff0000;
}
I have installed following packages
"postcss": "^8.4.7",
"postcss-calc": "^8.2.4",
"postcss-custom-properties": "^12.1.4",
"postcss-loader": "^6.2.1",
Added postcss.config.js at root
module.exports = {
plugins: [
require('postcss-custom-properties')({
preserve: false, // completely reduce all css vars
importFrom: [
'client/fullcalendar-vars.css' // look here for the new values
]
}),
require('postcss-calc')
]
}
And my vue.config.js as follow
const path = require("path");
module.exports = {
pages: {
index: {
entry: "./client/main.js",
},
},
outputDir: path.resolve(__dirname, "./client/dist"),
};
Also I would like to know, Do I need make any changes in vue.config.js?
PostCSS error
Vue CLI scaffolded projects already include PostCSS (including postcss, postcss-calc, and postcss-loader), so you don't need to install it in your project. The only dependency needed here is postcss-custom-properties.
To resolve the PostCSS error, you should uninstall the PostCSS dependencies that you had mistakenly added:
npm uninstall --save-dev postcss postcss-calc postcss-loader
Starting from scratch
To setup custom colors for FullCalendar in a Vue CLI scaffolded project:
Install postcss-custom-properties with:
npm install --save-dev postcss-custom-properties
Create postcss.config.js with the following PostCSS configuration:
// <projectRoot>/postcss.config.js
module.exports = {
plugins: [
require("postcss-custom-properties")({
preserve: false,
importFrom: [
"client/fullcalendar-vars.css",
],
}),
require("postcss-calc"),
],
}
Create fullcalendar-vars.css with the following CSS:
/* <projectRoot>/client/fullcalendar-vars.css */
:root {
--fc-border-color: green;
--fc-button-text-color: #ff0000;
}
Note: Changes to this file are not hot-reloaded, so the dev server must be restarted to reflect any updates.
Start the Vue CLI dev server with:
npm run serve
demo
I want to embed a react-native-web application into an existing website and am currently looking for options how to do so.
The application should be a quite simple questionnaire which needs to be embedded into a website created with Elementor. My idea was to use the Elementor HTML widget and insert my application somehow, but unfortunately I cannot figure out how to do this.
I've got a bit of experience developing React Native(RN) apps but I am pretty new to web development and therefore thought it would be easier for me to go with RN and the react-native-web library.
So far, I've created a RN project using npx react-native init WebApp, copied the App.js, index.js and package.json files from react-native-web CodeSandbox template, deleted the node_modules folders and ran npm install. Then I was able to start and build this example web app with the scripts from the package.json.
Now my question, how can I use the output from the build directory and embed it into an html tag?
I also tried to use webpack with the configuration from the react-native-web docs to bundle the app but I always got a new error as soon as I fixed the last one. Is it possible to bundle a RN app into a single JS file which I could then insert into the website?
Looking forward to any advice!
Marco
I solved it by using the below webpack config. The created bundle.web.js' content is put into a script tag (<script>...</script>). This can be embedded into the HTML widget.
// web/webpack.config.js
const path = require('path');
const webpack = require('webpack');
const appDirectory = path.resolve(__dirname, '');
// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
test: /\.js$/,
// Add every directory that needs to be compiled by Babel during the build.
include: [
path.resolve(appDirectory, 'index.web.js'),
path.resolve(appDirectory, 'src'),
path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
],
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
// The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
presets: ['module:metro-react-native-babel-preset'],
// Re-write paths to import only the modules needed by the app
plugins: ['react-native-web'],
},
},
};
// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
},
},
};
module.exports = {
entry: [
// load any web API polyfills
// path.resolve(appDirectory, 'polyfills-web.js'),
// your web-specific entry file
path.resolve(appDirectory, 'src/index.js'),
],
// configures where the build ends up
output: {
filename: 'bundle.web.js',
path: path.resolve(appDirectory, 'dist'),
},
// ...the rest of your config
module: {
rules: [babelLoaderConfiguration, imageLoaderConfiguration],
},
resolve: {
// This will only alias the exact import "react-native"
alias: {
'react-native$': 'react-native-web',
},
// If you're working on a multi-platform React Native app, web-specific
// module implementations should be written in files using the extension
// `.web.js`.
extensions: ['.web.js', '.js'],
},
};
I'm generating documentation for a VueJS component using vue-styleguidist.
This normally works just fine, but in this case I get an error:
./node_modules/vue-awesome/components/Icon.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
<template>
<svg version="1.1"
:class="klass"
Learn how to add webpack loaders to your style guide:
https://github.com/vue-styleguidist/vue-styleguidist/blob/master/docs/Webpack.md
My config file for vue-styleguidist (styleguide.config.js) includes the default rules for loading webpack files:
const loaders = require('vue-webpack-loaders');
module.exports = {
...
webpackConfig: {
module: {
loaders,
},
...
},
...
};
Other .vue files are loaded correctly, but not Icon.vue.
The problem is that the default webpack loading rule provided by vue-webpack-loaders specifically excludes mode_modules directory, but the npm module contains that Vue file Icon.vue.
{
test: /\.vue$/,
exclude: /node_modules/,
loader: 'vue-loader',
options: vueLoaderConfig
},
The solution is to add an extra rule to the default rules to specifically load that file under node_modules.
const loaders = require('vue-webpack-loaders');
var vueLoaderConfig = require('vue-webpack-loaders/lib/vue-loader.conf')
loaders.push({
test: /vue-awesome\/components\/Icon\.vue$/, <-- path to .vue file
loader: 'vue-loader',
options: vueLoaderConfig
})
Id like to read the contents of a text file which i have imported in my .vue file like import ToS from '~/static/terms-of-service.txt';
I want to access the contents as a String.
How can I do it?
VUE CLI 3
First install the raw loader
npm install raw-loader --save-dev
If you don't have a vue.config.js, make one at root and add
module.exports = {
chainWebpack: config => {
config.module
.rule('raw')
.test(/\.txt$/)
.use('raw-loader')
.loader('raw-loader')
.end()
}
}
To get the text file as string (if placed in src/assets/txt/):
import file from '#/assets/txt/file.txt'
N.B. Remember to rebuild
I'm using nuxt (created with vue cli 3), and this is what worked for me:
npm install --save-dev raw-loader
Update nuxt.config.js
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
config.module.rules.push({
enforce: 'pre',
test: /\.txt$/,
loader: 'raw-loader',
exclude: /(node_modules)/
});
}
}
I ended up using https://github.com/webpack-contrib/raw-loader
Seems that you need a loader to read files in vue
Error while running webpack-dev-server
ERROR in ./css/app.scss
Module build failed: Error: Parameter 'dependency' must be a Dependency
at Compilation.process [as _addModuleChain] (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack/lib/Compilation.js:347:9)
at Compilation.process [as addEntry] (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack/lib/Compilation.js:423:7)
at SingleEntryPlugin.<anonymous> (/Users/roshankarki/Desktop/del_del/wp_tst/node_modules/webpack/lib/SingleEntryPlugin.js:22:15)
at Compiler.applyPluginsParallel (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack/node_modules/tapable/lib/Tapable.js:107:14)
at Compiler.compile (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack/lib/Compiler.js:394:7)
at Compiler.runAsChild (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack/lib/Compiler.js:203:7)
at Object.module.exports.pitch (/Users/roshankarki/Desktop/del_del/wp_tst/node_modules/extract-text-webpack-plugin/loader.js:81:18)
webpack: bundle is now VALID.
My webpack.config.js looks like this:
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
/* this defins path where entry files are to be found */
context: path.resolve('js'),
entry: ["./utils","./app"],
output: {
/* this is output directory of bundle.js */
path: path.resolve('build/'),
/* this is path of directory where bundle will be served in server */
publicPath: '/public/assets/',
filename: "bundle.js"
},
/* this plugin helps to generate seperate styles.css file rather in once single bundle.js file */
plugins: [
new ExtractTextPlugin("styles.css")
],
/* when server is loaded it tells where to look for index file accessed from root */
devServer: {
contentBase: 'public'
},
module: {
preLoaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "jshint-loader"
}
],
loaders: [
{
test: /\.es6$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
exclude: /node_modules/ ,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.scss$/,
exclude: /node_modules/ ,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
}
]
},
/* this will resolve file in common js style require without extension */
resolve: {
extensions: ['', '.js', '.es6']
},
watch: true
}
Before using this plugin everything was working fine. As i intend to output different bundle for css, i need to fix this issue.
Found issue in github but it did not help:
https://github.com/webpack/extract-text-webpack-plugin/issues/132
well updating node worked for me. I did this by running "brew update" and "brew upgrade" command, as i am using homebrew as a package manage in mac.
Following instruction in the git link provide in my question resulted in error as i was installing webpack and webpack-dev-server globally. I removed it and only had local copy which did the trick at the end.
command to list global copy of node modules installed:
npm list -g --depth=0
I use this command to remove global copy:
npm uninstall -g {replace_with_package_name}
command to check local copy:
npm list --depth=0