MDX support in Storybook using Nx for Angular - javascript

I'm trying to add .MDX support in Nx for Storybook using #storybook/addon-docs package, but doesn't work.
I am keeping in mind the NPM package documentation (https://www.npmjs.com/package/#storybook/addon-docs#preset-options) as Nx documentation is sparse and Storybook documentation confusing.
The Nx version that I'm using is 12.6.5 for Angular and 6.3.7 for Storybook.
This is may main.js config file:
const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
stories: [...rootMain.stories, '../src/lib/**/*.stories.#(js|jsx|ts|tsx|mdx)'],
addons: [...rootMain.addons],
webpackFinal: async (config, { configType }) => {
// apply any global webpack configs that might have been specified in .storybook/main.js
if (rootMain.webpackFinal) {
config = await rootMain.webpackFinal(config, { configType });
}
// add your own webpack tweaks if needed
config.module.rules.push({
test: /\.(stories|story)\.mdx$/,
use: [
{
loader: 'babel-loader',
},
{ loader: '#mdx-js/loader' },
],
});
config.module.rules.push({
test: /\.(stories|story)\.[tj]sx?$/,
loader: require.resolve('#storybook/source-loader'),
exclude: [/node_modules/],
enforce: 'pre',
});
return config;
},
};
And also this is my preview.js config file:
import '#angular/localize/init';
import { DocsContainer, DocsPage } from '#storybook/addon-docs';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
docs: {
container: DocsContainer,
page: DocsPage,
},
};
Anyone has a solution?

Related

external plugins not working with pouchdb with electron-forge i.e PouchDB.plugin("xyz") not attatching the plugin to the PouchDB

PouchDB.plugin("xyz") not attatching the plugin to the PouchDB
Im trying to use pouchdb with electron-forge webpack template.Pouchdb (leveldown adapter i.e native modules) works perfectly[Main process or renderer process].
But i cant use other plugins such as pouchdb-find, pouchdb-quick-search etc. even i try custom plugin i.e
// import PouchDB from "pouchdb-core"
// import PouchDB from "pouchdb-node"
import PouchFind from "pouchdb-find"
PouchDB.default.plugin(PouchFind.default)
// PouchDB.default.plugin(PouchFind)
// PouchDB.default.plugin(require("pouchdb-find").default)
PouchDB.default.plugin({
foo: function(cb) {
console.log("working")
cb("done")
}
})
const db = new PouchDB("kittens")
db.foo().then(console.log).catch(console.error) // returns Uncaught TypeError db.foo is not a function
db.find({
selector: {name: 'Mario'}
}).then(console.log).catch(console.error) // returns Uncaught TypeError db.foo is not a function
Info
**Environment:** Windows 10,64bit (Electron Forge webpack)[https://www.electronforge.io/config/plugins/webpack] npx create-electron-app my-new-app --template=webpack
**Node.js:** v16.15.0
**electronjs:** 19.0.4
**Platform**: Windows 10
**Adapter:** leveldb
**Vuejs:** ^3.2.37
**PouchDB:** 7.3.0
Reproduce
Create an app with electron-forge webpack template i.e
npx create-electron-app my-new-app --template=webpack
then install pouchdb,pouchdb-find, any other pouchdb plugins, try using the plugins
webpack.main.js
// Add support for native node modules
{
// We're specifying native_modules in the test because the asset relocator loader generates a
// "fake" .node file which is really a cjs file.
test: /native_modules\/.+\.node$/,
use: 'node-loader',
},
{
test: /\.(m?js|node)$/,
parser: { amd: false },
use: {
loader: '#vercel/webpack-asset-relocator-loader',
options: {
outputAssetBase: 'native_modules',
},
},
},
// Put your webpack loader rules in this array. This is where you would put
// your ts-loader configuration for instance:
/**
* Typescript Example:
*
* {
* test: /\.tsx?$/,
* exclude: /(node_modules|.webpack)/,
* loaders: [{
* loader: 'ts-loader',
* options: {
* transpileOnly: true
* }
* }]
* }
*/
];
webpack.plugin.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
module.exports = [
new VueLoaderPlugin(),
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false,
}),
new MiniCssExtractPlugin({
filename: "style.css",
}),
];
webpack.renderer.config.js
const plugins = require("./webpack.plugins");
const { loader } = require("mini-css-extract-plugin");
const path = require("path");
rules.push({
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
process.env.NODE_ENV !== "production" ? "vue-style-loader" : loader,
//{ loader: "style-loader" },
{ loader: "css-loader", options: { importLoaders: 1 } },
"postcss-loader",
],
},
// Images: Copy image files to build folder
{ test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: "asset/resource" },
// Fonts and SVGs: Inline files
{ test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: "asset/inline" },
//{test: /\.js$/, exclude: /node_modules/, use: ['babel-loader']},
{ test: /\.html$/, use: "vue-html-loader" });
module.exports = {
// Put your normal webpack config below here
module: {
noParse: /^(vue|vue-router|pinia)$/,
rules,
},
plugins: plugins,
resolve: {
extensions: [".js",".jsx", ".css", ".vue", ".json"],
alias: {
//vue: "vue/dist/vue.esm-bundler.js",
vue: "#vue/runtime-dom",
"#": path.resolve("src"),
},
},
};

cannot load html from webpack loader in reactjs

I'm very new to reactjs and webpack. I want to load html file to reactjs via using I use html-loader and webpack, but got this error
Failed to compile.
./src/test_ts.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <!DOCTYPE html>
| <html>
| <body>
This is my webpack config
var path = require("path");
var webpack = require("webpack");
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js");
module.exports = {
entry: "./src/header.js",
output: {
path: path.resolve(__dirname, "build"),
filename: "app.bundle.js"
},
module: {
loaders: [
{
test: /\.html$/,
loader: "html"
},
{
test: /\.js$/,
loader: "babel-loader",
query: {
presets: ["es2015", "react"]
}
}
]
},
stats: {
colors: true
},
devtool: "source-map"
};
and this is where I want to load
import React from "react";
import { Button } from "reactstrap";
var htmlContent = require("./test_ts.html");
class Header extends React.Component {
render() {
return <div></div>;
}
}
export default Header;
I try to follow many tutorial but can't resolve this, what may I do wrong?
Add the following rule to your webpack.config file:
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
}
}
Before that install html-loader using command: npm i -D html-loader :

Thumbnail component error in react

I have added the thumbnail component into my project. I got to see the following error in my project after adding it. The error is shown in the following image.
Here's my webpack.config.js file code which might help you on understanding the issue. There's a loader to be specified there. I don't know what's the specified loader for this. Anyone faced the same issue?
Any help regarding this issue?
**/*webpack.config.js*/**
/* eslint comma-dangle: ["error",
{"functions": "never", "arrays": "only-multiline", "objects":
"only-multiline"} ] */
const webpack = require('webpack');
const pathLib = require('path');
const devBuild = process.env.NODE_ENV !== 'production';
const config = {
entry: [
'es5-shim/es5-shim',
'es5-shim/es5-sham',
'babel-polyfill',
'./app/bundles/HelloWorld/startup/registration',
],
output: {
filename: 'webpack-bundle.js',
path: pathLib.resolve(__dirname, '../app/assets/webpack'),
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
],
module: {
rules: [
{
test: require.resolve('react'),
use: {
loader: 'imports-loader',
options: {
shim: 'es5-shim/es5-shim',
sham: 'es5-shim/es5-sham',
}
},
},
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
},
],
},
};
module.exports = config;
if (devBuild) {
console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
module.exports.devtool = 'eval-source-map';
} else {
console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}
And Here's the code where I called the component:
import React, { Component } from 'react';
import Thumbnail from 'react-native-thumbnail-video';
class VideoThumnail extends Component {
render() {
return(
<div>
<Thumbnail url="https://www.youtube.com/watch?v=lgj3D5-jJ74" />
</div>
);
}
}
export default VideoThumnail;
If you are doing a web application, you cannot use libraries specified for react-native. Thats only for react-native mobile applications.
If you want such mudules for web application i guess you can try something like, react-video-thumbnail

Waypoint npm - Error: Can't resolve 'waypoint

I have a vue project and installed waypoints
npm install waypoints
I try to import it
import waypoint from 'waypoints';
but get an error
Error: Can't resolve 'waypoints' in /Mypath
What am I doing wrong?
var webpack = require('webpack');
var path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
var WebpackNotifierPlugin = require('webpack-notifier');
var fs = require('file-system');
var CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
/*node: {
fs: "empty"
},*/
resolve: {
alias: {
'masonry': 'masonry-layout',
'isotope': 'isotope-layout'
}
},
entry: './main.js',
devtool: 'source-map',
output: {
path: path.resolve(__dirname, './public/assets'),
filename: 'bundle.[chunkhash].js',
},
module: {
rules: [
{ test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader?presets[]=es2015",
},
{
test:/\.scss$/,
use: ExtractTextPlugin.extract({
use: [{loader:'css-loader?sourceMap'}, {loader:'sass-loader', options: {
sourceMap: true,
}}],
})
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
]
},
plugins: [
new CleanWebpackPlugin(['assets/*', 'css/*'], {
root: '/Users/LEITH/sites/laravelleith/public',
verbose: true,
dry: false,
exclude: ['360lockturret.jpg'],
watch: true
}),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('app.[chunkhash].css'),
new WebpackNotifierPlugin(),
function() {
this.plugin('done', stats =>{
fs.writeFileSync(
path.join(__dirname, 'manifest.json'),
JSON.stringify(stats.toJson().assetsByChunkName)
)
});
}
]
};
Waypoints comes bundled in several flavours, even via NPM, but I couldn't work out if there's a default implementation or not. So that's why your typical import Waypoint from 'waypoints' directive doesn't work.
I resolved this for my "vanilla ES6 + Webpack" setup as follows:
import 'waypoints/lib/noframework.waypoints.min.js';
const waypoint = new Waypoint({
element: document.getElementById('myScrollTarget'),
handler: () => {}
});
Basically #markedup is right, waypoints comes with various flavours, after installing waypoints if you look into /waypoints/lib/ folder you will see zepto|jquery|noframework.waypoints.js .
In this case you would require to import it as full path i.e.
import 'waypoints/lib/noframework.waypoints.min.js';
or
window.waypoint = require('waypoints/lib/noframework.waypoints');

ERROR from UglifyJs: SyntaxError: Unexpected token: operator (>)

I'm getting an error when trying to run my webpack for production.
ERROR in js/main.21dbce548a76ffc14cfb.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [./~/tmi.js/lib/utils.js:3,0][js/main.21dbce548a76ffc14cfb.js:3529,20]
utils.js:3,0 (which is the same as in my minified js) is:
// Return the second value if the first value is undefined..
get: (obj1, obj2) => { return typeof obj1 === "undefined" ? obj2 : obj1; },
So I assume from that the error is thrown because it's reading ES6 but it doesn't understand ES6? (The arrow function)
I don't see what's going wrong here, this is my webpack.config.js
// changed some loader syntax after reading
// https://webpack.js.org/how-to/upgrade-from-webpack-1/
const path = require(`path`);
const webpack = require(`webpack`);
const {UglifyJsPlugin} = webpack.optimize;
const CopyWebpackPlugin = require(`copy-webpack-plugin`);
const ExtractTextWebpackPlugin = require(`extract-text-webpack-plugin`);
const configHtmls = require(`webpack-config-htmls`)();
const extractCSS = new ExtractTextWebpackPlugin(`css/style.css`);
// change for production build on different server path
const publicPath = `/`;
// hard copy assets folder for:
// - srcset images (not loaded through html-loader )
// - json files (through fetch)
// - fonts via WebFontLoader
const copy = new CopyWebpackPlugin([{
from: `./src/assets`,
to: `assets`
}], {
ignore: [ `.DS_Store` ]
});
const config = {
entry: [
`./src/css/style.css`,
`./src/js/script.js`
],
resolve: {
// import files without extension import ... from './Test'
extensions: [`.js`, `.jsx`, `.css`]
},
output: {
path: path.join(__dirname, `server`, `public`),
filename: `js/[name].[hash].js`,
publicPath
},
devtool: `sourcemap`,
module: {
rules: [
{
test: /\.css$/,
loader: extractCSS.extract([
{
loader: `css`,
options: {
importLoaders: 1
}
},
{
loader: `postcss`
}
])
},
{
test: /\.html$/,
loader: `html`,
options: {
attrs: [
`audio:src`,
`img:src`,
`video:src`,
`source:srcset`
] // read src from video, img & audio tag
}
},
{
test: /\.(jsx?)$/,
exclude: /node_modules/,
use: [
{
loader: `babel`
},
{
loader: `eslint`,
options: {
fix: true
}
}
]
},
{
test: /\.(svg|png|jpe?g|gif|webp)$/,
loader: `url`,
options: {
limit: 1000, // inline if < 1 kb
context: `./src`,
name: `[path][name].[ext]`
}
},
{
test: /\.(mp3|mp4)$/,
loader: `file`,
options: {
context: `./src`,
name: `[path][name].[ext]`
}
}
]
},
plugins: [
extractCSS,
copy
]
};
if(process.env.NODE_ENV === `production`){
//image optimizing
config.module.rules.push({
test: /\.(svg|png|jpe?g|gif)$/,
loader: `image-webpack`,
enforce: `pre`
});
config.plugins = [
...config.plugins,
new UglifyJsPlugin({
sourceMap: true, // false returns errors.. -p + plugin conflict
comments: false
})
];
}
config.plugins = [...config.plugins, ...configHtmls.plugins];
module.exports = config;
OP's error is from UglifyJs, as is solved in the accepted answer, some people to this page may get the error from babel, in which case, fix it with: add "presets": ["es2015"] either to the options.presets section of babel-loader, or to .babelrc.
UglifyJs2 has a Harmony branch which accepts ES6 syntax to be minified. At this moment, you need to create a fork of webpack and point webpack to that fork.
I recently answered a couple of similar questions. Please have a look at #38387544 or #39064441 for detailed instructions.
In my case I was using webpack version 1.14
I got help from git ref
steps:
install yarn add uglifyes-webpack-plugin (and removed yarn remove uglifyjs-webpack-plugin)
then install yarn add uglify-js-es6
In webpack.config.js file change new webpack.optimize.UglifyJsPlugin to
new UglifyJsPlugin
then I was able to build. Thanks

Categories

Resources