We Keep Coding

webpack path-browserify polyfill failing

I'm migrating a mono-repo app from react-scripts v4 to react-scripts v5. The app uses npm workspaces and has a structure as below
AppName
|_ julia_project_files
|_node_modules (one)
|_ react_app
|_node_modules (two)
|_src
|_package.json(two)
|_ config_overides.js
|_package.json (one)
The app leverages multiple node.js libraries which break with webpack 5 (no inbuilt node.js polyfill support) and I had errors similar to this. I leveraged this solution to fix all errors except one
Module not found: Error: You attempted to import /Computer/AppName/node_modules/path-browserify/index.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
I don't see where I'm going wrong?
files
config-overrides.js
const webpack = require('webpack');
module.exports = function override(config, env) {
config.resolve.fallback = {
url: require.resolve('url'),
crypto: require.resolve('crypto-browserify'),
path: require.resolve("path-browserify"),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
buffer: require.resolve('buffer'),
stream: require.resolve('stream-browserify'),
};
config.plugins.push(
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer'],
}),
);
return config;
}
package.json (one)
{
...some stuff,
"private": true,
"version": "1.0.0",
"main": "index.js",
"workspaces": [
"react-app",
"packages/*"
],
"scripts": {
"start-server": "julia --threads=auto --project=../julia-api -e",
"start-client": "cd react-app && npm run start-web",
"lint-fix-client": "cd react-app && npm run lint-fix",
"prepare": "husky install"
},
"devDependencies": {
"#types/jest": "^26.0.21",
"husky": "^7.0.4"
},
"dependencies": {
"path-browserify": "^1.0.1"
}
}
package.json (two)
{
"dependencies": {
... alot of non-related dependencies
"https-browserify": "^1.0.0",
// "path-browserify": "^1.0.1", I've tried installing it here too
"react": "^17.0.2",
"react-app-rewired": "^2.2.1",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^17.0.2",
"react-json-tree": "^0.15.0",
"react-scripts": "5.0.0",
"stream-browserify": "^3.0.0",
},
"scripts": {
"build": "SKIP_PREFLIGHT_CHECK=true react-app-rewired --max_old_space_size=4096 build",
"start": "SKIP_PREFLIGHT_CHECK=true react-app-rewired --max_old_space_size=4096 start",
"lint": "eslint src",
"lint-fix": "prettier --write './src/**/*.{js,jsx,css,json}' --config ./.prettierrc && eslint --fix src"
},
"eslintConfig": {
"extends": "react-app",
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
"last 1 chrome version"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://127.0.0.1:8080",
"devDependencies": {
... many dev dependencies
}
}
I've played around with where I install path-browserify be it package.json(one) or (two) and the error persists.

I found this post to be really helpful: https://namespaceit.com/blog/how-fix-breaking-change-webpack-5-used-to-include-polyfills-for-nodejs-core-modules-by-default-error.
I need polyfills for my project, so I tested solutions one and three and both worked. I wasn't able to get the fallback solution to work that I had seen in other posts, but finally found this.
We had two other packages that caused this error (besides path-browserify), and I was able to employ the same steps from solution three in the post above to get them working as well.

Configure imports relative to root directory in create-react-library library

I am trying to setup a react component library with create-react-library (which uses rollup under the hood) and port over our application's existing component library so that we can share it between applications. I am able to create the library, publish to a private git registry, and consume it in other applications. The issue is that I have had to change all of my imports to relative imports which is rather annoying as I am planning on porting over a large amount of components, hocs and utils.
The entry point of the package is the src dir. Say I have a component in src/components/Text.js and a hoc in src/hoc/auth.js. If I want to import withAuthentication from src/hoc/auth.js into my Text component, I have to import it like import { withAuthentication } from "../hoc/auth" but I'd like to be able to import with the same paths I have in my existing application so it's easy to port over components, like import { withAuthentication } from "hoc/auth"
I have tried a lot of config options, jsconfig.json the same as my create-react-app application, manually building my library with rollup rather then using create-react-library so I'd have more config options but to no avail.
Below are the relevant bits from my package.json as well as my jsconfig.json, any help would be greatly appreciated, I am sure I am not the only person who's had this issue.
Here's the package.json
{
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.js",
"files": [
"dist"
],
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepare": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build"
},
"peerDependencies": {
"react": "^16.0.0",
"react-html-parser": "^2.0.2",
"lodash": "^4.17.19",
"#material-ui/core": "^4.11.0",
"react-redux": "^7.1.1",
"redux": "^4.0.1",
"redux-localstorage": "^0.4.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"react-router-dom": "^5.1.1",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.1",
"react-svg": "^12.0.0",
"reselect": "^4.0.0"
},
"devDependencies": {
"microbundle-crl": "^0.13.10",
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4"
},
"dependencies": {
"node-sass": "^7.0.0"
}
}
and here's the jsconfig:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}

The example from the following link maybe you should navigate to your src file from the BaseUrl, or if you "src" is in the same directory as your config it should be only "."
https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
Example from link above:
{
"compilerOptions": {
"baseUrl": ".", // This must be specified if "paths" is.
"paths": {
"jquery": ["node_modules/jquery/dist/jquery"] // This mapping is relative to "baseUrl"
}
}
}

You need to do 3 things
tsconfig.json this enables typescript autocomplete
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"src/*": ["./src/*"],
"src": ["./src"]
}
}
}
babel.config.js this plugin resolves relative modules
module.exports = {
plugins: [
[
'module-resolver',
{
alias: {
src: './src'
}
}
]
]
}
package.json // install babel-plugin-module-resolver
{
//...
"devDependencies": {
//...
"babel-plugin-module-resolver": "^3.2.0",
// ...
}
}

Webpack breaking changes for builtin modules on Gatsby site

I've tried deploying my Gatsby site to Netlify, but I keep getting these errors for various node modules whenever I try to deploy. I've tried making a webpack.config.js file and including both of the suggested solutions to no avail. I've also tried using alias instead of fallback, adding a browser section to the package.json file which sets the modules to false, and adding a target property in the webpack.config.js file as some other stackoverflow answers have suggested, but I'm still pretty stuck. I don't have any prior experience to webpack and have been doing my best to look for answers. Is there some sort of special configuration for this with Gatsby that I'm missing?
Error message
10:37:20 AM: error Generating JavaScript bundles failed
10:37:20 AM: Can't resolve 'stream' in '/opt/build/repo/node_modules/cipher-base'
10:37:20 AM: If you're trying to use a package make sure that 'stream' is installed. If you're trying to use a local file make sure that the path is correct.
10:37:20 AM: BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
10:37:20 AM: This is no longer the case. Verify if you need this module and configure a polyfill for it.
10:37:20 AM: If you want to include a polyfill, you need to:
10:37:20 AM: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
10:37:20 AM: - install 'stream-browserify'
10:37:20 AM: If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
webpack.config.js
module.exports = {
target: 'node14.17',
resolve: {
fallback: {
assert: require.resolve("assert/"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
},
},
}
package.json
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"crypto-browserify": "^3.12.0",
"ethers": "^5.4.5",
"gatsby": "^3.11.1",
"gatsby-plugin-gatsby-cloud": "^2.11.0",
"gatsby-plugin-google-fonts": "^1.0.1",
"gatsby-plugin-image": "^1.11.0",
"gatsby-plugin-manifest": "^3.11.0",
"gatsby-plugin-offline": "^4.11.0",
"gatsby-plugin-react-helmet": "^4.11.0",
"gatsby-plugin-sharp": "^3.11.0",
"gatsby-source-filesystem": "^3.11.0",
"gatsby-transformer-sharp": "^3.11.0",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"web3": "^1.5.2"
},
"devDependencies": {
"prettier": "2.3.2"
},
"browser": {
"assert": false,
"crypto": false,
"http": false,
"https": false
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}

In Gatsby, you can't define the webpack configuration like you did because Gatsby ships its own webpack.config.js as you can read in Gatsby's glossary.
However, Gatsby allows you to add a custom webpack configuration by exposing onCreateWebpackConfig method in your gatsby-node.js file.
So:
module.exports = {
target: 'node14.17',
resolve: {
fallback: {
assert: require.resolve("assert/"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
},
},
}
Should become:
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
fallback: {
assert: require.resolve("assert/"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
},
},
})
}
As I said, onCreateWebpackConfig is a method exposed only in the gatsby-node.js file so that snippet must be placed there.

How can I stop my React Native tests bombing out on Flow types in Node Modules?

I am trying to set up testing on an existing React Native project. When I run a test with Jest, the test bombs out with the following error:
Test suite failed to run
...etc/__app__/node_modules/react-native/Libraries/polyfills/error-guard.js:14
type ErrorHandler = (error: mixed, isFatal: boolean) => void;
^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/#jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/#jest/transform/build/ScriptTransformer.js:579:25)
at Object.<anonymous> (node_modules/react-native/jest/setup.js:16:6)
The unexpected identifier is the following:
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* #format
* #flow strict
* #polyfill
*/
let _inGuard = 0;
type ErrorHandler = (error: mixed, isFatal: boolean) => void;
I surmised the issue is related to the separation of the React and Flow presets.
The code in node_modules, has Flowtype syntax in it. My Babel configuration applies to my own code, but not to files in node_modules.
My babel.config.js:
presets: ['module:metro-react-native-babel-preset', "#babel/preset-flow", "#babel/plugin-transform-flow-strip-types"],
};
My Jest package.json:
"jest": {
"verbose": true,
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!react-native|#tableflip/react-native-navbar)",
"/node_modules/(?!#babel/runtime)",
"node_modules/(?!(react-native|__app__|react-native-button)/)",
"/node_modules/(?!react-native)/.+"
],
"setupFilesAfterEnv": [
"<rootDir>/node_modules/riteway-jest/src/riteway-jest.js"
]
},
How can I stop my tests bombing out on Flow types in Node Modules?
EDIT: Full package.JSON
{
"name": "ReactNativeTest",
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"start:ios": "react-native run-ios && react-native log-ios",
"start:android": "react-native run-android && react-native log-android",
"start:ios:debug": "react-native run-ios --simulator=\"iPhone X\" & open \"rndebugger://set-debugger-loc?host=localhost&port=8081\"",
"start:android:debug": "react-native run-android & open \"rndebugger://set-debugger-loc?host=localhost&port=8081\"",
"start:debug": "open \"rndebugger://set-debugger-loc?host=localhost&port=8081\"",
"lint": "standard",
"test": "jest"
},
"dependencies": {
"#babel/preset-env": "^7.8.4",
"#babel/runtime": "7.0.0-beta.55",
"#expo/react-native-action-sheet": "3.4.0",
"#react-native-community/async-storage": "1.6.3",
"#react-native-community/netinfo": "4.6.1",
"#react-native-community/viewpager": "3.3.0",
"babel-core": "^7.0.0-bridge.0",
"babel-preset-react-app": "^7.0.0",
"ejson": "2.2.0",
"lodash-es": "4.17.15",
"lodash.isstring": "4.0.1",
"markdown-it": "10.0.0",
"meteor-standalone-random": "1.0.67",
"moment": "2.24.0",
"prop-types": "15.7.2",
"react": "16.12.0",
"react-native": "0.61.5",
"react-native-calendar-events": "1.7.3",
"react-native-config": "0.11.7",
"react-native-dismiss-keyboard": "1.0.0",
"react-native-firebase": "5.6.0",
"react-native-hyperlink": "0.0.16",
"react-native-image-picker": "1.1.0",
"react-native-iphone-x-helper": "1.2.1",
"react-native-joi": "0.0.5",
"react-native-keyboard-aware-scroll-view": "0.9.1",
"react-native-keyboard-spacer": "0.4.1",
"react-native-maps": "0.26.1",
"react-native-onesignal": "3.5.0",
"react-native-scrollable-tab-view": "1.0.0",
"react-native-select-multiple": "2.1.0",
"react-native-side-menu": "1.1.3",
"react-native-swiper": "1.5.14",
"react-native-thumbnail-video": "0.1.2",
"react-native-touch-id": "4.4.1",
"react-native-uploadcare-image": "2.0.0",
"react-native-video": "5.0.2",
"react-native-webview": "7.5.2",
"react-redux": "7.1.3",
"reduce-reducers": "1.0.4",
"redux": "4.0.4",
"redux-devtools-extension": "2.13.8",
"redux-localstorage": "github:tableflip/redux-localstorage#fix-buffer-main-src",
"redux-localstorage-filter": "0.1.1",
"redux-thunk": "2.3.0",
"url": "0.11.0",
"uuid": "3.3.3"
},
"jest": {
"verbose": true,
"preset": "react-native",
"transformIgnorePatterns": [
"<rootDir>/node_modules/(?!#babel/runtime)",
"<rootDir>node_modules/(?!(react-native|__app__|react-native-button)/)",
"/node_modules/(?!react-native)/.+",
"/node_modules/"
],
"setupFilesAfterEnv": [
"<rootDir>/src/riteway-jest.js"
]
},
"devDependencies": {
"#babel/core": "^7.7.4",
"#babel/plugin-transform-flow-strip-types": "^7.8.3",
"#babel/plugin-transform-runtime": "^7.8.3",
"#babel/preset-flow": "^7.8.3",
"babel-eslint": "10.0.3",
"babel-jest": "^24.9.0",
"babel-plugin-import-rename": "1.0.1",
"jest": "24.9.0",
"jetifier": "1.6.4",
"metro-react-native-babel-preset": "0.57.0",
"react-native-config-node": "0.0.2",
"react-test-renderer": "16.12.0",
"redux-mock-store": "1.5.3",
"riteway-jest": "^2.0.2",
"standard": "14.3.1"
},
"standard": {
"parser": "babel-eslint",
"globals": [
"fetch",
"FormData",
"it",
"expect"
]
},
"transform": {
"^.+\\.[t|j]sx?$": "babel-jest"
}
}

In my case, I needed to add #react-native with '#' into transformIgnorePatterns as shown bellow:
"transformIgnorePatterns": [
"node_modules/(?!(#react-native|react-native)/)"
]

First, we need to understand what is the root cause.
SyntaxError: Unexpected identifier
Basically, these types of errors occurred due to your jest configuration. If you are instructed to transform all the libraries inside the node_modules it will raise these types of erros.
So please go ahead and check for the below statement in your package.json jest configuration.
transformIgnorePatterns
Above is using to add some transformation ignore patterns and it will have the this default regex pattern => ["/node_modules/", "\\.pnp\\.[^\\\/]+$"]
Below is from the official jest documentation:
Sometimes it happens (especially in React Native or TypeScript
projects) that 3rd party modules are published as untranspiled. Since
all files inside node_modules are not transformed by default, Jest
will not understand the code in these modules, resulting in syntax
errors. To overcome this, you may use transformIgnorePatterns to allow
transpiling such modules. You'll find a good example of this use case
in React Native Guide.
So try adding below as instructed by #Pavot in one of the answers will help fix. But if it's a similar issue that occurred by a different library, you can try adding it to the transform ignore list and see whether it works or not.
"transformIgnorePatterns": [
"node_modules/(?!(#react-native|react-native)/)"
]

There is issue with transformIgnorePatterns in package.json.
Instead of adding number of items in this, just follow this pattern to add
modules to blacklist.
"transformIgnorePatterns": [
"node_modules/(?!MODULE_NAME_1|MODULE_NAME_2)/"
],
As from your error, we need to add react-native to transformIgnorePatterns. Actually, we need to add all those modules in blacklist that throws error because mostly modules are not written completely in JS.
Finally in my case the jest in package.json is
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!react-native-payfort-sdk|react-native)/"
],
"globals": {
"__DEV__": true
},
"testEnvironment": "node"
}
This worked for me and hopefully this will help you as well.

Babel might need an according preset. If you are outside Expo, npm install --save-dev metro-react-native-babel-preset and insert this to your babel.config.js:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};

Vue.use(plugin) not invoking the `install` function

I am working on exporting my custom vue component as NPM module. I have followed steps mentioned in the official doc Packaging Vue Components for npm.
My index.js AKA wrapper.js file:
// index.js -> wrapper.js
// Import vue component
import component from "./components/VueOpenapiForm.vue";
import ExtendSchema from "./functional-components/extend-schema.js";
// global components
import ObjectForm from "./components/ObjectForm.vue";
import ArrayInput from "./components/ArrayInput.vue";
import KeyValuePairs from "./components/KeyValuePairs.vue";
import SimpleInput from "./components/SimpleInput.vue";
// export ExtendSchema
export const extendSchema = ExtendSchema;
// Declare install function executed by Vue.use()
export function install(Vue) {
if (install.installed) return;
install.installed = true;
Vue.component("VueOpenapiForm", component);
Vue.component("object-form", ObjectForm);
Vue.component("array-input", ArrayInput);
Vue.component("key-value-pairs", KeyValuePairs);
Vue.component("simple-input", SimpleInput);
}
// Create module definition for Vue.use()
const plugin = {
install
};
// Auto-install when vue is found (eg. in browser via <script> tag)
let GlobalVue = null;
if (typeof window !== "undefined") {
GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
}
// To allow use as module (npm/webpack/etc.) export component
export default component;
rollup.config.js file:
// rollup.config.js
import babel from "rollup-plugin-babel";
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs"; // Convert CommonJS modules to ES6
import vue from "rollup-plugin-vue"; // Handle .vue SFC files
import buble from "#rollup/plugin-buble"; // Transpile/polyfill with reasonable browser support
export default {
input: "src/index.js", // Path relative to package.json
output: {
name: "VueOpenapiForm",
exports: "named"
},
plugins: [
resolve(),
commonjs({
namedExports: {
// left-hand side can be an absolute path, a path
// relative to the current directory, or the name
// of a module in node_modules
"vue-codemirror": ["codemirror"]
}
}),
babel({
runtimeHelpers: true,
exclude: "node_modules/**",
plugins: [
"#babel/plugin-external-helpers",
"#babel/plugin-transform-runtime"
]
}),
vue({
css: true, // Dynamically inject css as a <style> tag
compileTemplate: true // Explicitly convert template to render function,
}),
buble() // Transpile to ES5
]
};
package.json
{
"name": "#appscode/vue-openapi-form",
"version": "0.1.0",
"main": "dist/vue-openapi-form.umd.js",
"module": "dist/vue-openapi-form.esm.js",
"unpkg": "dist/vue-openapi-form.min.js",
"browser": {
"./sfc": "src/vue-openapi-form.vue"
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"pkg": "npm run pkg:umd & npm run pkg:es & npm run pkg:unpkg",
"pkg:umd": "rollup --config pkg/rollup.config.js --format umd --file dist/vue-openapi-form.umd.js",
"pkg:es": "rollup --config pkg/rollup.config.js --format es --file dist/vue-openapi-form.es.js",
"pkg:unpkg": "rollup --config pkg/rollup.config.js --format iife --file dist/vue-openapi-form.min.js"
},
"dependencies": {
"#babel/runtime": "^7.7.7",
"bulma": "^0.8.0",
"bulma-switch": "^2.0.0",
"core-js": "^3.3.2",
"font-awesome": "^4.7.0",
"vee-validate": "^3.1.3",
"vue": "^2.6.10",
"vue-codemirror": "^4.0.6",
"vuex": "^3.0.1"
},
"devDependencies": {
"#babel/plugin-external-helpers": "^7.7.4",
"#babel/plugin-transform-runtime": "^7.7.6",
"#rollup/plugin-buble": "^0.20.0",
"#rollup/plugin-node-resolve": "^6.0.0",
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-plugin-eslint": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"#vue/eslint-config-prettier": "^5.0.0",
"babel-cli": "^6.26.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"prettier": "^1.18.2",
"rollup": "^1.17.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.1",
"rollup-plugin-uglify-es": "0.0.1",
"rollup-plugin-vue": "^5.0.1",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"description": "A Vue component to generate html form using OpenAPI v3 schema",
"repository": {
"type": "git",
"url": "git+https://github.com/appscode/vue-openapi-form.git"
},
"keywords": [
"json-schema",
"vue",
"openapi",
"kubernetes"
],
"author": "support#appscode.com",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/appscode/vue-openapi-form/issues"
},
"homepage": "https://github.com/appscode/vue-openapi-form#readme"
}
When I run npm run pkg rollup bundles the component and produces 3 files in the dist folder.
vue-openapi-form.es.js
vue-openapi-form.min.js
vue-openapi-form.umd.js
Now, I am trying import this bundled component inside a different Vue project. In the new project in main.js file:
// main.js
...
import VueOpenapiForm from "#appscode/vue-openapi-form"
Vue.use(VueOpenapiForm)
...
Now, when I try to use vue-openapi-form as html tag inside vue template. I have the following error
[Vue warn]: Unknown custom element: <vue-openapi-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App> at src/App.vue
Can anyone tell me what am I doing wrong here ?
I need all those components to be declared globally as they are recursive. The install function does just that but it is not being called when I use Vue.use. How can I solve this ?