Related
I already add this to my package.json dist/custom-elements/index.mjs": "dist/custom-elements/index.js why i am having this error (below). did i miss something?
{
"name": "#map/react-app",
"private": true,
"scripts": {
"start": "webpack serve",
"start:standalone": "webpack serve --port 9003 --env standalone",
"build": "concurrently yarn:build:*",
"build:webpack": "webpack --mode=production",
"analyze": "webpack --mode=production --env analyze",
"lint": "eslint src --ext js",
"format": "prettier --write .",
"check-format": "prettier --check .",
"test": "cross-env BABEL_ENV=test jest",
"watch-tests": "cross-env BABEL_ENV=test jest --watch",
"prepare": "husky install",
"coverage": "cross-env BABEL_ENV=test jest --coverage"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/eslint-parser": "^7.15.0",
"#babel/plugin-transform-runtime": "^7.15.0",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"#babel/runtime": "^7.15.3",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"babel-jest": "^27.0.6",
"concurrently": "^6.2.1",
"cross-env": "^7.0.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-important-stuff": "^3.0.0",
"eslint-plugin-prettier": "^3.4.1",
"husky": "^7.0.4",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.0.6",
"jest-cli": "^27.0.6",
"prettier": "^2.3.2",
"pretty-quick": "^3.1.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0",
"webpack-config-single-spa-react": "^4.0.0",
"webpack-dev-server": "^4.0.0",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"#arcgis/core": "^4.21.2",
"#material-ui/styles": "^4.11.4",
"#mui/styles": "^5.2.2",
"#reach/router": "^1.3.4",
"#stencil/core": "^2.11.0",
"browserify": "^17.0.0",
"dotenv": "^10.0.0",
"dotenv-webpack": "^7.0.3",
"path-browserify": "^1.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"single-spa-react": "^4.3.1",
"web-vitals": "^2.1.2"
},
"lint-staged": {
"*.{js,jsx}": "pretty-quick --staged && eslint --fix"
},
"browser": {
"dist/custom-elements/index.mjs": "dist/custom-elements/index.js" // I'll already add this to may package.json, why i am having this error?
}
}
error
ERROR in
./node_modules/#esri/calcite-components/dist/custom-elements/index.mjs
1:0-147
Module not found: Error: Can't resolve '#stencil/core/internal/client'
in
'C:\Users\Ronald\Desktop\Map\app-react\node_modules#esri\calcite-components\dist\custom-elements'
Did you mean 'index.js'? BREAKING CHANGE: The request
'#stencil/core/internal/client' failed to resolve only because it was
resolved as fully specified (probably because the origin is strict
EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs'
file, or a '.js' file where the package.json contains '"type":
"module"'). The extension in the request is mandatory for it to be
fully specified. Add the extension to the request.
The best solutions on this is in your webpack.config.js add this code
module:{
rules:[
{
test: /\.m?js/,
resolve: {
fullySpecified: false
}
}
]
},
and removed the browser in your package.json
I'm making a desktop application using electron and I decided to use Monaco Editor and install it using npm install monaco-editor but when I run the application it says Cannot find module 'monaco-editor'
I used electron-react-boilerplate as a boilerplate.
I tried both methods for installing it using ESM
This is my package.json:
{
"name": "electron-react-boilerplate",
"productName": "ElectronReact",
"version": "0.17.1",
"description": "Electron application boilerplate based on React, React Router, Webpack, React Hot Loader for rapid application development",
"scripts": {
"build": "concurrently \"yarn build-main\" \"yarn build-renderer\"",
"build-dll": "cross-env NODE_ENV=development webpack --config ./configs/webpack.config.renderer.dev.dll.babel.js --colors",
"build-e2e": "cross-env E2E_BUILD=true yarn build",
"build-main": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.main.prod.babel.js --colors",
"build-renderer": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.renderer.prod.babel.js --colors",
"dev": "cross-env START_HOT=1 node -r #babel/register ./internals/scripts/CheckPortInUse.js && cross-env START_HOT=1 yarn start-renderer-dev",
"flow": "flow",
"flow-typed": "rimraf flow-typed/npm && flow-typed install --overwrite || true",
"lint": "cross-env NODE_ENV=development eslint --cache --format=pretty .",
"lint-fix": "yarn --silent lint --fix; exit 0",
"lint-styles": "stylelint --ignore-path .eslintignore '**/*.*(css|scss)' --syntax scss",
"lint-styles-fix": "yarn --silent lint-styles --fix; exit 0",
"package": "yarn build && electron-builder build --publish never",
"package-all": "yarn build && electron-builder build -mwl",
"package-ci": "yarn postinstall && yarn build && electron-builder --publish always",
"package-linux": "yarn build && electron-builder build --linux",
"package-win": "yarn build && electron-builder build --win --x64",
"postinstall": "yarn flow-typed && electron-builder install-app-deps package.json && yarn build-dll && opencollective-postinstall",
"postlint-fix": "prettier --ignore-path .eslintignore --single-quote --write '**/*.{js,jsx,json,html,css,less,scss,yml}'",
"postlint-styles-fix": "prettier --ignore-path .eslintignore --single-quote --write '**/*.{css,scss}'",
"preinstall": "node ./internals/scripts/CheckYarn.js",
"prestart": "yarn build",
"start": "cross-env NODE_ENV=production electron ./app/main.prod.js",
"start-main-dev": "cross-env HOT=1 NODE_ENV=development electron -r #babel/register ./app/main.dev.js",
"start-renderer-dev": "cross-env NODE_ENV=development webpack-dev-server --config configs/webpack.config.renderer.dev.babel.js",
"test": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 jest",
"test-all": "yarn lint && yarn flow && yarn build && yarn test && yarn build-e2e && yarn test-e2e",
"test-e2e": "node -r #babel/register ./internals/scripts/CheckBuiltsExist.js && cross-env NODE_ENV=test testcafe electron:./ ./test/e2e/HomePage.e2e.js",
"test-e2e-live": "node -r #babel/register ./internals/scripts/CheckBuiltsExist.js && cross-env NODE_ENV=test testcafe-live electron:./ ./test/e2e/HomePage.e2e.js",
"test-watch": "yarn test --watch"
},
"lint-staged": {
"*.{js,jsx}": [
"cross-env NODE_ENV=development eslint --cache --format=pretty",
"git add"
],
"{*.json,.{babelrc,eslintrc,prettierrc,stylelintrc}}": [
"prettier --ignore-path .eslintignore --parser json --write",
"git add"
],
"*.{css,scss}": [
"stylelint --ignore-path .eslintignore --syntax scss --fix",
"prettier --ignore-path .eslintignore --single-quote --write",
"git add"
],
"*.{html,md,yml}": [
"prettier --ignore-path .eslintignore --single-quote --write",
"git add"
]
},
"main": "./app/main.prod.js",
"build": {
"productName": "ElectronReact",
"appId": "org.develar.ElectronReact",
"files": [
"app/dist/",
"app/app.html",
"app/main.prod.js",
"app/main.prod.js.map",
"package.json"
],
"dmg": {
"contents": [
{
"x": 130,
"y": 220
},
{
"x": 410,
"y": 220,
"type": "link",
"path": "/Applications"
}
]
},
"win": {
"target": [
"nsis",
"msi"
]
},
"linux": {
"target": [
"deb",
"rpm",
"snap",
"AppImage"
],
"category": "Development"
},
"directories": {
"buildResources": "resources",
"output": "release"
},
"publish": {
"provider": "github",
"owner": "electron-react-boilerplate",
"repo": "electron-react-boilerplate",
"private": false
}
},
"repository": {
"type": "git",
"url": "git+https://github.com/electron-react-boilerplate/electron-react-boilerplate.git"
},
"author": {
"name": "Electron React Boilerplate Maintainers",
"email": "electronreactboilerplate#gmail.com",
"url": "https://electron-react-boilerplate.js.org"
},
"contributors": [
{
"name": "Vikram Rangaraj",
"email": "vikr01#icloud.com",
"url": "https://github.com/vikr01"
},
{
"name": "Amila Welihinda",
"email": "amilajack#gmail.com",
"url": "https://github.com/amilajack"
}
],
"license": "MIT",
"bugs": {
"url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues"
},
"keywords": [
"electron",
"boilerplate",
"react",
"redux",
"flow",
"sass",
"webpack",
"hot",
"reload"
],
"homepage": "https://github.com/electron-react-boilerplate/electron-react-boilerplate#readme",
"jest": {
"testURL": "http://localhost/",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/fileMock.js",
"\\.(css|less|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"jsx",
"json"
],
"transform": {
"^.+\\.jsx?$": "babel-jest"
},
"setupFiles": [
"./internals/scripts/CheckBuiltsExist.js"
]
},
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/plugin-proposal-decorators": "^7.4.0",
"#babel/plugin-proposal-do-expressions": "^7.2.0",
"#babel/plugin-proposal-export-default-from": "^7.2.0",
"#babel/plugin-proposal-export-namespace-from": "^7.2.0",
"#babel/plugin-proposal-function-bind": "^7.2.0",
"#babel/plugin-proposal-function-sent": "^7.2.0",
"#babel/plugin-proposal-json-strings": "^7.2.0",
"#babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.2.0",
"#babel/plugin-proposal-numeric-separator": "^7.2.0",
"#babel/plugin-proposal-optional-chaining": "^7.2.0",
"#babel/plugin-proposal-pipeline-operator": "^7.3.2",
"#babel/plugin-proposal-throw-expressions": "^7.2.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-syntax-import-meta": "^7.2.0",
"#babel/plugin-transform-react-constant-elements": "^7.2.0",
"#babel/plugin-transform-react-inline-elements": "^7.2.0",
"#babel/preset-env": "^7.4.2",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.4.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.5.0",
"babel-loader": "^8.0.5",
"babel-plugin-dev-expression": "^0.2.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"chalk": "^2.4.2",
"concurrently": "^4.1.0",
"cross-env": "^5.2.0",
"cross-spawn": "^6.0.5",
"css-loader": "^3.1.0",
"detect-port": "^1.3.0",
"electron": "^4.1.3",
"electron-builder": "^20.39.0",
"electron-devtools-installer": "^2.2.4",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"enzyme-to-json": "^3.3.5",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-erb": "^0.0.2",
"eslint-config-prettier": "^4.1.0",
"eslint-formatter-pretty": "^2.1.1",
"eslint-import-resolver-webpack": "^0.11.0",
"eslint-plugin-compat": "^3.1.0",
"eslint-plugin-flowtype": "^3.4.2",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jest": "^22.4.1",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.1.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-testcafe": "^0.2.1",
"fbjs-scripts": "^1.2.0",
"file-loader": "^3.0.1",
"flow-bin": "^0.95.1",
"flow-runtime": "^0.17.0",
"flow-typed": "^2.5.1",
"husky": "^1.3.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^24.5.0",
"lint-staged": "^8.1.5",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"opencollective-postinstall": "^2.0.2",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"prettier": "^1.16.4",
"react-test-renderer": "^16.8.6",
"redux-logger": "^3.0.6",
"rimraf": "^2.6.3",
"sass-loader": "^7.1.0",
"sinon": "^7.3.1",
"spectron": "^5.0.0",
"style-loader": "^0.23.1",
"stylelint": "^9.10.1",
"stylelint-config-prettier": "^5.0.0",
"stylelint-config-standard": "^18.2.0",
"terser-webpack-plugin": "^1.2.3",
"testcafe": "^1.1.0",
"testcafe-browser-provider-electron": "^0.0.8",
"testcafe-live": "^0.1.4",
"testcafe-react-selectors": "^3.1.0",
"url-loader": "^1.1.2",
"webpack": "^4.29.6",
"webpack-bundle-analyzer": "^3.1.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
"webpack-merge": "^4.2.1",
"yarn": "^1.15.2"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.8.1",
"#material-ui/core": "^4.2.1",
"#material-ui/icons": "^4.2.1",
"axios": "^0.19.0",
"classnames": "^2.2.6",
"connected-react-router": "^6.3.2",
"core-js": "2",
"devtron": "^1.4.0",
"electron-debug": "^2.1.0",
"electron-log": "^3.0.4",
"electron-store": "^4.0.0",
"electron-updater": "^4.0.6",
"history": "^4.9.0",
"monaco-editor": "^0.19.2",
"monaco-editor-webpack-plugin": "^1.8.2",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-copy-to-clipboard": "^5.0.1",
"react-dom": "^16.8.6",
"react-hot-loader": "^4.8.2",
"react-panelgroup": "^1.0.7",
"react-redux": "^6.0.1",
"react-resize-observer": "^1.1.1",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-simple-resizer": "^1.3.1",
"react-tabs": "^3.1.0",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.8.5",
"redux": "^4.0.1",
"redux-promise-middleware": "^6.1.1",
"redux-thunk": "^2.3.0",
"shell-quote": "^1.7.2",
"source-map-support": "^0.5.11",
"ssh2": "^0.8.5",
"xterm": "^3.14.5"
},
"devEngines": {
"node": ">=7.x",
"npm": ">=4.x",
"yarn": ">=0.21.3"
},
"collective": {
"url": "https://opencollective.com/electron-react-boilerplate-594"
},
"browserslist": "electron 1.6"
}
I tried with no luck using different versions of monaco-editor and monaco-editor-webpack-plugin as suggested here
This is my webpack config, well the webpack.config of electron-react-boilerplate is kind of messy and maybe there is the error, here is a link of all the config files for webpack used by electron-react-boilerplate I've only changed that file thought.
/**
* Base webpack config used across other specific configs
*/
import path from 'path';
import webpack from 'webpack';
import { dependencies } from '../package.json';
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
export default {
externals: [...Object.keys(dependencies || {})],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
},
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
loader: 'ts-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
// entry: {
// // "app": './index.js',
// // Package each language's worker and give these filenames in `getWorkerUrl`
// "editor.worker": 'node_modules/monaco-editor/esm/vs/editor/editor.worker.js',
// "json.worker": 'node_modules/monaco-editor/esm/vs/language/json/json.worker',
// "css.worker": 'node_modules/monaco-editor/esm/vs/language/css/css.worker',
// "html.worker": 'node_modules/monaco-editor/esm/vs/language/html/html.worker',
// "ts.worker": 'node_modules/monaco-editor/esm/vs/language/typescript/ts.worker',
// },
output: {
path: path.join(__dirname, '..', 'app'),
// https://github.com/webpack/webpack/issues/1114
libraryTarget: 'commonjs2'
},
/**
* Determine the array of extensions that should be used to resolve modules.
*/
resolve: {
extensions: ['.js', '.tsx', '.ts', '.jsx', '.json']
},
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'production'
}),
new MonacoWebpackPlugin(),
new webpack.NamedModulesPlugin()
]
};
For completeness, I'm importing Monaco Editor like so: import * as Monaco from 'monaco-editor' if I use import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; it works but without most of the features that I need.
Add Jest config 'moduleNameMapper':
'monaco-editor':
'<rootDir>/node_modules/monaco-editor/esm/vs/editor/editor.api.d.ts',
Use:
import * as monaco from 'monaco-editor'
Or:
mport { editor, Uri /* , ... */ } from 'monaco-editor'
I'm running into an issue where my build works fine on master branch, but on a sub-branch it is producing an error of "Uncaught ReferenceError: react is not defined". The package.json for both branches are a little different, but I'm still unsure why the sub-branch is showing that error as React is listed as a dependency for both.
master-branch:
{
"name": "master-branch",
"version": "0.0.1",
"description": "master-branch",
"main": "lib/index.js",
"pre-commit": [
"test"
],
"peerDependencies": {
"antd": "3.x",
"react": "16.x",
"react-dom": "16.x"
},
"scripts": {
"build": "rm -rf lib && NODE_ENV=production webpack --progress --config webpack.config.js ",
"docs:clean": "rm -rf docs/dist",
"docs:deploy": "yarn docs && gh-pages -d docs/dist",
"docs": "esdoc && yarn test:coverage && node docs/post-doc",
"test": "NODE_ENV=test jest",
"test:coverage": "jest --coverage",
"test:watch": "jest --watch",
"watch": "watch-run -p 'src/**' yarn build",
"storybook": "start-storybook -p 6006",
"storybook:watch": "concurrently \"yarn watch\" \"yarn storybook\"",
"storybook:build": "build-storybook -c .storybook -o build-stories"
},
"babel": {
"presets": [
"es2015",
"stage-0",
"react"
],
"plugins": [
"transform-class-properties",
"transform-custom-element-classes",
"transform-es2015-classes",
"transform-export-extensions"
]
},
"jest": {
"coverageDirectory": "docs/dist/coverage"
},
"dependencies": {
"antd": "3.6.5",
"async": "^2.6.0",
"axios": "^0.19.0",
"chance": "^1.0.13",
"classnames": "^2.2.5",
"jquery": "^3.2.1",
"lodash": "^4.17.15",
"md5": "^2.2.1",
"react-jss": "^8.4.0",
"store": "^2.0.12"
},
"devDependencies": {
"#storybook/addon-actions": "^5.2.5",
"#storybook/addon-links": "^5.2.5",
"#storybook/react": "^5.2.5",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-custom-element-classes": "^0.1.0",
"babel-plugin-transform-es2015-classes": "^6.24.1",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"esdoc": "^1.0.3",
"esdoc-ecmascript-proposal-plugin": "^1.0.0",
"esdoc-react-plugin": "^1.0.1",
"esdoc-standard-plugin": "^1.0.0",
"gh-pages": "^1.0.0",
"jest": "^23.6.0",
"pre-commit": "^1.2.2",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-test-renderer": "^16.0.0",
"url-loader": "^1.1.1",
"watch-run": "^1.2.5",
"webpack": "^3.8.1",
"webpack-cli": "^2.0.4"
},
"author": "",
"homepage": "",
"license": "MIT",
"repository": "",
"keywords": [
"react-component"
]
}
sub-branch:
{
"name": "sub-branch",
"version": "0.0.1",
"description": "sub-branch",
"main": "lib/index.js",
"pre-commit": [
"test"
],
"peerDependencies": {
"antd": "3.6.5",
"classnames": "^2.2.6",
"prop-types": "^15.7.2",
"react": "16.8",
"react-dom": "^16.9.0",
"react-jss": "^8.6.1"
},
"scripts": {
"build": "rm -rf lib && NODE_ENV=production webpack --mode production --progress --config webpack.config.js ",
"docs:clean": "rm -rf docs/dist",
"docs:deploy": "yarn docs && gh-pages -d docs/dist",
"docs": "esdoc && yarn test:coverage && node docs/post-doc",
"test": "NODE_ENV=test jest",
"test:coverage": "jest --coverage",
"test:watch": "jest --watch",
"watch": "watch-run -p 'src/**' yarn build",
"storybook": "start-storybook -p 6006",
"storybook:watch": "concurrently \"yarn watch\" \"yarn storybook\""
},
"jest": {
"coverageDirectory": "docs/dist/coverage"
},
"dependencies": {
"#storybook/addon-storysource": "^5.2.0",
"antd": "^3.23.3",
"axios": "^0.16.2",
"chance": "^1.0.13",
"classnames": "^2.2.6",
"lodash": "^4.17.4",
"md5": "^2.2.1",
"prop-types": "^15.7.2",
"react": "16.8",
"react-dom": "16.8",
"react-jss": "^8.6.1",
"store": "^2.0.12"
},
"devDependencies": {
"#babel/cli": "^7.6.0",
"#babel/core": "^7.6.0",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-proposal-export-default-from": "^7.5.2",
"#babel/plugin-syntax-export-extensions": "^7.0.0-beta.32",
"#babel/plugin-transform-classes": "^7.5.5",
"#babel/preset-env": "^7.6.0",
"#babel/preset-react": "^7.0.0",
"#storybook/addon-actions": "^5.2.0",
"#storybook/addon-notes": "^5.2.1",
"#storybook/react": "^5.2.0",
"babel-loader": "^8.0.6",
"esdoc": "^1.0.3",
"esdoc-ecmascript-proposal-plugin": "^1.0.0",
"esdoc-react-plugin": "^1.0.1",
"esdoc-standard-plugin": "^1.0.0",
"flexbox-react": "^4.4.0",
"gh-pages": "^1.0.0",
"jest": "^24.9.0",
"pre-commit": "^1.2.2",
"react-popper-tooltip": "^2.8.3",
"react-test-renderer": "^16.9.0",
"react-textarea-autosize": "^7.1.0",
"simplebar-react": "^1.3.0-alpha.1",
"storybook-addon-react-docgen": "^1.2.18",
"url-loader": "^1.1.1",
"watch-run": "^1.2.5",
"webpack": "^4.40.2",
"webpack-cli": "^3.3.8"
},
"author": "",
"homepage": "",
"license": "MIT",
"repository": "",
"keywords": [
"react-component"
]
}
on master-branch react is defined as "devDependency", but on sub-branch as "dependency". I belive on sub-branch it also should be defined as "devDependency"
I published an npm package named container-object-model but currently, it's not visible in npmjs.com.
but I can install it using yarn add container-object-model.
(files in node_modules)
package.json
{
"name": "container-object-model",
"version": "0.0.5",
"description": "Container Object Model",
"main": "./dist/container-object-model.js",
"types": "./dist/container-object-model.d.ts",
"keywords": ["container-object-model", "container"],
"license": "MIT",
"scripts": {
"prepare": "npm run build",
"start": "webpack",
"build": "webpack --env=build",
"postbuild": "tsc ./src/container-object-model.ts --declaration --esModuleInterop --outDir ./dist --emitDeclarationOnly",
"demo": "webpack-dev-server --env=demo"
},
"repository": {
"type": "git",
"url": "git+https://github.com/rannie-peralta/container-object-model.git"
},
"author": "Rannie Peralta",
"bugs": {
"url": "https://github.com/rannie-peralta/container-object-model/issues"
},
"homepage": "https://github.com/rannie-peralta/container-object-model#readme",
"devDependencies": {
"awesome-typescript-loader": "^5.2.1",
"clean-webpack-plugin": "^2.0.1",
"css-loader": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"typescript": "^3.4.3",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"#types/lodash.throttle": "^4.1.6",
"#types/memoizee": "^0.4.2",
"#types/shortid": "^0.0.29",
"decimal.js": "^10.1.1",
"lodash.throttle": "^4.1.1",
"memoizee": "^0.4.14",
"resize-observer-polyfill": "^1.5.1",
"shortid": "^2.2.14"
}
}
Also here is the other issue I found when I tried to import it:
I would like to use a development server just like React does with npm start. But, with Preact when I use the same command it opens a static server and I have to restart it manually each time when I want to see some change in my project.
My package.json:
{
"name": "yagoazedias-site",
"version": "0.0.0",
"description": "Ready-to-go Preact starter project powered by webpack.",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress",
"start": "serve build -s -c 1",
"prestart": "npm run build",
"build": "cross-env NODE_ENV=production webpack --progress",
"prebuild": "mkdirp build && ncp src/assets build/assets",
"test": "npm run -s lint && jest --coverage",
"test:watch": "npm run -s test -- --watch",
"lint": "eslint src test"
},
"keywords": [
"preact",
"boilerplate",
"webpack"
],
"license": "MIT",
"author": "Jason Miller <jason#developit.ca>",
"jest": {
"setupFiles": [
"./test/setup.js"
],
"testURL": "http://localhost:8080",
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
],
"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)$": "identity-obj-proxy",
"^react$": "preact-compat",
"^react-dom$": "preact-compat"
},
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
]
},
"devDependencies": {
"autoprefixer": "^7.0.1",
"babel": "^6.5.2",
"babel-core": "^6.24.0",
"babel-eslint": "^7.2.2",
"babel-jest": "^20.0.0",
"babel-loader": "^7.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-jsx": "^6.8.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.24.0",
"babel-runtime": "^6.11.6",
"chai": "^4.0.2",
"copy-webpack-plugin": "^4.0.1",
"core-js": "^2.4.1",
"cross-env": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.1.0",
"eslint-plugin-jest": "^20.0.0",
"eslint-plugin-react": "^7.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^20.0.0",
"json-loader": "^0.5.4",
"less": "^2.7.1",
"less-loader": "^4.0.3",
"mkdirp": "^0.5.1",
"ncp": "^2.0.0",
"offline-plugin": "^4.7.0",
"postcss-loader": "^2.0.3",
"preact-jsx-chai": "^2.2.1",
"raw-loader": "^0.5.1",
"regenerator-runtime": "^0.10.3",
"replace-bundle-webpack-plugin": "^1.0.0",
"script-ext-html-webpack-plugin": "^1.3.4",
"sinon": "^2.1.0",
"sinon-chai": "^2.9.0",
"source-map-loader": "^0.2.1",
"style-loader": "^0.18.1",
"url-loader": "^0.6.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.4.4"
},
"dependencies": {
"preact": "^8.1.0",
"preact-compat": "^3.15.0",
"preact-render-to-string": "^3.6.0",
"preact-router": "^2.5.1",
"promise-polyfill": "^6.0.2",
"proptypes": "^1.0.0",
"serve": "^6.0.0"
},
"main": "webpack.config.babel.js",
"directories": {
"test": "test"
}
}
Relevant links:
https://preactjs.com/
https://github.com/developit/preact
Use the dev script instead?
$ npm run dev
Your start script is doing serve build -s -c 1. React CRA's start script will boot up a webpack dev server which is what your dev script is doing.
npm start is short for npm run start. npm run <command> is just a small proxy that looks up the different commands you have listed in package.json.
Read more about npm scripts here.