In the past months I have been developing a React web application that is displayed within a ASP.NET Core web project (template of Visual Studio). The application has worked in recent months and is used by users who will display it exclusively in IE 11 (Office web add-in that uses IE 11 rendering engine). I have used the 'fetch' method extensively and did not experience problems after adding the babel-polyfill npm package. Unfortunately, today I received the following error:
'fetch' is undefined
The polyfill packages are still present and I am unclear as to why this error is reported suddenly. As stated above it did work before, and I am unsure what caused the situation in which the 'isomorphic-fetch' package stopped working. Below you will find the package.json contents. Any insight into where to look for the root cause of this problem would be greatly appreciated!
{
"name": "ReactApp",
"private": true,
"version": "0.0.0",
"devDependencies": {
"#types/history": "4.6.0",
"#types/react": "15.0.38",
"#types/react-dom": "15.5.1",
"#types/react-hot-loader": "3.0.3",
"#types/react-router": "4.0.12",
"#types/react-router-dom": "4.0.5",
"#types/webpack-env": "1.13.0",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css-loader": "0.28.4",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-hot-loader": "3.0.0-beta.7",
"react-router-dom": "4.1.1",
"style-loader": "0.18.2",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2"
},
"dependencies": {
"#microsoft/office-js": "^1.1.2",
"#types/prop-types": "^15.5.2",
"babel-polyfill": "^6.26.0",
"moment": "^2.20.1",
"office-ui-fabric-core": "^9.3.0",
"office-ui-fabric-react": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.29.0.tgz"
}
}
Related
I have working knowledge in conventional multi page applications developed in HTML + JS libraries using SSR but I am new to modern web development. I am currently learning Vue JS (the latest version) and I have watched some tutorial videos online. The videos I watched taught writing Vue JS web pages in a plain HTML + <script> setup instead of a project setup created by a Vue CLI program.
Now, I would like to know what NPM dependencies in the package.json file are required to change a project setup from a single HTML + Vue CDN script src to one with a folder structure set up by vue-cli, just like modern project folder structure created by other CLIs, e.g. Angular and React.
After running vue init <template name> I get a package.json like the following:
{
...,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
In this NPM project, it is not required to have a <script src> CDN link but I am still able to use all Vue features. I know the JavaScript file is already included in one of the node_modules folders. But what makes the HTML files to load the script from the folder/sub-folder/sub-sub-folder? I do not find any file path pointing to the JS file(s) in the project.
In Vue's official documentation, it states that:
The Installation page provides more options of installing Vue. Note: We do not recommend that beginners start with vue-cli, especially if you are not yet familiar with Node.js-based build tools.
May I know what dependencies do the job (or if it is the nature of a Node.js project, it is born this way) and any documentation or quotes from developers that are easy to understand for web dev newbies like me?
But what makes the HTML files to load the script from the folder/sub-folder/sub-sub-folder?
I think what you're looking for is webpack config - I suggest you when creating blank project via Vue-CLI select options manually to set each config in dedicated file (so e.g. webpack's one will be in webpack folder with different .config.js files (separately for development, common and production).
Webpack resolves for you all file paths and dependencies that are used inside your project and bundles them into one (or multiple part-chunk) JavaScript file.
Regarding your main question - what you see under dependencies section is what will be included in your final application code and is necessary to make it work. Although, what you have under devDependencies section is required to build/compile/transpile/minify etc. your project so in the end it will have all dependency paths resolved properly, styles compiled (e.g. from scss to css) and everything uglyfied + minified.
I have a jquery/react web application that only fails when I try to access the heroku production deployment on IE 11. When built locally, the app runs fine on IE 11. All other browsers function as expected in both local and production environment.
The error I'm getting is 'SCRIPT1010: Expected identifier'. It points to this line in my main.js, {var n=e&&e.__esModule?function(){return e.default}:function(){return e};
I've attempted to add various polyfills to no effect. The fact that this fails only in the production version and specifically on IE 11 confuses me. If you any insight or can even assist with some tips as to how to better debug in IE, it would be greatly appreciated as I'm accustomed to using just chrome developer tools.
Thanks.
Edit: here is the dependency portion of my package.json:
"dependencies": {
"12factor-config": "^1.3.1",
"axios": "^0.17.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"body-parser": "^1.18.2",
"consolidate": "^0.14.5",
"express": "^4.15.3",
"gsap": "^1.20.4",
"handlebars": "^4.0.10",
"hoek": "^5.0.3",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"lodash": "^4.17.5",
"marked": "^0.3.17",
"newrelic": "^4.2.0",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-hot-loader": "^3.1.3",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"webpack": "^3.10.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^2.11.0"
},
I narrowed the problem down to the 'gsap' dependency, for some reason this was breaking production on IE11.
I have been using PhantomJS as the browser to run my karma tests using grunt-karma. I am now trying to switch to another browser, but I am getting an assortment of "Invalid Chai property" errors when running the tests, which seem to happen on lines using should assertions, such as "foo.should.be.a.function;" I have tried a number of things, but nothing fixes it, and there doesn't seem to be any preexisting issues addressing this. Here is my package and karma.config. Note that I've shortened both lists. I should also add that I have tried updating all testing-related modules to their latest versions, since I know some of them are a couple versions behind, but this had no positive effect, so I reverted.
// karma.config
frameworks: ['mocha', 'chai', 'sinon-chai'],
browsers: ['ChromeHeadless'],
// package.json
"devDependencies": {
"angular-mocks": "1.6.5",
"babel-core": "6.26.0",
"babel-plugin-syntax-async-functions": "6.13.0",
"babel-plugin-transform-exponentiation-operator": "6.24.1",
"babel-plugin-transform-regenerator": "6.26.0",
"babel-preset-env": "1.6.1",
"chai": "4.1.2",
"chai-as-promised": "7.1.1",
"grunt": "1.0.1",
"grunt-angular-templates": "1.1.0",
"grunt-babel": "6.0.0",
"grunt-cli": "1.2.0",
"grunt-contrib-watch": "1.0.0",
"grunt-karma": "2.0.0",
"grunt-mocha-istanbul": "5.0.2",
"grunt-mocha-test": "0.13.2",
"include-all": "^4.0.3",
"istanbul": "0.4.5",
"karma": "1.7.1",
"karma-babel-preprocessor": "7.0.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-mocha": "1.3.0",
"karma-ng-html2js-preprocessor": "1.0.0",
"karma-phantomjs-launcher": "1.0.4",
"karma-sinon": "1.0.5",
"karma-sinon-chai": "1.3.4",
"karma-spec-reporter": "0.0.31",
"mocha": "3.2.0",
"sinon": "4.5.0",
"sinon-chai": "3.0.0",
"updtr": "2.0.0"
}
With some help, I determined my issue. Using PhantomJS with tests such as
foo.should.be.a.function;
the test would pass without issue, but I believe this to be a fault of PhantomJS, since this is not the proper syntax for this assertion. It should be
foo.should.be.a('function');
After realizing this and making all the changes, all 'Invalid chai properties' tests passed in Chrome. PhantomJS has been allowing these invalid tests to run, so I am glad we are making the change.
Changed react and react-dom to 16.2.0 in my package JSON and receiving the following error.
Uncaught Error: Cannot find module "react/lib/ReactComponentTreeHook"
Have tried clearing my node_modules, reinstalling everything, starting with a fresh project and adding dependencies in small chunks to narrow down the issue, and trying just about every option already seen on stack overflow.
my package.json is as follows:
{
"name": "",
"version": "0.0.1",
"description": "",
"main": "index.js",
"repository": {
"type": "git",
"url": "..."
},
"scripts": {
"dev": "webpack -d --watch",
"build": "webpack -p"
},
"dependencies": {
"axios": "^0.17.1",
"body-parser": "^1.18.2",
"classnames": "^2.2.5",
"connect-mongo": "^2.0.0",
"cookie-parser": "^1.4.3",
"express": "^4.16.2",
"express-session": "^1.15.6",
"moment": "^2.19.3",
"mongoose": "^4.13.6",
"multer": "^1.3.0",
"node-sass": "^4.7.2",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"qs": "^6.5.1",
"react": "^16.2.0",
"react-click-outside": "^3.0.0",
"react-dom": "16.2.0",
"react-redux": "5.0.6",
"redux": "3.7.2",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^5.0.0",
"redux-thunk": "^2.2.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"redux-devtools": "^3.4.1",
"sass-loader": "^6.0.6",
"serve": "^6.4.1",
"style-loader": "^0.19.0",
"svg-sprite-webpack-plugin": "^1.1.0",
"svg-spritemap-webpack-plugin": "^1.0.3",
"url-loader": "^0.6.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"webpack": "^3.10.0"
},
"author": "",
"license": "ISC",
"homepage": ""
}
After placing a breakpoint at the line erroring out, it seems that the stack trace is coming form the import of react-dom, but if that is at the latest version matching react, i don't understand why i am having this issue.
Out of options that I can think of, would appreciate any help. Thanks.
Have tried clearing my node_modules, reinstalling everything
Remember that since NPM 5-th version it generates package lock file, without purging that reinstalling modules will not work appropriately.
Also check following - if some package has own dependency on old react package version, it will be installed into nested node_modules directory, and then everything is dependent on project/loaders structure. In come circumstance, invalid new or old package version will be loaded. In some npm packages, like graphql, special warning added for that case: "Maybe you have installed different version of package".
So, check other packages' versions, and maybe update them.
I have the following dependencies installed:
"dependencies": {
"express": "^4.13.4",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-redux": "^4.4.5",
"react-router": "^2.4.1",
"redux": "^3.5.2"
},
"devDependencies": {
"babel-core": "^6.9.0",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.5.0",
"eslint": "^2.11.1",
"eslint-plugin-react": "^5.1.1",
"react-hot-loader": "^1.3.0",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.1.0",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0"
}
}
The react-hot-loader used to work, where when I make a save to a change, it would reload automatically and update the application. But not it does not work anymore, so I would have to refresh the whole application manually to update it.
What could be causing the issue? How could I go about fixing it? Not sure if this would be source of the problem, but I switch on and off between two different projects, one being React Native and another being ReactJS. But after getting into React Native, the react-hot-loader on ReactJS just stopped working.
Thank you in advance!
react-native shouldn't affect the react-hot-loader in this project.
It's hard to tell without seeing any code as to get rhl to work the js needs to be created and rendered in the right way.
is this a server-side app or a client-side only app? this has some bearing too.
I have an example app, react-lego which shows how to add the latest version of react-hot-loader v3
hope it helps