How to load ThemeProvide to Styleguidist? - styled-components

I want to integrate my theme from styled-components to styleguidist. According official docs I've created ThemeWrapper and added this into config:
...
const path = require('path');
const styleguideComponents = {
Wrapper: path.join(__dirname, '/srs/styled-components/ThemeWrapper.tsx'),
};
...
module.exports = {
...
styleguideComponents,
...
};
But when I try to build it next error appears:
Module not found: Can't resolve 'rsg-components/Wrapper' in
'/My/User/Folder/Desktop/trello/front-end/node_modules/react-styleguidist/lib/rsg-components/ReactExample'
Probably the path is not correct. What is the right one, and how to change it?

Well, after changing component mask in styleguidist config, it works fine. I thing the problem was with loading default styleguidist page(as mentioned in error message), and after actual component were added, the error doesn't appear anymore.

Related

Metro has encountered an error: while trying to resolve module "idb-keyval' from file

Trying to connect to a database (back4app) in React Native following this doc: https://www.back4app.com/docs/react-native/parse-sdk/react-native-sdk
I was given this error message:
While trying to resolve module idb-keyval from file /Users/chenhana/TestRegistration/node_modules/parse/lib/react-native/IndexedDBStorageController.js, the package /Users/chenhana/TestRegistration/node_modules/idb-keyval/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/chenhana/TestRegistration/node_modules/idb-keyval/dist/compat.cjs. Indeed, none of these files exist:
/Users/chenhana/TestRegistration/node_modules/idb-keyval/dist/compat.cjs(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
/Users/chenhana/TestRegistration/node_modules/idb-keyval/dist/compat.cjs/index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
Tried resetting cache, deleting and reinstalling npm modules, and followed along with the doc (also installed the Parse Javascript SDK) so I'm not too sure why this error keeps coming up. Any help will be appreciated, thank you!
In your metro.conf.js file, put the following code:
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
It might solve the issue
Change your metro.config.js for this:
/**
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* #format
*/
const defaultSourceExts =
require('metro-config/src/defaults/defaults').sourceExts;
module.exports = {
transformer: {
getTransformOptions: () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
sourceExts: process.env.RN_SRC_EXT
? [...process.env.RN_SRC_EXT.split(',').concat(defaultSourceExts), 'cjs'] // <-- cjs added here
: [...defaultSourceExts, 'cjs'], // <-- cjs added here
},
};

nodemon starting `node server.js` TypeError: marked is not a function

I'm creating a blog, using this 'Web Dev Simplified' tutorial:
https://www.youtube.com/watch?v=1NrHkjlWVhM
I've copied the code from git hub https://github.com/WebDevSimplified/Markdown-Blog, installed the node modules and linked it to my mongodb database online.
Node Modules include;
express, mongoose, ejs, --save-dev nodemon, slugify, method-override, dompurify, jsdom.
The database was working and I could save articles, until I added the last part about sanitizing HTML and converting markdown to HTML, this is when the 'TypeError: marked is not a function' comes up, and the save button ceases to work.
Seems a once understood function is now not understood because of a more recent node module dependency, either the dompurify library or jsdom. I'm really out of my depth here! please help!
From Marked Documentation:
https://marked.js.org/#demo
Node JS
import { marked } from 'marked';
// or const { marked } = require('marked');
const html = marked.parse('# Marked in Node.js\n\nRendered by **marked**.');
Your Code:
if (this.markdown) {
this.sanitizedHtml = dompurify.sanitize(marked(this.markdown))
}
try this:
if (this.markdown) {
this.sanitizedHtml = dompurify.sanitize(marked.parse(this.markdown))
}
its work for me
In my case:
const { marked } = require('marked');
instead of
const marked = require('marked')
...
this.sanitizedHTML = dompurify.sanitize(marked.parse(this.markdown))
Per node example documentation at https://marked.js.org/#demo

Couldn't compile opencv4nodejs in Vue + electron application

I am trying to build a face detection application with opencv4nodejs, vue + electron-builder. During the process of application setup I cam across a problem where I get the following error during npm run serve after installing opencv4nodejs.
Failed to compile.
./node_modules/opencv4nodejs/build/Release/opencv4nodejs.node 1:2
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
It would be great if some one can help me with it. Thank you in advance
Update: I have added my view.config.js for reference
module.exports = {
chainWebpack: config => {
config.module;
// add ts files
// .rule('ts')
// .use('ts-loader')
// .loader('ts-loader')
// .tap(options => {
// modify the options...
// return options
// })
}
};
As our friend #Eldar commented adding node-loader to vue.config.js works for me. Thank you
module.exports = {
chainWebpack: config => {
config.module .rule('ts')
.use('ts-loader')
.loader('ts-loader')
.end()
.rule(/\.node$/)
.use('node-loader')
.loader('node-loader')
.end()
}
};
Hope this is useful folks.

Exported object is empty

I'm struggling since 2 days on something that shouldn't block me.
Basically, I'm building a nodeJS app that uses Express.
In my main file (located in my root folder), i'm exporting some variables/consts, for the purpose of the example I replaced them like this :
// ./index.js
const test = 'test'
module.exports = { test }
... some express initialization/routers
I then have another file that I want to use the "test" variable in, so I require my main file :
// ./aaa/bbb/ccc/test.js
const { test } = require('../../../index);
const myRouter = require('express').Router();
myRouter.get('/', function (req, res){
console.log(test) // undefined
})
I don't really know why it would be undefined as I correctly exported it, and "imported" it through my require statement.
I also tried "consoling" the whole object that I should receive, and it's empty : {}
EDIT : my "main" script that i'm executing is indeed index.js, but I highly doubt it's the reason of the problem
I can't really find out what could be the problem, and I need to export some variable to access them in my project
Thanks!
I think you did it right. The problem may be that es6 features are not acceptable on your node version. Try it like: module.exports = { test:test }.

videojs with brightcove giving error using require.ensure in React component

I'm trying to use require.ensure in my react component:
componentDidMount() {
require.ensure([], () => {
require('public/jscripts/brightcove/index.js');
});
}
but keep getting an error: Cannot set property 'default' of undefined
It happens at this point in the brightcove videojs script:
// At this point, `window.videojs` will be the earliest-defined copy of this
// version of videojs.
var videojs = window.videojs;
// https://github.com/videojs/video.js/issues/2698
videojs['default'] = videojs;
Does anyone know why this might be happening?
The full script is here btw, I saved it as a local file hence the path public/jscripts/brightcove/index.js: https://players.brightcove.net/1752604059001/B1xXFuBodW_default/index.js

Resources