I use in project react library with typescript and ES6 version of javascript. Some ES6 features are not supported by IE11 so I have to use Babel, however my application isn't correctly loaded in IE11
It throws a syntax error here
What cause this problem? This should be solved using this package transform-es2015-arrow-functions or is there some different problem which I overlooked?
package.json
{
"name": "SkodaAuto.C3PO.AdminConsole.Web",
"private": true,
"version": "0.0.0",
"devDependencies": {
"#babel/core": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#types/webpack": "2.2.15",
"#types/webpack-env": "1.13.0",
"aspnet-webpack": "2.0.1",
"aspnet-webpack-react": "3.0.0",
"awesome-typescript-loader": "3.2.1",
"babel-core": "^6.17.0",
"babel-loader": "^8.0.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-eval": "^6.22.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"css-loader": "0.28.4",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "^2.0.0",
"less": "3.7.1",
"less-loader": "4.1.0",
"node-noop": "1.0.0",
"style-loader": "0.18.2",
"typescript": "3.0.1",
"url-loader": "^1.1.1",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0"
},
"dependencies": {
"#babel/polyfill": "^7.0.0",
"#progress/kendo-data-query": "1.4.1",
"#progress/kendo-drawing": "1.5.7",
"#progress/kendo-react-buttons": "1.2.0",
"#progress/kendo-react-dateinputs": "1.2.0",
"#progress/kendo-react-dialogs": "1.2.0",
"#progress/kendo-react-dropdowns": "1.2.0",
"#progress/kendo-react-grid": "1.2.0",
"#progress/kendo-react-inputs": "1.2.0",
"#progress/kendo-react-intl": "1.2.0",
"#progress/kendo-react-layout": "1.2.0",
"#progress/kendo-react-pdf": "1.2.0",
"#progress/kendo-theme-default": "2.54.1",
"#telerik/kendo-intl": "^1.4.2",
"#types/deep-equal": "1.0.1",
"#types/history": "4.6.0",
"#types/prop-types": "15.5.3",
"#types/react": "16.4.2",
"#types/react-dom": "16.0.7",
"#types/react-hot-loader": "3.0.3",
"#types/react-redux": "4.4.45",
"#types/react-router": "4.0.12",
"#types/react-router-dom": "4.0.5",
"#types/react-router-redux": "5.0.3",
"babel-polyfill": "^6.26.0",
"bootstrap-less-port": "0.3.0",
"deep-equal": "1.0.1",
"history": "4.6.3",
"jquery": "3.0.0",
"query-string": "6.1.0",
"react": "16.4.2",
"react-appinsights": "1.0.4",
"react-dom": "16.4.2",
"react-hot-loader": "3.0.0-beta.7",
"react-redux": "5.0.5",
"react-resize-detector": "3.1.1",
"react-router-dom": "4.1.1",
"react-router-redux": "5.0.0-alpha.6",
"redux": "3.7.1",
"redux-form": "7.4.2",
"redux-logger": "3.0.6",
"redux-thunk": "2.2.0",
"serialize-error": "2.1.0"
},
"scripts": {
"build": "webpack --config webpack.config.js",
"build.vendor": "webpack --config webpack.config.vendor.js"
}}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const clientBundleOutputDir = './wwwroot/dist';
module.exports = {
devtool: 'inline-source-map',
entry: { 'main-client': './ClientApp/boot-client.tsx' },
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
modules: [
'./node_modules',
'./ClientApp'
]
},
mode: `development`,
output: {
filename: '[name].js',
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{
test: /\.tsx?$/, include: [path.resolve(__dirname, clientBundleOutputDir)],
use: [{
loader: 'babel-loader',
options: {
presets: ['#babel-preset-env', '#babel/preset-react', 'es2015', "#babel/typescript"],
plugins: ["#babel/proposal-class-properties",
"#babel/proposal-object-rest-spread",
"transform-eval",
'transform-es2015-arrow-functions']
}
}]
},
{ test: /\.json$/, loader: "json-loader" },
{ test: /\.tsx?$/, exclude: /(node_modules|bower_components)/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
{
test: /\.less$/, use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: 'less-loader' // compiles Less to CSS
}]
},
{
test: /\.(woff|woff2|ttf|eot)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
}
}
]
}
]
}};
Related
Got this error after upgrading webpack from 4 to 5.
I saw this error on many other questions, but nothing seems to solve my issue.
This are my dependencies:
"dependencies": {
"#babel/polyfill": "7.4.3",
"#bootstrap-styled/color": "^1.0.9",
"#bootstrap-styled/css-mixins": "^2.0.7",
"#bootstrap-styled/css-utils": "^1.3.2",
"#bootstrap-styled/navigation-bar": "^1.9.5",
"#bootstrap-styled/provider": "^1.5.1",
"#bootstrap-styled/v4": "^3.1.5",
"bootstrap-styled": "^2.5.2",
"chalk": "2.4.2",
"compression": "1.7.4",
"connected-react-router": "6.4.0",
"cross-env": "5.2.0",
"draft-js": "^0.11.7",
"express": "4.16.4",
"fontfaceobserver": "2.1.0",
"history": "4.9.0",
"hoist-non-react-statics": "3.3.0",
"immer": "9.0.6",
"intl": "1.2.5",
"invariant": "2.2.4",
"ip": "1.1.5",
"js-sha512": "^0.8.0",
"kefir": "^3.8.6",
"lodash": "^4.17.21",
"minimist": "^1.2.5",
"prop-types": "15.7.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-helmet": "6.0.0-beta",
"react-intl": "2.8.0",
"react-redux": "7.0.2",
"react-router-dom": "^5.2.0",
"redux": "4.0.1",
"redux-saga": "1.0.2",
"reselect": "4.0.0",
"sanitize.css": "8.0.0",
"shortid": "^2.2.15",
"showdown": "^1.9.1",
"styled-components": "4.2.0"
},
"devDependencies": {
"#babel/cli": "7.4.3",
"#babel/core": "7.4.3",
"#babel/plugin-proposal-class-properties": "7.4.0",
"#babel/plugin-syntax-dynamic-import": "7.2.0",
"#babel/plugin-transform-modules-commonjs": "7.4.3",
"#babel/plugin-transform-react-constant-elements": "7.2.0",
"#babel/plugin-transform-react-inline-elements": "7.2.0",
"#babel/preset-env": "7.4.3",
"#babel/preset-react": "7.0.0",
"#babel/register": "7.4.0",
"add-asset-html-webpack-plugin": "3.1.3",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.5",
"babel-plugin-dynamic-import-node": "2.2.0",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-styled-components": "1.10.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
"circular-dependency-plugin": "5.0.2",
"compare-versions": "3.4.0",
"compression-webpack-plugin": "6.0.2",
"coveralls": "3.0.3",
"css-loader": "2.1.1",
"eslint": "5.16.0",
"eslint-config-airbnb": "17.1.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-config-prettier": "4.1.0",
"eslint-import-resolver-webpack": "0.11.1",
"eslint-plugin-import": "2.17.2",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-prettier": "3.0.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-react-hooks": "1.6.0",
"eslint-plugin-redux-saga": "1.0.0",
"file-loader": "3.0.1",
"html-loader": "0.5.5",
"html-webpack-plugin": "^5.4.0",
"image-webpack-loader": "4.6.0",
"imports-loader": "0.8.0",
"jest-cli": "26.4.2",
"jest-dom": "3.1.3",
"jest-styled-components": "^6.3.3",
"lint-staged": "^11.0.0",
"ngrok": "3.1.1",
"node-plop": "^0.26.2",
"null-loader": "0.1.1",
"plop": "^2.7.4",
"pre-commit": "1.2.2",
"prettier": "1.17.0",
"react-app-polyfill": "0.2.2",
"react-test-renderer": "16.8.6",
"react-testing-library": "6.1.2",
"rimraf": "2.6.3",
"shelljs": "0.8.3",
"style-loader": "0.23.1",
"stylelint": "13.13.1",
"stylelint-config-recommended": "2.2.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.6.0",
"svg-url-loader": "2.3.2",
"terser-webpack-plugin": "4.2.2",
"url-loader": "1.1.2",
"webpack": "^5.60.0",
"webpack-cli": "^4.9.1",
"webpack-dev-middleware": "^5.2.1",
"webpack-dev-server": "^4.3.1",
"webpack-hot-middleware": "^2.25.1",
"webpack-pwa-manifest": "^4.3.0",
"whatwg-fetch": "3.0.0"
}
}
And this is my webpack config:
/**
* COMMON WEBPACK CONFIGURATION
*/
const path = require('path');
const webpack = require('webpack');
module.exports = options => ({
mode: options.mode,
entry: options.entry,
output: Object.assign(
{
// Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
},
options.output,
), // Merge with env dependent settings
optimization: options.optimization,
module: {
rules: [
{
test: /\.jsx?$/, // Transform all .js and .jsx files required somewhere with Babel
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: options.babelQuery,
},
},
{
// Preprocess our own .css files
// This is the place to add your own loaders (e.g. sass/less etc.)
// for a list of loaders, see https://webpack.js.org/loaders/#styling
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
// Preprocess 3rd party .css files located in node_modules
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(eot|otf|ttf|woff|woff2)$/,
use: 'file-loader',
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
// Inline files smaller than 10 kB
limit: 10 * 1024,
noquotes: true,
},
},
],
},
{
test: /\.(jpg|png|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// Inline files smaller than 10 kB
limit: 10 * 1024,
},
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
enabled: false,
// NOTE: mozjpeg is disabled as it causes errors in some Linux environments
// Try enabling it in your environment by switching the config to:
// enabled: true,
// progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '65-90',
speed: 4,
},
},
},
],
},
{
test: /\.html$/,
use: 'html-loader',
},
{
test: /\.(mp4|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
},
},
},
],
},
plugins: options.plugins.concat([
// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; Terser will automatically
// drop any unreachable code.
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
}),
]),
resolve: {
modules: ['node_modules', 'app'],
extensions: ['.js', '.jsx', '.react.js'],
mainFields: ['browser', 'jsnext:main', 'main'],
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
});
Not sure what is missing. I checked on github (https://github.com/webpack/webpack/tree/main/lib/node) And this NodeOutputFileSystem does not seems to exist.
Any ideas?
The problem was the version of webpack-dev-plugin, I had to update to 5.2.1 With that, the app is running fine again with webpack 5.
No further configuration change was needed in my case
I'm getting generated js file in browser when I'm doing npm start.
I'm using
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
"webpack-manifest-plugin": "^2.0.4"
Below is my webpack.config.js.
Please tell me what I'm doing wrong here
I'm getting generated js file on browser when I do npm start.
I'm using
"webpack": "^4.29.6"
"webpack-cli": "^3.3.0"
"webpack-dev-server": "^3.2.1"
Below is my webpack.config.js
Please tell me what I'm doing wrong here.
const cssFilename = 'static/css/style.[hash].css';
module.exports = {
entry: './src/index.js',
externals: [nodeExternals()],
mode: "production",
resolve: {
extensions: ['.js', '.json', '.jsx', '.css', '.svg']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
include: path.resolve(__dirname, 'src'),
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/env', '#babel/react']
}
}
},
{
test: /\.css?$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components)/,
use: ['raw-loader','style-loader','to-string-loader','css-loader']
}
]
},
devtool: 'inline-source-map',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'static/js/bundle.[hash].js',
chunkFilename: 'static/js/bundle.[hash].js',
publicPath: './'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
filename: './index.html',
template: './public/index.html'
})
]
};
Package.json
{
"name": "demo",
"version": "1.0.0",
"description": "demo",
"private": true,
"jest": {
"collectCoverageFrom": [
"src/Actions/"
],
"coverageThreshold": {
"global": {
"branches": 10,
"functions": 10,
"lines": 10,
"statements": 10
}
}
},
"scripts": {
"watch": "webpack --watch",
"start": "webpack-dev-server",
"build": "webpack",
"test": "set CI=true &&jest --coverage"
},
"homepage": ".",
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.3",
"#babel/plugin-proposal-class-properties": "^7.3.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.2.3",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "9.0.0",
"babel-loader": "^8.0.5",
"babel-register": "^6.26.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.5.0",
"jest-environment-enzyme": "^7.0.1",
"jest-enzyme": "^7.0.1",
"mini-css-extract-plugin": "^0.5.0",
"raw-loader": "^0.5.1",
"react-svg-loader": "^2.1.0",
"source-map-loader": "^0.2.4",
"to-string-loader": "^1.1.5",
"ts-jest": "^23.10.1",
"typescript": "^3.0.3",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
"webpack-manifest-plugin": "^2.0.4"
},
"exclude": [
"node_modules"
],
"dependencies": {
"axios": "^0.18.0",
"axios-mock-adapter": "^1.16.0",
"babel-preset-react-app": "^7.0.2",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"file-saver": "^1.3.8",
"lodash": "^4.17.10",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-loader": "^3.0.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-redux": "^5.1.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack-node-externals": "^1.7.2"
}
}
I have been through many threads to solve this issue but unfortunately non of them is working.
I am trying to import react-share like this
import {
FacebookShareButton,
GooglePlusShareButton,
TwitterShareButton,
WhatsappShareButton,
FacebookIcon,
TwitterIcon,
WhatsappIcon
} from 'react-share';
"use strict";
require('./../../../assets/styles/components/thread.less');
//var reactShare = require('react-share');
var React = require('react');
var ReactDOM = require('react-dom');
var Fluxxor = require('fluxxor');
var _ = require("lodash");
var FluxMixin = Fluxxor.FluxMixin(React);
var StoreWatchMixin = Fluxxor.StoreWatchMixin;
But i am receiving the error of
syntaxerro: import declarations may only appear at top level of a module
I have installed babel and have performed all the suggestions given in threads but not been able to solve the issue
For the reference my webpack.config.js file looks like this:
var path = require("path");
var webpack = require("webpack");
module.exports = {
cache: true,
devtool: 'hidden-source-map',
entry: {
microaudio: "./reactFrontend/js/main",
notsupported: "./reactFrontend/js/notsupported",
sharerender: "./reactFrontend/js/shareRender",
privacyDeclaration: "./reactFrontend/js/privacyDeclaration",
legal: "./reactFrontend/js/legal"
},
output: {
path: path.join(__dirname, "dist"),
publicPath: "frontend/",
filename: "[name].js",
chunkFilename: "[chunkhash].js"
},
node: {
fs: "empty"
},
module: {
loaders: [{
test: /\.jsx$/,
loader: "jsx-loader?insertPragma=React.DOM&harmony"
}, {
test: /\.json/,
loader: "json-loader"
}, {
test: /\.less/,
loader: "style-loader!css-loader!autoprefixer-loader?{browsers:['last 3 versions', 'Android >= 4', 'safari >= 4']}!less-loader"
}, {
test: /\.tpl/,
loader: "ejs-loader"
}, {
test: /\.woff(\?\S*)?$/,
loader: "url-loader?prefix=/font&limit=1000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?\S*)?$/,
loader: "url-loader?prefix=/font&limit=1000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?\S*)?$/,
loader: "file-loader?prefix=/font"
}, {
test: /\.eot(\?\S*)?$/,
loader: "file-loader?prefix=/font"
}, {
test: /\.svg(\?\S*)?$/,
loader: "url-loader?limit=1000000&mimetype=image/svg+xml"
}, {
test: /\.png$/,
loader: "url-loader?limit=10000&mimetype=image/png"
}, {
test: /\.gif$/,
loader: "url-loader?limit=10000&mimetype=image/gif"
}, {
test: /\.jpg$/,
loader: "url-loader?limit=10000&mimetype=image/jpeg"
}]
},
plugins: [
//setup momentjs context to only include languages we do need!
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|en/)
],
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx"],
alias: {
av: __dirname + "/reactFrontend/js/vendors/aurora/aurora",
"ogg.js": __dirname + "/reactFrontend/js/vendors/aurora/ogg",
"vorbis.js": __dirname + "/reactFrontend/js/vendors/aurora/vorbis"
}
},
babel: {
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
}
};
and my package.json file looks like this
{
"name": "audiyoh-frontend",
"version": "1.0.0",
"main": "./src/js/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"test-martin-local": "SET NODE_ENV=development&& SET NODE_APP_INSTANCE=martin&& gulp test-bs",
"test-robert-local": "SET NODE_ENV=development&& SET NODE_APP_INSTANCE=robert&& gulp test-bs",
"wds": "webpack-dev-server --https --inline --hot --color --history-api-fallback"
},
"author": "atroo GbR",
"contributors": [
{
"name": "Martin Foerster",
"email": "martin#atroo.de"
},
{
"name": "Robert Krüger",
"email": "robert#atroo.de"
}
],
"license": "UNLICENSED",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"blanket": "^1.1.6",
"bootstrap-webpack": "0.0.3",
"chai": "^3.3.0",
"coveralls": "^2.11.2",
"css-loader": "^0.7.0",
"ejs-loader": "^0.1.0",
"file-loader": "^0.8.1",
"glob": "^4.3.5",
"gulp": "^3.8.6",
"gulp-debug": "^2.1.2",
"gulp-mocha": "^2.0.0",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.0.1",
"gulp-rimraf": "^0.2.0",
"gulp-spawn-mocha": "^2.0.1",
"gulp-util": "^3.0.0",
"i18next-resource-store-loader": "0.0.2",
"imports-loader": "^0.6.5",
"json-loader": "^0.5.1",
"jsx-loader": "^0.12.2",
"less": "^2.2.0",
"less-loader": "^2.0.0",
"mocha": "^2.1.0",
"mocha-lcov-reporter": "^0.0.1",
"node-notifier": "^4.4.0",
"run-sequence": "^1.1.5",
"selenium-webdriver": "^2.47.0",
"sha1": "^1.1.1",
"socket.io": "^1.3.7",
"style-loader": "^0.8.3",
"url-loader": "^0.5.5",
"wasm-loader": "1.1.0",
"webpack": "^1.15.0",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^4.1.4",
"webpack-stream": "^3.0.1",
"worker-loader": "^0.5.7",
"yargs": "^3.26.0"
},
"dependencies": {
"autoprefixer-loader": "^3.2.0",
"av": "^0.4.9",
"backbone": "^1.1.2",
"backbone.wreqr": "^1.3.1",
"bootstrap": "^3.3.2",
"color": "^0.11.3",
"crypto-js": "^3.1.2-5",
"exports-loader": "^0.6.3",
"flux": "^2.0.0",
"fluxxor": "^1.7.3",
"get-user-media-promise": "^1.1.1",
"i18next-client": "^1.7.7",
"jquery": "^2.1.1",
"keymirror": "~0.1.0",
"less-to-json-loader": "^1.0.0",
"lodash": "^3.8.0",
"modernizr": "^3.3.1",
"modernizr-loader": "0.0.4",
"moment": "^2.9.0",
"node-uuid": "^1.4.2",
"normalize.css": "^3.0.2",
"object-assign": "^1.0.0",
"ogg.js": "^0.1.0",
"promise": "^6.1.0",
"react": "^0.14.5",
"react-bootstrap": "^0.21.2",
"react-dom": "^0.14.5",
"react-router": "^2.3.0",
"react-tools": "^0.12.2",
"scriptjs": "^2.5.8",
"socket.io-client": "^1.4.5",
"tunajs": "^0.4.5",
"velocity-animate": "^1.2.1",
"vorbis.js": "^0.1.1",
"web-audio-daw": "^2.3.1"
}
}
i created a .babelrc file as well (manually in the root where webpack.config.js is)
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"],
}
I am new in ReactJs so i am not having a good grasp on the requirements of such. Please help! Thanks
jsx-loader has been deprecated for at least 3 years.
You'll want to actually use babel-loader for JSX files if you need imports and other ES6 syntax implemented in the last three years to work.
I'm trying to use ASP.NET Core 2 with Webpack 4 and React and I would love hot reloading. Problem is; when I try to make a change to one of the files it comes back with this error in Chrome:
:8100/dist/__webpack_hmr Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING.
My package.json:
{
"name": "ui",
"private": true,
"version": "0.1.0",
"license": "UNLICENSED",
"description": "Application",
"devDependencies": {
"#types/history": "4.6.0",
"#types/jquery": "3.3.1",
"#types/jsonwebtoken": "^7.2.6",
"#types/lodash": "4.14.105",
"#types/moment": "2.13.0",
"#types/query-string": "^5.1.0",
"#types/react": "^16.0.40",
"#types/react-dates": "16.0.5",
"#types/react-dom": "^15.5.1",
"#types/react-redux": "^4.4.45",
"#types/react-router": "4.0.12",
"#types/react-router-dom": "4.0.5",
"#types/react-router-redux": "5.0.3",
"#types/webpack": "2.2.15",
"#types/webpack-env": "1.13.0",
"airbnb-prop-types": "2.8.1",
"aspnet-prerendering": "3.0.1",
"aspnet-webpack": "2.0.1",
"aspnet-webpack-react": "3.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "4.0.0",
"css-loader": "^0.28.11",
"domain-task": "3.0.3",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "1.1.11",
"glob": "^7.1.2",
"history": "4.6.3",
"install": "0.10.4",
"jquery": "3.2.1",
"jquery-mask-plugin": "1.14.15",
"jsonwebtoken": "^8.2.0",
"lodash": "4.17.5",
"moment": "2.21.0",
"muicss": "0.9.38",
"myriad-font": "0.0.2",
"node-noop": "1.0.0",
"node-sass": "^4.7.2",
"numbro": "2.0.5",
"path": "0.12.7",
"popper.js": "1.14.1",
"postcss-cssnext": "^3.1.0",
"postcss-loader": "2.1.1",
"prop-types": "15.6.1",
"query-string": "^6.0.0",
"react": "^16.2.0",
"react-addons-css-transition-group": "15.6.2",
"react-cookie": "^2.1.4",
"react-dom": "^16.2.0",
"react-moment": "0.7.0",
"react-moment-proptypes": "1.5.0",
"react-redux": "^5.0.7",
"react-router-dom": "4.1.1",
"react-router-redux": "^5.0.0-alpha.9",
"redux": "3.7.1",
"redux-thunk": "2.2.0",
"rxjs": "5.5.7",
"sass-loader": "^6.0.7",
"sfcookies": "^1.0.2",
"source-map-loader": "0.2.3",
"style-loader": "^0.18.2",
"tslint": "^5.9.1",
"tslint-react": "^3.5.1",
"typescript": "^2.7.2",
"url-loader": "1.0.1",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.13",
"webpack-hot-middleware": "^2.21.2",
"webpack-merge": "4.1.2"
},
"scripts": {
"compile-vendor": "webpack --config webpack.config.vendor.js",
"compile-client": "webpack --config webpack.config.js"
},
"dependencies": {
"#types/react-hot-loader": "^3.0.6",
"react-hot-loader": "^3.1.1"
}
}
And my webpack.config.js:
"use strict";
const path = require('path');
const webpack = require('webpack');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const merge = require('webpack-merge');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const glob = require('glob');
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
// Configuration in common to both client-side and server-side bundles
const sharedConfig = () => ({
mode: !(env && env.prod) ? 'development' : 'production',
stats: { modules: false },
resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
output: {
filename: '[name].js',
publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{
test: /\.tsx?$/,
include: /ClientApp/,
use: 'awesome-typescript-loader?silent=false'
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: "file-loader",
options: {
limit: 50000,
name: "./img/[name].[ext]"
}
},
{
// Match woff2 in addition to patterns like .woff?v=1.1.1.
test: /\.(woff|woff2|ttf)(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
options: {
limit: 50000,
name: "./fonts/[name].[ext]"
}
}
]
},
performance: {
hints: false
},
devtool: 'cheap-module-source-map',
plugins: [new CheckerPlugin()]
});
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig(), {
entry: {
"main-client": ['./ClientApp/boot-client.tsx'].concat(glob.sync('./ClientApp/img/**/*.svg'))
},
module: {
rules: [
{
test: /\.(scss|css)$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
importLoaders: 1
}
},
"postcss-loader"
]
}),
exclude: /node_modules/
}
]
},
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new ExtractTextPlugin("site.css"),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
}),
new webpack.NamedModulesPlugin()
]
});
return [clientBundleConfig];
};
I am trying to use jQuery inside angular controller but I am getting above error
here is my package.json
{
"dependencies": {
"angular": "^1.6.2",
"angular-animate": "^1.6.8",
"angular-aria": "^1.6.8",
"angular-material": "^1.1.5",
"angular-messages": "^1.6.8",
"angular-ui-router": "1.0.0-beta.3",
"jquery": "^3.2.1"
},
"devDependencies": {
"#types/angular": "^1.6.6",
"#types/angular-mocks": "^1.5.9",
"#types/angular-ui-router": "^1.1.36",
"#types/jquery": "^2.0.40",
"angular-mocks": "^1.6.2",
"autoprefixer": "^6.7.3",
"babel-core": "^6.23.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.3.2",
"babel-plugin-istanbul": "^4.0.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.22.0",
"browser-sync": "^2.18.8",
"browser-sync-spa": "^1.0.3",
"css-loader": "^0.26.1",
"del": "^2.2.2",
"es6-shim": "^0.35.3",
"eslint": "^3.19.0",
"eslint-config-angular": "^0.5.0",
"eslint-config-xo-space": "^0.15.0",
"eslint-loader": "^1.6.1",
"eslint-plugin-angular": "^1.6.1",
"eslint-plugin-babel": "^4.0.1",
"extract-text-webpack-plugin": "^2.0.0-rc.3",
"gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
"gulp-angular-filesort": "^1.1.1",
"gulp-angular-templatecache": "^2.0.0",
"gulp-filter": "^5.0.0",
"gulp-htmlmin": "^3.0.0",
"gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
"gulp-insert": "^0.5.0",
"gulp-ng-annotate": "^2.0.0",
"gulp-sass": "^3.1.0",
"gulp-util": "^3.0.8",
"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.28.0",
"jasmine": "^2.5.3",
"json-loader": "^0.5.4",
"karma": "^1.4.1",
"karma-angular-filesort": "^1.0.2",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.1.0",
"karma-junit-reporter": "^1.2.0",
"karma-ng-html2js-preprocessor": "^1.0.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-webpack": "^2.0.2",
"ng-annotate-loader": "^0.2.0",
"node-sass": "^4.5.0",
"phantomjs-prebuilt": "^2.1.14",
"postcss-loader": "^1.3.1",
"sass-loader": "^6.0.1",
"style-loader": "^0.13.1",
"webpack": "^2.2.1",
"webpack-fail-plugin": "^1.0.5"
},
"scripts": {
"build": "gulp",
"serve": "gulp serve",
"serve:dist": "gulp serve:dist",
"test": "gulp test",
"test:auto": "gulp test:auto"
},
"eslintConfig": {
"globals": {
"expect": true
},
"root": true,
"env": {
"browser": true,
"jasmine": true
},
"parser": "babel-eslint",
"extends": [
"xo-space/esnext"
]
}
}
and my webpack.config.js is
const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FailPlugin = require('webpack-fail-plugin');
const autoprefixer = require('autoprefixer');
module.exports = {
module: {
loaders: [{
test: /\.json$/,
loaders: [
'json-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
enforce: 'pre'
},
{
test: /\.(css|scss)$/,
loaders: [
'style-loader',
'css-loader',
'sass-loader',
'postcss-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
loaders: [
'ng-annotate-loader',
'babel-loader'
]
},
{
test: /\.html$/,
loaders: [
'html-loader'
]
}
]
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
FailPlugin,
new HtmlWebpackPlugin({
template: conf.path.src('index.html')
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: () => [autoprefixer]
},
debug: true
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
],
devtool: 'source-map',
output: {
path: path.join(process.cwd(), conf.paths.tmp),
filename: 'index.js'
},
entry: `./${conf.path.src('index')}`
};
in the above webpack config file I am setting jQuery to window object. But inside controller i am unable to access it. after doing the gulp serve, in the lint errors the above error is showing.