I was trying import my private npm module hosted in sinopia. I can see that my module is available in sinopia folder structure.
Able to install module via "npm install --save". I can see it picks it from local registry.
But when I to use it anywhere I am getting "Error: Cannot find module ''
var module = require('some-module');
(tried both)
import module from 'some-module';
ERROR in ./app/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../node_modules/test-module in c:\yotest\app
# ./app/index.js 39:34-77
P.S: I did try installing it as a global node module and it again failed.
EDIT:
This is my package.json of the private module which is a clone from the github project.
{
"_args": [
[
"react-worker-dom",
""
]
],
"_from": "react-worker-dom#latest",
"_id": "react-worker-dom#0.0.3",
"_inCache": true,
"_installable": true,
"_location": "/react-worker-dom",
"_nodeVersion": "5.7.1",
"_npmUser": {},
"_npmVersion": "3.6.0",
"_phantomChildren": {},
"_requested": {
"name": "react-worker-dom",
"raw": "react-worker-dom",
"rawSpec": "",
"scope": null,
"spec": "latest",
"type": "tag"
},
"_requiredBy": [
"#USER"
],
"_shasum": "01b520589b7fd9d5533f911108ac6e1f774dab79",
"_shrinkwrap": null,
"_spec": "react-worker-dom",
"_where": "",
"author": {
"email": "******************",
"name": "********************"
},
"bugs": {
"url": "https://github.com/web-perf/react-worker-dom/issues"
},
"dependencies": {
"invariant": "^2.2.0",
"react": "^0.14.3"
},
"description": "ReactJS renderer using Web Workers",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babel-preset-stage-0": "^6.1.18",
"browser-perf": "^1.4.3",
"react-dom": "^0.14.3",
"webpack": "^1.12.8",
"webpack-dev-server": "^1.14.1"
},
"directories": {
"test": "test"
},
"dist": {
"shasum": "01b520589b7fd9d5533f911108ac6e1f774dab79",
"tarball": "http://localhost:4873/react-worker-dom/-/react-worker-dom-0.0.3.tgz"
},
"gitHead": "8c8fb15e793151e0169aac82537f4efe628d9986",
"homepage": "http://web-perf.github.io/react-worker-dom",
"license": "BSD-3-Clause",
"main": "dist/worker.js",
"name": "react-worker-dom",
"optionalDependencies": {},
"publishConfig": {
"registry": "http://localhost:4873/"
},
"readme": "ERROR: No README data found!",
"readmeFilename": "README.md",
"repository": {
"type": "git",
"url": "git+https://github.com/web-perf/react-worker-dom.git"
},
"scripts": {
"build-demo": "webpack --config test/webpack.config.js",
"demo": "webpack-dev-server --config test/webpack.config.js",
"perf": "node test/perf.js"
},
"version": "0.0.3"
}
Webpack config of main project
module.exports = {
entry: './app/index.js',
output: {
filename: 'public/bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel'
}
]
}
}
Package.json file of the main project
{
"name": "yotest",
"version": "0.0.1",
"main": "index.js",
"scripts": {
"start": "node bin/dev-server"
},
"keywords": [
"webpack",
"redux",
"react",
"react-router",
"kyper"
],
"license": "MIT",
"dependencies": {
"babel-core": "^5.8.22",
"babel-loader": "^5.3.2",
"express": "^4.13.3",
"extract-text-webpack-plugin": "^0.8.2",
"history": "^1.9.1",
"kyper-matter": "^0.1.2",
"lodash": "^3.10.1",
"proxy-middleware": "^0.13.1",
"react": "^0.14.0-rc1",
"react-dom": "^0.14.0-rc1",
"react-hot-loader": "^1.2.8",
"react-redux": "^2.1.2",
"react-router": "^1.0.0-rc1",
"react-worker-dom": "0.0.3",
"redux": "^3.0.0",
"redux-router": "^1.0.0-beta3",
"redux-thunk": "^1.0.0"
},
"devDependencies": {
"css-loader": "^0.16.0",
"eslint": "^1.4.1",
"eslint-config-airbnb": "0.0.8",
"eslint-plugin-react": "^3.2.3",
"node-sass": "^3.3.2",
"redux-devtools": "^2.1.2",
"sass-loader": "^2.0.1",
"style-loader": "^0.12.3",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.0"
}
}
I have reconfigured my NPM private registry and there was a port mismatch which was causing the problem.
Related
I'm using electron-builder through the electron-vue lib (https://github.com/SimulatedGREG/electron-vue).
And following the instructions to build the application in this documentation (https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html) using the command npm run build are appearing just these two files, one .snap and another .AppImage and I was thinking that should appear one .deb and another .exe for windows at least. Am I wrong?
My environment:
Node version: 16.15.1
NPM version: 8.11.0
vue-cli version:
vue: 2.6.11
vue-cli-plugin-electron-builder: 2.0.0
Operating System: linux ubuntu
My package.json:
{
"name": "simulans",
"version": "1.0.0",
"private": true,
"build": {
"productName": "simulans",
"appId": "lucaslgr.simulans",
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"directories": {
"output": "build"
},
"files": [
"dist/electron",
"node_modules/",
"package.json"
],
"mac": {
"icon": "./src/assets/img/simulans-icon.ico"
},
"win": {
"icon": "build/icons/icon.ico"
},
"linux": {
"icon": "build/icons"
}
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve --remote-debugging-port=9222",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"anim-event": "^1.0.17",
"big.js": "^6.1.1",
"core-js": "^3.6.5",
"cssprefix": "^2.0.17",
"eigen": "^0.2.0",
"fs": "*",
"fs-extra": "^10.1.0",
"leader-line": "^1.0.5",
"lodash.clonedeep": "^4.5.0",
"m-class-list": "^1.1.10",
"plain-draggable": "^2.5.14",
"plotly.js-dist-min": "^2.6.3",
"plotly.js-locales": "^2.8.1",
"pointer-event": "^1.0.2",
"vue": "^2.6.11",
"vue-router": "^3.0.3",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "^3.1.1",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "^3.0.5",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"electron": "^13.0.1",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.2.1",
"skeleton-loader": "^2.0.0",
"vue-cli-plugin-electron-builder": "~2.0.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"#vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"prettier/prettier": 0
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
I cant seem to get the default export to work in package.json.
when im importing:
import { Component } from 'packagename/'; // size 22kb
or
import { Component } from 'packagename/dist' // size 22kb;
but
import { Component } from 'packagename'; // size 3mb
I cant tell users to always add a / on the end of the import
this is my package.json
{
"version": "1.0.0",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
"engines": {
"node": ">=10"
},
"files": [
"dist"
],
"exports": {
".": {
"require": "./dist/index.js",
"import": "./dist/index.js"
},
"./*": "./dist/*",
"./mylib": "./dist/index.js"
},
"scripts": {
"start": "tsdx watch",
"build": "NODE_ENV=production tsdx build",
"build-size": "yarn build && yarn size",
"build-static-webapp": "npx expo export:web",
"test": "tsdx test --passWithNoTests",
"lint": "tsdx lint",
"prepare": "tsdx build",
"size": "size-limit",
"analyze": "size-limit --why",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"peerDependencies": {
"react": ">=16"
},
"husky": {
"hooks": {
"pre-commit": "tsdx lint"
}
},
"prettier": {
"printWidth": 80,
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
},
"name": "packagename",
"author": "me",
"module": "dist/packagename.esm.js",
"size-limit": [
{
"path": "dist/packagename.cjs.production.min.js",
"limit": "10 KB"
},
{
"path": "dist/packagename.esm.js",
"limit": "10 KB"
}
],
"devDependencies": {
"#babel/core": "^7.19.1",
"#expo/webpack-config": "^0.17.0",
"#headlessui/react": "^1.7.2",
"#size-limit/preset-small-lib": "^8.1.0",
"#size-limit/webpack": "^8.1.0",
"#size-limit/webpack-why": "^8.1.0",
"#storybook/addon-essentials": "^6.5.12",
"#storybook/addon-info": "^5.3.21",
"#storybook/addon-links": "^6.5.12",
"#storybook/addons": "^6.5.12",
"#storybook/react": "^6.5.12",
"#tailwindcss/forms": "^0.5.3",
"#tailwindcss/postcss7-compat": "^2.2.17",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#types/react": "^18.0.20",
"#types/react-dom": "^18.0.6",
"autoprefixer": "^10.4.11",
"babel-loader": "^8.2.5",
"clsx": "^1.2.1",
"expo": "^46.0.10",
"husky": "^8.0.1",
"identity-obj-proxy": "^3.0.0",
"postcss": "^8",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.35.0",
"react-is": "^18.2.0",
"react-native-web": "~0.18.7",
"rollup-plugin-postcss": "^4.0.2",
"size-limit": "^8.1.0",
"tailwindcss": "npm:#tailwindcss/postcss7-compat",
"tsdx": "^0.14.1",
"tslib": "^2.4.0",
"typescript": "^4.8.3"
},
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
}
},
"dependencies": {}
}
Fixed it by adding this in scripts:
"prepare": "NODE_ENV=production tsdx build"
I keep getting the below error when trying to build on AWS Amplify. I don't really understand the error as the node_modules packages should be built by Amplify. (Or course it's outside the src directory - it's a Node package
Is there a solution to this?
2022-07-15T12:18:10.405Z [INFO]: Failed to compile.
2022-07-15T12:18:10.411Z [INFO]: Module not found: Error: You attempted to import /codebuild/output/src341411582/src/react-sol/node_modules/console-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/.
This is my webpack.config.js
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = {
plugins: {
add: [
new webpack.ProvidePlugin({
process: "process/browser.js",
}),
new NodePolyfillPlugin({
excludeAliases: ['console-browserify'], //have tried with and without this
}),
],
},
node: {
fs: "empty",
},
};
package.json (I've listed everything)
{
"name": "mb-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/react": "^2.2.1",
"#emailjs/browser": "^3.6.2",
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#fontsource/akaya-telivigala": "^4.5.6",
"#fontsource/cabin-sketch": "^4.5.7",
"#fontsource/sora": "^4.5.8",
"#metaplex-foundation/js": "^0.11.7",
"#solana-mobile/wallet-adapter-mobile": "^0.0.1-alpha.1",
"#solana/pay": "^0.2.0",
"#solana/spl-token": "^0.2.0",
"#solana/wallet-adapter-base": "^0.9.8",
"#solana/wallet-adapter-react": "^0.15.7",
"#solana/wallet-adapter-react-ui": "^0.9.9",
"#solana/wallet-adapter-wallets": "^0.16.7",
"#solana/web3.js": "^1.47.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.0.0",
"#testing-library/user-event": "^14.0.0",
"#toruslabs/openlogin": "^2.2.0",
"#walletconnect/web3-provider": "^1.7.8",
"#web3auth/web3auth": "^1.1.0",
"antd": "^4.21.0",
"aws-sdk": "^2.1170.0",
"bignumber.js": "^9.0.2",
"bootstrap": "^5.1.3",
"ethereumjs-abi": "^0.6.8",
"framer-motion": "4.1.17",
"fs": "^0.0.1-security",
"fs-webpack-plugin": "^3.1.3",
"gsap": "^3.10.4",
"jquery": "^3.6.0",
"moralis": "^1.9.0",
"node-polyfill-webpack-plugin": "^2.0.0",
"react": "^18.2.0",
"react-blockies": "^1.4.1",
"react-bootstrap": "^2.4.0",
"react-confetti": "^6.1.0",
"react-dom": "^18.2.0",
"react-moralis": "^1.4.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.0",
"react-spinners": "^0.12.0",
"react-typewriter-effect": "^1.1.0",
"react-use": "^17.4.0",
"serve": "^13.0.2",
"styled-components": "^5.3.5",
"swiper": "^8.2.5",
"typescript": "^4.7.3",
"web-vitals": "^2.1.4",
"web3uikit": "^0.1.166"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"defaults"
]
},
"devDependencies": {
"assert": "^2.0.0",
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.0",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"process": "^0.11.10",
"react-app-rewired": "^2.2.1",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"url": "^0.11.0"
},
"browser": {
"fs": false,
"path": false,
"os": false
}
}
Alias for console-browserify inside node-polyfill-webpack-plugin is console. Try this:
module.exports = {
plugins: {
add: [
new webpack.ProvidePlugin({
process: "process/browser.js",
}),
new NodePolyfillPlugin({
excludeAliases: ['console'],
}),
],
},
node: {
fs: "empty",
},
};
It started with this error:
So I did a test to rule out what the problem was. I tested if the library Notistack that I hade forked from GitHub, and then linked with npm link to my app, was the problem.
I placed this code in the app
window.React2 = require('react');
console.log(window.React1 === window.React2);
And I placed this code in forked Notistack
window.React1 = require('react');
When I run the app I can see in the console that I get a false from that test. Indication that I have two different React version and that causing the error.
If I now do npm link in the library for the React package, so that the Notistack is using the app's version of React. Then I get rid of this error.
What am I missing here why do I have to do this even I use peerDependencies for React.
"peerDependencies": {
"#material-ui/core": "^4.0.0",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
"react-redux": "^7.2.5"
},
package.json
{
"name": "notistack",
"version": "1.0.10",
"description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
"main": "dist/index.js",
"module": "dist/notistack.esm.js",
"types": "dist/index.d.ts",
"license": "MIT",
"author": {
"name": "Hossein Dehnokhalaji",
"email": "hossein.dehnavi98#yahoo.com",
"url": "https://github.com/iamhosseindhv/notistack"
},
"homepage": "https://www.iamhosseindhv.com/notistack",
"repository": {
"url": "git+https://github.com/iamhosseindhv/notistack.git",
"type": "git"
},
"scripts": {
"build": "tsdx build --transpileOnly --entry ./src/index.js",
"prebuild": "npm run docs",
"prepublishOnly": "npm run build",
"docs": "rimraf typedoc.json && typedoc --tsconfig",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"peerDependencies": {
"#material-ui/core": "^4.0.0",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
"react-redux": "^7.2.5"
},
"devDependencies": {
"#babel/preset-react": "^7.8.3",
"#material-ui/core": "^4.9.5",
"#types/node": "^13.9.0",
"#types/react": "^16.9.23",
"#types/react-dom": "^16.9.5",
"#types/react-is": "^16.7.1",
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.9.1",
"babel-plugin-optimize-clsx": "^2.6.1",
"eslint": "^7.7.0",
"eslint-config-airbnb": "~18.2.0",
"eslint-plugin-import": "~2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
"rimraf": "^3.0.2",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-copy": "^3.3.0",
"tsdx": "^0.13.2",
"typedoc": "^0.16.11",
"typescript": "^3.8.3"
},
"dependencies": {
"clsx": "^1.1.0",
"hoist-non-react-statics": "^3.3.0"
},
"bugs": {
"url": "https://github.com/iamhosseindhv/notistack/issues"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/notistack"
},
"contributors": [
"Hossein Dehnokhalaji (https://www.iamhosseindhv.com/)"
],
"keywords": [
"notistack",
"enqueueSnackbar",
"snackbarprovider",
"useSnackbar",
"multiple",
"react",
"javascript",
"material-ui",
"toast",
"redux",
"snackbar",
"stacked",
"notification",
"material design",
"hossein",
"dehnokhalaji",
"iamhosseindhv"
]
}
I've used a truffle react box to get an app working. npm install gives me lots of deprecation warnings, and alos that some packages need others that aren't installed. Is there a good way, or a place online, that can get my package.json file up to date? Since I'm really new to react, I think having missing packages is sure to cause a lot of lost time. Thank you.
package.json
{
"name": "someApp",
"version": "0.1.0",
"license": "MIT",
"private": true,
"repository": {
"type": "git",
"url": "some repo..."
},
"main": "src/index.js",
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom --watch"
},
"dependencies": {
"dotenv": "^2.0.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router-dom": "^4.3.1"
},
"devDependencies": {
"autoprefixer": "6.5.1",
"babel-core": "6.17.0",
"babel-eslint": "7.1.1",
"babel-jest": "17.0.2",
"babel-loader": "6.2.7",
"babel-preset-react-app": "^2.0.1",
"case-sensitive-paths-webpack-plugin": "1.1.4",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"cross-spawn": "4.0.2",
"css-loader": "0.26.0",
"debug": "^3.1.0",
"detect-port": "1.0.1",
"eslint": "3.8.1",
"eslint-config-react-app": "^0.5.0",
"eslint-loader": "1.6.0",
"eslint-plugin-flowtype": "2.21.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.4.1",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"filesize": "3.3.0",
"fs-extra": "0.30.0",
"growl": "^1.10.2",
"gzip-size": "3.0.0",
"html-webpack-plugin": "2.24.0",
"http-proxy-middleware": "0.17.2",
"jest": "19.0.1",
"json-loader": "0.5.4",
"minimatch": "^3.0.2",
"object-assign": "4.1.0",
"openzeppelin-solidity": "1.11.0",
"path-exists": "2.1.0",
"postcss-loader": "1.0.0",
"promise": "7.1.1",
"react-dev-utils": "^0.4.2",
"recursive-readdir": "2.1.0",
"stmux": "^1.5.5",
"strip-ansi": "3.0.1",
"style-loader": "0.13.1",
"truffle": "^4.1.13",
"truffle-contract": "^1.1.8",
"truffle-hdwallet-provider": "0.0.6",
"truffle-solidity-loader": "0.0.8",
"url-loader": "^1.0.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2",
"webpack-manifest-plugin": "^1.1.0",
"whatwg-fetch": "^1.0.0"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)",
"<rootDir>/coverage/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://127.0.0.1:7200",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
A really cool package i've used is npm-check
It provides a nice interface to tell you what packages are outdated.
interface image
to install the package, run in your terminal: npm install -g npm-check
To check packages, run: npm-check in the directory that contains the package.json you are checking.