CRA(create-react-app) add arcgis-webpack-plugin, compile failed

[nightsu]

this is the demo: https://github.com/nightsu/arcgis-react.git

Description

1. CRA: npm create-react-app arcgis-react, and npm install,
2. npm install @arcgis-webpack-plugin,
3. npm run eject,
4. add new ArcGISPlugin() to config/webpack.config.js const ArcGISPlugin = require("@arcgis/webpack-plugin"); ... module.exports = { ... plugins: [ ... new ArcGISPlugin(), ... ] ... }
5. npm start

   Expected Behavior

   compile succeeded.

   Actual Behavior

   compile failed. error: if (!request.context.issuer) { ^ TypeError: Cannot read property 'issuer' of undefined at resolver.hooks.file.tapAsync (..\arcgis-react\node_modules\react-dev-utils\ModuleScopePlugin.js:26:30)

   Possible Fix

Steps to Reproduce

1.download or clone https://github.com/nightsu/arcgis-react.git 2.npm install 3.npm start

Context

Your Environment

• Version used:
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project if available: package.json "@arcgis/webpack-plugin": "^4.13.1", "@babel/core": "7.7.4", "@svgr/webpack": "4.3.3", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@typescript-eslint/eslint-plugin": "^2.8.0", "@typescript-eslint/parser": "^2.8.0", "arcgispack": "0.0.27", "babel-eslint": "10.0.3", "babel-jest": "^24.9.0", "babel-loader": "8.0.6", "babel-plugin-named-asset-import": "^0.3.5", "babel-preset-react-app": "^9.1.0", "camelcase": "^5.3.1", "case-sensitive-paths-webpack-plugin": "2.2.0", "css-loader": "3.2.0", "dotenv": "8.2.0", "dotenv-expand": "5.1.0", "eslint": "^6.6.0", "eslint-config-react-app": "^5.1.0", "eslint-loader": "3.0.2", "eslint-plugin-flowtype": "3.13.0", "eslint-plugin-import": "2.18.2", "eslint-plugin-jsx-a11y": "6.2.3", "eslint-plugin-react": "7.16.0", "eslint-plugin-react-hooks": "^1.6.1", "file-loader": "4.3.0", "fs-extra": "^8.1.0", "html-webpack-plugin": "4.0.0-beta.5", "identity-obj-proxy": "3.0.0", "jest": "24.9.0", "jest-environment-jsdom-fourteen": "0.1.0", "jest-resolve": "24.9.0", "jest-watch-typeahead": "0.4.2", "mini-css-extract-plugin": "0.8.0", "optimize-css-assets-webpack-plugin": "5.0.3", "pnp-webpack-plugin": "1.5.0", "postcss-flexbugs-fixes": "4.1.0", "postcss-loader": "3.0.0", "postcss-normalize": "8.0.1", "postcss-preset-env": "6.7.0", "postcss-safe-parser": "4.0.1", "react": "^16.12.0", "react-app-polyfill": "^1.0.5", "react-dev-utils": "^10.0.0", "react-dom": "^16.12.0", "resolve": "^1.12.2", "resolve-url-loader": "3.1.1", "sass-loader": "8.0.0", "semver": "6.3.0", "style-loader": "1.0.0", "terser-webpack-plugin": "2.2.1", "ts-pnp": "1.1.5", "url-loader": "2.3.0", "webpack": "4.41.2", "webpack-cli": "^3.3.10", "webpack-dev-server": "3.9.0", "webpack-manifest-plugin": "2.2.0", "workbox-webpack-plugin": "4.3.1"

[shehabelhariry]

I have the same issue. Any fixes?

[nightsu]

I have the same issue. Any fixes?

@shehabelhariry No, I think maybe there are some compatibility problems between CRA and arcgis webpack plugin. But there is another method: You can use the arcgis-js-cli to create a react arcgis template https://github.com/Esri/arcgis-js-cli#quick-start arcgis create jsapi-react-app -t react Hope it could help you.

[shehabelhariry]

@nightsu Thank you. The thing is I am integrating the api into an existing CRA. I used the esri-loader method and it worked successfully.

[boualikamel]

Hello everybody, @nightsu I've just tried to introduce jsapi4 into a CRA template, using react-app-rewired. it worked but the esri icons didnt yet worked if you have any suggestion to improve you can contribute.

this is the demo https://github.com/boualikamel/cra-arcgis

edited __

i've juste fixed the icon problem, i hope that will help you dude

[odoe]

Are we good with react-app-rewired solution here? Can this issue be closed?