Develop Reference

ERROR in ./node_modules/#esri/calcite-components/dist/custom-elements/index.mjs 1:0-147

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

BABEL_PARSE_ERROR when importing App.Js into node

So i have been trying to get my ejected create-react-app, switched to be server side rendered. This is a simplified version of my file structure:
...
/client
/build
/public
package.json
/src
index.js
/components
/app
App.js
/routes
/api
Canvas.js
.babelrc
server.js
package.json
...
I am trying to import App.js into Canvas.Js, So that i can use it in a ReactDOMServer.renderToString();
The problem though, is on the actual import. The import brings up this error:
client/src/components/app/App.js: Unexpected token (34:4)
32 |
33 | return (
> 34 | <div>
| ^
35 | <IconSettings
at Parser.raise (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/location.js:41:63)
at Parser.unexpected (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/util.js:150:16)
at Parser.parseExprAtom (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:1116:20)
at Parser.parseExprSubscripts (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:526:23)
at Parser.parseMaybeUnary (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:506:21)
at Parser.parseExprOps (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:295:23)
at Parser.parseMaybeConditional (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:247:23)
at Parser.parseMaybeAssign (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:195:21)
at Parser.parseParenAndDistinguishExpression (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:1293:16)
at Parser.parseExprAtom (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:1023:21) {
pos: 1681,
loc: Position { line: 34, column: 4 },
code: 'BABEL_PARSE_ERROR'
}
I am just pulling it in with:
const App = require('../../client/src/components/app/App');
And i have used both require and import, with the same result. Not that, that should change anything but in case anyone asks.
Here is my babelrc:
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": ["#babel/plugin-transform-react-jsx"]
}
Heres my package.json:
{
"name": "express-canvas-app",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "babel-node server.js",
"build": "babel server.js --out-file server.compiled.js",
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.4",
"#babel/node": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"#babel/preset-react": "^7.0.0-beta.40",
"#babel/register": "7.8.3",
"#material-ui/core": "^4.4.3",
"#salesforce-ux/design-system": "^2.10.2",
"#salesforce/design-system-react": "^0.10.16",
"aws-param-store": "^3.2.0",
"aws-sdk": "^2.594.0",
"axios": "^0.19.0",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"babel-preset-es2015": "^6.24.1",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"crypto-js": "^3.1.9-1",
"dotenv": "^8.2.0",
"enzyme": "^3.10.0",
"express": "^4.17.1",
"express-sse": "^0.5.1",
"fs": "0.0.1-security",
"http": "0.0.0",
"https": "^1.0.0",
"jsforce": "^1.9.3",
"node-cache": "^5.1.0",
"path": "^0.12.7",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.1",
"salesforce-signed-request": "0.0.1",
"validator": "^11.1.0",
"webpack-node-externals": "^1.7.2"
},
"devDependencies": {
"#salesforce/babel-preset-design-system-react": "^3.0.0",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jest": "^23.0.4",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-react-hooks": "^1.7.0",
"nodemon": "^1.19.2",
"npm-run-all": "^4.1.5",
"salesforce-signed-request": "0.0.1",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-node-externals": "^1.7.2"
}
}
Any help or ideas would be awesome! I have spent the last couple days trying to nail down my errors and get babel configured!

I think in this particular case, i still had some webpack and package json files in the client folder. After porting over logic to a new app with webpack.server.js and package.json only living at root, i seem to have fixed the issue.

package.json dependency issue? - "Uncaught ReferenceError: react is not defined"

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"

React scripts issue: loop loading chunk.js

I'm using React scripts v3. I have this issue whenever I do an action of in the page ( mouse event, forms...) the application keeps downloading chunk.js
This my package.json
{
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.3.1",
"cors": "^2.8.5",
"lodash.flatten": "^4.4.0",
"lodash.get": "^4.4.2",
"lodash.intersection": "^4.4.0",
"mockdate": "^2.0.2",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-dom": "^16.8.6",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"react-scripts": "^3.0.1",
"recompose": "^0.30.0",
"url-search-params-polyfill": "^6.0.0",
"uuid": "^3.3.2"
},
"scripts": {
"mocks": "cd mocks && npm start",
"start-dotnet": "react-scripts start",
"start": "concurrently \"npm run mocks\" \"react-scripts start\"",
"build": "react-scripts build",
"test": "set NODE_ICU_DATA=node_modules/full-icu&& react-scripts test --env=jsdom",
"test:staged": "npm run test -- --coverage --findRelatedTests --watchAll=false",
"test-coverage": "npm run test -- --coverage --watchAll=false"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"*src/**/*.js": [
"prettier --write",
"npm run test:coverage",
"git add"
]
},
"commitlint": {
"extends": [
"#commitlint/config-conventional"
]
},
"eslintConfig": {
"extends": "react-app"
},
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
"browserslist": [
">0.2%",
"ie 11",
"not dead",
"not op_mini all"
],
"devDependencies": {
"#commitlint/cli": "^8.0.0",
"#commitlint/config-conventional": "^8.0.0",
"concurrently": "^4.1.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"enzyme-to-json": "^3.3.5",
"eslint-plugin-react-hooks": "^1.6.0",
"full-icu": "^1.3.0",
"husky": "^2.4.1",
"jest": "^24.7.1",
"jest-cucumber": "^2.0.11",
"lint-staged": "^8.2.1",
"node-sass": "^4.11.0",
"prettier": "^1.18.2"
}
}
Does anyone have an idea about this issue?

I ran into the same issue, where it kept on requesting for chunk.
It happened because there was a reference issue inside my JS chunk that I was lazy loading.
So I was lazy loading page data, and inside the JS for that, I was doing an import to a file that did not exists. And that lead to this issue.
Fixing that fixed it for me.

I ran into this problem today. I had incorrectly set the onChange action to a string instead of a function, so changing it to a function worked for me.

Vue Cli 3 Production build fails while development build works fine

I have a VueJS app scaffolded with VueCLI 3 that I would like to deploy. The development version run with npm run serve works fine and everything works perfectly. But when running with npm run build and then serve -s dist I'm getting a plethora of errors. Some of those errors are:
Error: "Unable to find required dependency e"
TypeError: "this.userDataStorage is undefined"
TypeError: "this.user is undefined
Unhandled promise rejection TypeError: "t.auth is undefined"
It's like the dist package generated might be missing something, and I have no clue on what's wrong or what I might be missing. Any help to unblock this issue will be much appreciated. Maybe it could be one dependency (like vue-inject, which I use as IoC framework) could be the culprit?
Here are my packages.json and vue.config.js respectively:
{
"name": "myapp",
"description": "",
"keywords": [],
"version": "0.1.0",
"dependencies": {
"bootstrap": "3.3.2",
"d3": "^5.7.0",
"d3-gantt-chart": "^0.2.8",
"d3-layout-timeline": "^1.0.3",
"d3-transition": "^1.1.1",
"d3plus-text": "^0.9.32",
"foundation-sites": "^6.5.0-rc.3",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"tinycolor": "latest",
"underscore": "^1.9.1",
"vue": "^2.5.17",
"vue-formio": "^3.0.1",
"vue-inject": "^2.1.1",
"vue-router": "^3.0.1",
"vue-slider-component": "^2.8.0",
"vuejs-datepicker": "^1.5.3",
"vuex": "^3.1.0",
"what-input": "^5.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.3.0",
"#vue/cli-plugin-e2e-nightwatch": "^3.3.0",
"#vue/cli-plugin-eslint": "^3.3.0",
"#vue/cli-plugin-unit-jest": "^3.3.0",
"#vue/cli-service": "^3.3.1",
"#vue/eslint-config-prettier": "^4.0.1",
"#vue/test-utils": "^1.0.0-beta.28",
"ajv": "^6.5.3",
"axios": "^0.18.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-runtime": "^6.26.0",
"bootstrap-sass": "^3.3.7",
"css-loader": "^1.0.1",
"eslint": "^5.12.1",
"eslint-config-prettier": "^3.6.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-html": "^5.0.0",
"eslint-plugin-import": "^2.15.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.1.0",
"husky": "^1.3.1",
"lint-staged": "^8.1.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"script-loader": "^0.7.2",
"stylelint": "^9.10.1",
"stylelint-config-sass-guidelines": "^5.3.0",
"stylelint-config-standard": "^18.2.0",
"vue-drag-drop": "^1.1.4",
"vue-hot-reload-api": "^2.3.0",
"vue-template-compiler": "^2.5.17",
"vue2-dropzone": "^3.5.2"
},
"author": "devops#myapp.io",
"contributors": [],
"license": "Unlicense",
"readmeFilename": "Readme.md",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
],
"*.css": [
"stylelint --fix",
"git add"
],
"*.scss": [
"stylelint --syntax=scss",
"git add"
]
}
}
var webpack = require("webpack");
var path = require("path");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery"
})
],
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
jquery: "jquery/src/jquery.js",
"jquery-ui": "jquery-ui",
d3: "d3",
modules: path.join(__dirname, "node_modules")
}
}
}
};