Related
I'm trying to run unit tests with generating code coverage report, but I'm getting warnings and an error related to some node_modules, how I can fix it? Also if I'm removing express from externals property I see warning message for this dependency and error message for grcp dependency
webpack base config
const path = require("path")
const nodeExternals = require("webpack-node-externals");
const resolve = dir => path.join(__dirname, "..", dir)
const createLintingRule = () => ({
test: /\.(js)$/,
loader: "eslint-loader",
enforce: "pre",
include: [resolve("server"), resolve("test")],
options: {
formatter: require("eslint-friendly-formatter"),
}
})
module.exports = {
context: path.resolve(__dirname, "../"),
target: "node",
node: {
__filename: true,
__dirname: true
},
externals: { ...nodeExternals(),
express: "express",
bufferutil: "commonjs bufferutil",
"utf-8-validate": "commonjs utf-8-validate",
memcpy: "bytebuffer",
encoding: "node-fetch",
grpc: "grpc",
"dtrace-provider": "dtrace-provider",
"#opencensus": "#opencensus",
},
output: {
path: path.join(__dirname, "../dist"),
filename: "server.js"
},
devServer: {
inline: false,
contentBase: "./dist",
},
resolve: {
extensions: ['.ts', '.tsx', '.mjs', '.js', '*', '.json', '.gql', '.graphql']
},
module: {
rules: [
createLintingRule(),
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
// resolve: {
// fullySpecified: false,
// },
},
{
test: /\.html$/i,
loader: "html-loader",
},
{
test: /\.js$/,
include: path.resolve("src"),
loader: "istanbul-instrumenter-loader"
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
sourceMaps: true,
plugins: [
"#babel/plugin-transform-regenerator",
"#babel/plugin-transform-named-capturing-groups-regex"
],
presets: [
[
"#babel/preset-env", {
useBuiltIns: "entry",
shippedProposals: true,
corejs: 3,
}
],
],
}
},
{ test: /\.ts$/, use: 'ts-loader' }
],
},
}
package.json
{
"name": "zing-graphql",
"version": "1.0.0",
"scripts": {
"build": "webpack --config build/webpack.prod.conf.js --progress",
"dev": "webpack --config build/webpack.dev.conf.js",
"dev:mock": "MOCK=ALL webpack --config build/webpack.dev.conf.js",
"start": "npm run dev",
"clean": "rm -rf dist/ node_modules/",
"lint": "./lint.sh",
"test": "nyc test/test.sh",
"testspec": "test/test.sh",
"tdd": "mochapack --webpack-config build/webpack.prod.conf.js --require test/setup.js --watch 'server/v2/**/*.spec.js'",
"graphql:codegen": "graphql-codegen"
},
"engines": {
"node": ">= 10.0.0"
},
"description": "ZING GraphQL service",
"main": "server/index.js",
"repository": "git#github.com:zenoss/graphql.git",
"author": "Zenoss <dev#zenoss.com>",
"private": true,
"resolutions": {
"**/#opencensus/core": "^0.0.22",
"**/#types/continuation-local-storage": "3.2.1",
"**/grpc": "^1.24.4",
"**/grpc-create-metadata": "3.0.0"
},
"dependencies": {
"#axelspringer/graphql-google-pubsub": "^2.1.0",
"#elastic/elasticsearch": "7",
"#google-cloud/opentelemetry-cloud-trace-exporter": "^1.0.0",
"#google-cloud/pubsub": "^2.11.0",
"#graphql-codegen/cli": "^1.20.1",
"#graphql-codegen/typescript": "^1.21.0",
"#graphql-codegen/typescript-resolvers": "^1.18.2",
"#opencensus/core": "^0.0.22",
"#opencensus/nodejs": "^0.0.22",
"#opentelemetry/api": "^1.0.4",
"#opentelemetry/auto-instrumentations-node": "^0.27.2",
"#opentelemetry/core": "^1.0.1",
"#opentelemetry/exporter-jaeger": "^1.0.1",
"#opentelemetry/exporter-trace-otlp-http": "^0.27.0",
"#opentelemetry/propagator-grpc-census-binary": "^0.25.1",
"#opentelemetry/propagator-jaeger": "^1.0.1",
"#opentelemetry/resources": "^1.0.1",
"#opentelemetry/sdk-node": "^0.27.0",
"#opentelemetry/sdk-trace-base": "^1.0.1",
"#opentelemetry/sdk-trace-node": "^1.0.1",
"#opentelemetry/semantic-conventions": "^1.0.1",
"#stackpath/node-grpc-error-details": "^1.0.0",
"#types/continuation-local-storage": "3.2.1",
"#zenoss/opencensus-node-exporter": "^0.0.4",
"apollo-datasource": "^0.9.0",
"apollo-server": "^2.25.3",
"apollo-server-express": "^2.18.2",
"apollo-server-plugin-response-cache": "^0.5.2",
"bunyan": "~1.8.12",
"bunyan-gke-stackdriver": "^0.1.2",
"clone": "^2.1.2",
"cookie-parser": "^1.4.4",
"cors": "^2.8.4",
"dataloader": "^2.0.0",
"dompurify": "2.0.17",
"express": "^4.16.2",
"google-auth-library": "^7.11.0",
"google-protobuf": "^4.0.0-rc.2",
"graphql": "^14.0.2",
"graphql-iso-date": "^3.5.0",
"graphql-middleware": "^3.0.2",
"graphql-schema-modules": "^0.0.4",
"graphql-subscriptions": "^1.2.0",
"graphql-tools": "^4.0.5",
"graphql-type-json": "^0.2.0",
"grpc": "^1.24.4",
"http": "^0.0.1-security",
"jsdom": "15.2.1",
"json-stable-stringify": "^1.0.1",
"lodash": "^4.17.21",
"nanoid": "^3.1.31",
"opencensus-exporter-stackdriver": "zenoss/opencensus-exporter-stackdriver#v0.1.0",
"pb-util": "^0.1.2",
"phonetic": "^0.1.1",
"protobufjs": "^6.8.8",
"prufer": "^0.0.1",
"subscriptions-transport-ws": "^0.9.18",
"url-parse": "1.5.7",
"workerpool": "^6.1.4",
"yamr-js": "zenoss/yamr-js#4.6.4",
"zing-grpc-clients": "zenoss/zing-proto#v11.16.2"
},
"devDependencies": {
"#babel/core": "^7.17.5",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-transform-modules-commonjs": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.17.0",
"#babel/preset-env": "^7.16.11",
"apollo-server-testing": "^2.9.13",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.2.3",
"babel-plugin-istanbul": "^6.1.1",
"babel-plugin-dynamic-import-node": "^2.3.0",
"chai": "^4.2.0",
"clean-webpack-plugin": "^0.1.19",
"eslint": "^7.19.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-mocha": "^9.0.0",
"html-loader": "^3.1.0",
"istanbul-instrumenter-loader": "^2.0.0",
"jsonwebtoken": "^8.5.1",
"mocha": ">=6 <9",
"mochapack": "^2.0.6",
"nyc": "^15.1.0",
"sinon": "^7.5.0",
"sinon-chai": "^3.3.0",
"start-server-webpack-plugin": "^2.2.5",
"ts-loader": "^8.0.17",
"typescript": "^4.1.5",
"webpack": "^4.0.0",
"webpack-cli": "^4.5.0",
"webpack-merge": "^5.7.3",
"webpack-node-externals": "^2.5.2"
}
}
pic with errors
When I run rm -rf src/dist && yarn build && electron-builder build --publish never on git bash on windows, to package my electron/react app, I get the following error message:
ERROR in ./src/pages/Task.js 135:4
[1] Module parse failed: Unexpected token (135:4)
[1] You may need an appropriate loader to handle this file type, currently no lo
aders are configured to process this file. See https://webpack.js.org/concepts#l
oaders
[1] |
[1] | return (
[1] > <div className={`Task ${isMinimized ? 'FlexIt' : ''}`}>
[1] | <div className="Btns">
[1] | <img
[1] # ./src/App.tsx 11:0-32 26:13-17
[1] # ./src/index.tsx 7:0-24 8:26-29
[1]
[1] webpack 5.5.1 compiled with 4 errors in 12401 ms
Any ideas about the reason? This is my 1st electron app, and 2nd react app, and I don't really know what webpack is.
My package.json file:
{
"name": "my-app",
"productName": "myApp",
"description": "Electron react app",
"scripts": {
"build": "concurrently \"yarn build:main\" \"yarn build:renderer\"",
"build:main": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.main.prod.babel.js",
"build:renderer": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.renderer.prod.babel.js",
"rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir src",
"lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx",
"package": "rm -rf src/dist && yarn build && electron-builder build --publish never",
"postinstall": "node -r #babel/register .erb/scripts/CheckNativeDep.js && electron-builder install-app-deps && yarn cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.babel.js && opencollective-postinstall && yarn-deduplicate yarn.lock",
"start": "node -r #babel/register ./.erb/scripts/CheckPortInUse.js && yarn start:renderer",
"start:main": "cross-env NODE_ENV=development electron -r ./.erb/scripts/BabelRegister ./src/main.dev.ts",
"start:renderer": "cross-env NODE_ENV=development webpack serve --config ./.erb/configs/webpack.config.renderer.dev.babel.js",
"test": "jest"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"cross-env NODE_ENV=development eslint --cache"
],
"{*.json,.{babelrc,eslintrc,prettierrc}}": [
"prettier --ignore-path .eslintignore --parser json --write"
],
"*.{css,scss}": [
"prettier --ignore-path .eslintignore --single-quote --write"
],
"*.{html,md,yml}": [
"prettier --ignore-path .eslintignore --single-quote --write"
]
},
"build": {
"productName": "ElectronReact",
"appId": "org.erb.ElectronReact",
"files": [
"dist/",
"node_modules/",
"index.html",
"main.prod.js",
"main.prod.js.map",
"package.json"
],
"afterSign": ".erb/scripts/Notarize.js",
"mac": {
"target": [
"dmg"
],
"type": "distribution",
"hardenedRuntime": true,
"entitlements": "assets/entitlements.mac.plist",
"entitlementsInherit": "assets/entitlements.mac.plist",
"gatekeeperAssess": false
},
"dmg": {
"contents": [
{
"x": 130,
"y": 220
},
{
"x": 410,
"y": 220,
"type": "link",
"path": "/Applications"
}
]
},
"win": {
"target": [
"nsis"
]
},
"linux": {
"target": [
"AppImage"
],
"category": "Development"
},
"directories": {
"app": "src",
"buildResources": "assets",
"output": "release"
},
"extraResources": [
"./assets/**"
],
"publish": {
"provider": "github",
"owner": "someone",
"repo": "someone"
}
},
"repository": {
"type": "git",
"url": "link.git"
},
"author": {
"name": "someone",
"email": "someone#someone.com"
},
"contributors": [
{
"name": "someone",
"email": "someone#someone.com"
}
],
"license": "MIT",
"bugs": {
"url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues"
},
"keywords": [
"electron",
"boilerplate",
"react",
"typescript",
"ts",
"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>/.erb/mocks/fileMock.js",
"\\.(css|less|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"jsx",
"ts",
"tsx",
"json"
],
"moduleDirectories": [
"node_modules",
"src/node_modules"
],
"setupFiles": [
"./.erb/scripts/CheckBuildsExist.js"
]
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-proposal-decorators": "^7.12.1",
"#babel/plugin-proposal-do-expressions": "^7.12.1",
"#babel/plugin-proposal-export-default-from": "^7.12.1",
"#babel/plugin-proposal-export-namespace-from": "^7.12.1",
"#babel/plugin-proposal-function-bind": "^7.12.1",
"#babel/plugin-proposal-function-sent": "^7.12.1",
"#babel/plugin-proposal-json-strings": "^7.12.1",
"#babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"#babel/plugin-proposal-optional-chaining": "^7.12.7",
"#babel/plugin-proposal-pipeline-operator": "^7.12.1",
"#babel/plugin-proposal-throw-expressions": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-syntax-import-meta": "^7.10.4",
"#babel/plugin-transform-react-constant-elements": "^7.12.1",
"#babel/plugin-transform-react-inline-elements": "^7.12.1",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "^7.12.7",
"#babel/preset-typescript": "^7.12.7",
"#babel/register": "^7.12.1",
"#pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"#teamsupercell/typings-for-css-modules-loader": "^2.4.0",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#types/enzyme": "^3.10.5",
"#types/enzyme-adapter-react-16": "^1.0.6",
"#types/history": "4.7.6",
"#types/jest": "^26.0.15",
"#types/node": "14.14.10",
"#types/react": "^16.9.44",
"#types/react-dom": "^16.9.9",
"#types/react-router-dom": "^5.1.6",
"#types/react-test-renderer": "^16.9.3",
"#types/webpack-env": "^1.15.2",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-dev-expression": "^0.2.2",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"browserslist-config-erb": "^0.0.1",
"chalk": "^4.1.0",
"concurrently": "^5.3.0",
"core-js": "^3.6.5",
"cross-env": "^7.0.2",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^1.1.5",
"detect-port": "^1.3.0",
"electron": "^11.0.1",
"electron-builder": "^22.10.5",
"electron-devtools-installer": "^3.1.1",
"electron-notarize": "^1.0.0",
"electron-rebuild": "^2.3.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.3",
"enzyme-to-json": "^3.5.0",
"eslint": "^7.25.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-erb": "^2.0.0",
"eslint-config-prettier": "^6.11.0",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-compat": "^3.8.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.0.8",
"file-loader": "^6.0.0",
"husky": "^4.2.5",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.1.0",
"lint-staged": "^10.2.11",
"mini-css-extract-plugin": "^1.3.1",
"node-sass": "^5.0.0",
"opencollective-postinstall": "^2.0.3",
"prettier": "^2.0.5",
"react-refresh": "^0.9.0",
"react-test-renderer": "^17.0.1",
"rimraf": "^3.0.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.3",
"typescript": "^4.0.5",
"url-loader": "^4.1.0",
"webpack": "^5.5.1",
"webpack-bundle-analyzer": "^4.1.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.4.0",
"yarn-deduplicate": "^3.1.0"
},
"dependencies": {
"#material-ui/icons": "^4.11.2",
"electron-debug": "^3.1.0",
"electron-log": "^4.2.4",
"electron-updater": "^4.3.4",
"history": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^4.3.1",
"regenerator-runtime": "^0.13.5",
"source-map-support": "^0.5.19"
},
"devEngines": {
"node": ">=10.x",
"npm": ">=6.x",
"yarn": ">=1.21.3"
},
"collective": {
"url": "https://opencollective.com/electron-react-boilerplate-594"
},
"browserslist": [],
"prettier": {
"overrides": [
{
"files": [
".prettierrc",
".babelrc",
".eslintrc"
],
"options": {
"parser": "json"
}
}
],
"singleQuote": true
},
"renovate": {
"extends": [
"bliss"
],
"baseBranches": [
"next"
]
},
"husky": {
"hooks": {}
}
}
My webpack.config.base.js file:
/**
* Base webpack config used across other specific configs
*/
import path from 'path';
import webpack from 'webpack';
import { dependencies as externals } from '../../src/package.json';
export default {
externals: [...Object.keys(externals || {})],
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
},
],
},
output: {
path: path.join(__dirname, '../../src'),
// https://github.com/webpack/webpack/issues/1114
libraryTarget: 'commonjs2',
},
/**
* Determine the array of extensions that should be used to resolve modules.
*/
resolve: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
modules: [path.join(__dirname, '../../src'), 'node_modules'],
},
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'production',
}),
],
};
I am using a typescript-based start kit for my reactjs application. But, the problem is, everytime that I install a new npm package, all other previous packages (apparently) get uninstalled since I get an error of "failed to load module ..." and I have to install them again. I really appreciate any help. Here is my webpack config:
const {resolve} = require('path');
const {CheckerPlugin} = require('awesome-typescript-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
context: resolve(__dirname, '../../src'),
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader', 'source-map-loader'],
exclude: /node_modules/,
},
{
test: /\.tsx?$/,
use: ['babel-loader', 'awesome-typescript-loader'],
},
{
test: /\.css$/,
use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer']
}
}
}],
},
{
test: /\.(scss|sass)$/,
loaders: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'sass-loader',
],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=img/[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
],
},
],
},
devServer: {
historyApiFallback: true,
},
plugins: [
new CheckerPlugin(),
new HtmlWebpackPlugin({template: 'index.html.ejs',}),
],
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
performance: {
hints: false,
},
};
and here is the config for development mode:
const merge = require('webpack-merge');
const webpack = require('webpack');
const commonConfig = require('./common');
module.exports = merge(commonConfig, {
mode: 'development',
entry: [
'react-hot-loader/patch', // activate HMR for React
'webpack-dev-server/client?http://localhost:8080',// bundle the client for webpack-dev-server and connect to the provided endpoint
'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
'./index.tsx' // the entry point of our app
],
devServer: {
hot: true, // enable HMR on the server
},
devtool: 'cheap-module-eval-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(), // enable HMR globally
],
});
and package.json file:
"name": "react-webpack-typescript-starter",
"version": "0.1.0",
"description": "Starter kit for React, Webpack (with Hot Module Replacement), Typescript and Babel.",
"keywords": [
"react",
"webpack",
"typescript",
"babel",
"sass",
"hmr",
"starter",
"boilerplate"
],
"author": "Viktor Persson",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/vikpe/react-webpack-typescript-starter.git"
},
"bugs": {
"url": "https://github.com/vikpe/react-webpack-typescript-starter/issues"
},
"homepage": "https://github.com/vikpe/react-webpack-typescript-starter",
"scripts": {
"build": "yarn run build:css clean-dist && webpack -p --config=configs/webpack/prod.js",
"clean-dist": "rimraf dist/*",
"lint": "eslint './src/**/*.{js,ts,tsx}' --quiet",
"start": "yarn run start-dev ",
"start-dev": "webpack-dev-server --config=configs/webpack/dev.js",
"start-prod": "yarn run build && node express.js",
"test": "jest --coverage --watchAll --config=configs/jest.json",
"build:css": "postcss src/styles/tailwind.css -o src/styles/global.css",
"watch:css": "postcss src/styles/tailwind.css -o src/styles/global.css"
},
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.10.5",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"#types/jest": "^26.0.5",
"#types/node": "^14.11.10",
"#types/react": "^16.9.43",
"#types/react-dom": "^16.9.8",
"#typescript-eslint/eslint-plugin": "^3.6.1",
"#typescript-eslint/parser": "^3.6.1",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"eslint": "^7.5.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"express": "^4.17.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"image-webpack-loader": "^6.0.0",
"jest": "^26.1.0",
"node-sass": "^4.14.1",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.21",
"rimraf": "^3.0.2",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"typescript": "^3.9.7",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#nivo/line": "^0.63.1",
"#welldone-software/why-did-you-render": "^5.0.0-rc.1",
"autoprefixer": "^10.0.1",
"axios": "^0.20.0",
"postcss": "^8.1.1",
"postcss-cli": "^8.0.0",
"postcss-loader": "^4.0.3",
"purgecss": "^3.0.0",
"react-date-range": "^1.1.3",
"react-datepicker": "^3.3.0",
"react-hook-form": "^6.9.4",
"react-router-dom": "^5.2.0",
"react-select": "^3.1.0",
"react-toastify": "^6.0.9",
"styled-components": "^5.2.0",
"tailwindcss": "^1.8.11"
}
}
I have this setup to transpile ES6 Modules with rollup + babel to browser targets. I tried a lot of things (atm is "ie10") but the transpiled JS still contains const instead of var.
I also had a solo .babelrc file, but it didn't change anything.
What am I doing wrong?
UPDATE:
It seems only code from 'uikit-util'is not transpiled. Can i add it's path and keep this: exclude: 'node_modules/**' ?
rollup.config.js
import "core-js";
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
const alias = require('rollup-plugin-import-alias');
import path from 'path';
const production = !process.env.ROLLUP_WATCH;
export default {
input: './src/js/index.js',
output: {
file: 'dist/js/build.js',
format: 'iife',
sourcemap: false
},
plugins: [
resolve(),
!production && serve({
open: true,
contentBase: '',
openPage: '/mysite',
host: 'localhost',
port: 80,
}),
!production && livereload({
watch: [
path.resolve(__dirname, 'my/js/')
],
}),
babel({
exclude: 'node_modules/**',
extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.vue'],
presets: [
[
'#babel/preset-env',
{
targets: {
"ie": "10",
},
}
]
]
}),
alias({
Paths: {
'uikit-util': './node_modules/uikit/src/js/util/index',
},
Extensions: ['js', 'json']
}),
commonjs(),
// production && terser()
],
};
package.json
{
"name": "My Build",
"version": "0.1.0",
"devDependencies": {
"#babel/core": "^7.8.3",
"#babel/plugin-external-helpers": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.7.6",
"#babel/preset-env": "^7.8.3",
"#babel/register": "^7.8.3",
"autoprefixer": "^9.7.3",
"babel-loader": "^8.0.6",
"babel-plugin-add-module-exports": "^1.0.2",
"browser-sync": "^2.26.3",
"cross-spawn": "^6.0.5",
"cssnano": "^4.1.7",
"del": "^3.0.0",
"glob": "^7.1.6",
"less": "^3.10.3",
"merge-stream": "^1.0.1",
"npm-run-all": "^4.1.5",
"rollup": "1.27.9",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-browsersync": "^1.1.0",
"rollup-plugin-buble": "^0.19.8",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-html": "^0.2.1",
"rollup-plugin-import-alias": "^1.0.10",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-less": "^1.1.2",
"rollup-plugin-livereload": "^1.0.4",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^5.1.2",
"run-sequence": "^2.2.1",
"serve": "^11.2.0",
"yargs": "^12.0.5"
},
"description": "My Desc",
"scripts": {
"build": "rollup -c",
"watch": "rollup -c -w",
"dev": "npm-run-all --parallel start watch",
"start": "serve ."
},
"author": "Me",
"dependencies": {
"#babel/polyfill": "^7.7.0",
"#tarekraafat/autocomplete.js": "^7.2.0",
"core-js": "3",
"flatpickr": "^4.6.3",
"gulp-less": "^4.0.1",
"leaflet": "^1.6.0",
"leaflet.markercluster": "^1.4.1",
"streamqueue": "^1.1.2",
"uikit": "^3.2.4"
}
}
index.js
import { $, $$, on, data, ajax, attr, addClass, removeClass } from 'uikit-util';
import { func1, func2, func3} from '../util/index';
export function ABC() {
...
}
Try set browserslist not IE <= 8 or IE > 8.
I have fixed this issue in my own project.
JS newb here:
I've spent a couple days on this bug, and I've looked at many answers and practiced my most earnest Google-Fu, and tried many different babel plugins and presets configurations, as well as tried migrating my webpack 1 project into a webpack 2 incarnation, and in the end I'm still hitting the same wall. Please give me an assist.
When I try to build my project, all open sourced here, and most recently active and relevant to this question in the webpack2migration branch, I've been unable to build for production (and not even dev after futzing more and more with it through unproductive debugging)
This is the error I haven't gotten around, admittedly because I don't understand some (maybe many) of the complexities in webpack and how babel is to be correctly configured for what I'm struggling with.
Here's the error:
ERROR in ../~/react-google-maps/src/lib/async/withScriptjs.js
Module parse failed: /Users/sg/Desktop/blog-home/node_modules/react-google-maps/src/lib/async/withScriptjs.js Unexpected token (19:23)
You may need an appropriate loader to handle this file type.
| export default function withScriptjs(WrappedComponent) {
| return class Container extends Component {
| static displayName = `withScriptjs(${getDisplayName(WrappedComponent)})`;
|
| static propTypes = {
Initially, I thought this was a bug with react-google-maps, but I suspect it is something different now. I have encountered this kind of bug once before a few months ago within a different project, and I know I've been mostly making a mess of my package.json.
Yes, I know there are many silly problems in there, like package duplications, unused packages, unnecessary dependencies... I've been hitting every angle I can think of, too hard and with not enough care towards cleanup yet; I'm asking for help before getting some sleep and trying yet again in the morning.
The project was to integrate a working small frontend game I'm prototyping, and I wanted to integrate it into my homepage, which I'm also beginning another sweep to clean up and refactor, for better presentation and code quality.
I humbly ask for some supportive help in configuring my build correctly where I obviously am having a lot of trouble.
When I began to integrate the little game into my home page, the build worked perfectly on my local machine in both development and production build configurations, but when I pushed my changes and triggered a build to my heroku host site it kept failing on this same file, I suppose because it can't parse it.
I hope that is enough to go on, and I'll be happy to help narrow this down as needed. :)
Best regards, and thanks for your time!
package.json
{
"name": "react-sg-home-page",
"version": "0.0.9",
"description": "My home page and portfolio site",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+ssh://git#github.com/sgoldens/home.git"
},
"jest": {
"verbose": true,
"collectCoverage": true,
"setupTestFrameworkScriptFile": "mock-local-storage"
},
"config": {
"blanket": {
"pattern": [
""
],
"data-cover-never": [
"node_modules",
"__tests__",
"*.spec.*"
]
}
},
"engines": {
"node": "7.7.4"
},
"scripts": {
"buildcolors": "NODE_ENV=production webpack --config ./webpack.config.js --progress --colors",
"start_nf": "nf start",
"istanbul": "istanbul cover ./node_modules/mocha/bin/_mocha -- --reporter dot --full-trace __tests__",
"lint:watch": "npm run lint -- --watch",
"mochatest": "babel-node ./node_modules/.bin/isparta cover _mocha --require blanket -- --reporter dot --full-trace __tests__",
"postinstall": "webpack -p --config ./webpack.config.js",
"remove-public": "rm -rf ./public",
"test": "jest --coverage",
"test:watch": "npm test -- --watch",
"start_prod": "node server.js",
"start": "webpack-dev-server",
"dev": "webpack-dashboard -t 'Marvin' -- webpack-dev-server",
"build": "babel-node tools/build.js && babel-node tools/buildHtml.js",
"lint-break-on-errors": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx",
"lint": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx || true",
"preview": "rm -rf ./build && NODE_ENV=\"production\" webpack-dashboard -t 'Preview Mode - Marvin' -- webpack-dev-server",
"hook-add": "prepush install",
"hook-remove": "prepush remove",
"heroku-prebuild": "npm run remove-public && mkdir public",
"heroku-postinstall": "node server.js"
},
"author": "Sasha Goldenson",
"license": "MIT",
"devDependencies": {
"autoprefixer": "^6.5.3",
"babel-core": "^6.7.2",
"babel-eslint": "^7.1.0",
"babel-jest": "^19.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-syntax-decorators": "^6.13.0",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.16.0",
"babel-runtime": "^6.6.1",
"chai": "3.5.0",
"chai-jquery": "^2.0.0",
"css-loader": "^0.28.0",
"enzyme": "2.6.0",
"eslint": "^3.10.1",
"eslint-config-airbnb": "^14.1.0",
"eslint-config-google": "^0.7.1",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-node": "^4.2.2",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^6.10.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-watch": "2.1.11",
"expect": "^1.19.0",
"factory-girl": "^4.2.2",
"isparta": "^4.0.0",
"istanbul": "^1.0.0-alpha.2",
"jasmine-core": "^2.6.1",
"jest": "17.0.3",
"jest-cli": "*",
"karma": "^1.6.0",
"karma-chrome-launcher": "^2.0.0",
"karma-firefox-launcher": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-safari-launcher": "^1.0.0",
"mocha": "3.1.2",
"mocha-lcov-reporter": "^1.3.0",
"mock-local-storage": "^1.0.2",
"nock": "^8.0.0",
"react-addons-test-utils": "^15.4.0",
"redux-mock-store": "^1.2.3",
"standard": "^10.0.2",
"webpack-dev-middleware": "1.6.1",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.15.3",
"babel-cli": "^6.24.0",
"babel-core": "^6.24.0",
"babel-es6-polyfill": "^1.1.0",
"babel-loader": "^6.4.1",
"babel-plugin-class-display-name": "^2.1.0",
"babel-plugin-lodash": "^3.2.11",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-syntax-decorators": "^6.13.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-class-display-name": "^0.0.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-classes": "6.18.0",
"babel-plugin-transform-es2015-template-literals": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-plugin-transform-react-constant-elements": "^6.23.0",
"babel-plugin-transform-react-display-name": "^6.25.0",
"babel-plugin-transform-react-remove-prop-types": "^0.3.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-babili": "0.0.12",
"babel-preset-env": "^1.2.2",
"babel-preset-es2015": "^6.24.0",
"babel-preset-es2016": "^6.22.0",
"babel-preset-latest": "^6.24.0",
"babel-preset-modern-async": "^1.0.0-alpha.3",
"babel-preset-modern-browsers": "^9.0.2",
"babel-preset-react": "^6.1.18",
"babel-preset-stage-0": "^6.22.0",
"babel-preset-stage-1": "^6.1.18",
"babel-register": "^6.24.1",
"babel-relay-plugin-loader": "^0.10.0",
"babili-webpack-plugin": "0.0.11",
"blanket": "^1.2.3",
"bluebird": "^3.1.2",
"bootstrap": "^3.3.7",
"cheerio": "^0.20.0",
"colors": "1.1.2",
"compression": "^1.6.1",
"coveralls": "^2.12.0",
"css-loader": "^0.28.4",
"es6-promise": "^3.3.1",
"eventsource-polyfill": "0.9.6",
"express": "~4.9.8",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"font-awesome": "^4.7.0",
"foreman": "2.0.0",
"get-env": "^0.5.10",
"history": "^4.6.3",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.24.1",
"image-webpack-loader": "^3.3.0",
"immutability-helper": "^2.2.2",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.2.1",
"json-loader": "^0.5.4",
"lodash-webpack-plugin": "^0.11.2",
"lodash.debounce": "^4.0.8",
"material-ui": "^0.16.0-rc2",
"node-sass": "^3.13.0",
"npm-run-all": "^1.8.0",
"open": "0.0.5",
"postcss-loader": "^1.1.1",
"prepush": "^3.1.11",
"prop-types": "^15.5.10",
"react": "^15.6.0",
"react-addons-css-transition-group": "^15.6.0",
"react-addons-update": "^15.6.0",
"react-bootstrap": "^0.30.7",
"react-display-name": "^0.2.0",
"react-dom": "15.6.1",
"react-google-maps": "^7.0.0",
"react-icons": "^2.2.5",
"react-lazy-cache": "^3.0.1",
"react-logo": "^1.0.8",
"react-modal": "1.5.2",
"react-mui-speeddial": "0.0.6",
"react-pure-render": "^1.0.2",
"react-redux": "^4.4.6",
"react-router-bootstrap": "^0.23.1",
"react-router-dom": "next",
"react-rte": "^0.11.0",
"react-rte-image": "^0.11.1",
"react-rte-material": "^0.12.5",
"react-tap-event-plugin": "*",
"react-tooltip": "3.2.2",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.3.4",
"redux": "^3.0.4",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-extension": "^2.13.0",
"redux-devtools-log-monitor": "^1.2.0",
"redux-form": "6.6.1",
"redux-form-material-ui": "^4.1.3",
"redux-logger": "^3.0.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0",
"regenerator-runtime": "^0.10.3",
"reinstall": "^1.1.1",
"reselect": "^3.0.0",
"rimraf": "^2.5.2",
"sass-loader": "^4.0.2",
"serve-favicon": "^2.3.0",
"sinon": "1.17.6",
"style-loader": "0.13.1",
"svg-react-loader": "^0.3.7",
"svg-sprite-loader": "^2.1.0",
"svgo": "^0.7.2",
"svgo-loader": "^1.2.1",
"transform-runtime": "0.0.0",
"url-loader": "0.5.7",
"webpack": "^2.2.1",
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.2.1",
"webpack-hot-middleware": "2.10.0",
"youtube-api-search": "0.0.5"
},
"bugs": {
"url": "https://github.com/sgoldens/home/issues"
},
"homepage": "https://github.com/sgoldens/home#readme",
"keywords": [
"home"
],
"prepush": [
"npm run lint-break-on-errors --silent"
]
}
.babelrc
{
"plugins": [
["transform-class-properties", { "spec": true }],
"transform-class-display-name",
"class-display-name",
"transform-react-display-name",
"syntax-decorators",
"transform-decorators-legacy",
["transform-es2015-template-literals", {
"loose": true,
"spec": true
}]
],
"presets": [
"react",
"es2015",
"stage-0"
],
"env": {
"development": {
"presets": [
"react-hmre"
]
}
}
}
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const DashboardPlugin = require('webpack-dashboard/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const SpritePlugin = require('svg-sprite-loader/plugin');
const autoprefixer = require('autoprefixer');
const nodeEnv = process.env.NODE_ENV || 'development';
const isProduction = nodeEnv === 'production';
const jsSourcePath = path.join(__dirname, './src');
const buildPath = path.join(__dirname, './build');
const imgPath = path.join(__dirname, './images');
const iconPath = path.join(__dirname, './images');
const sourcePath = path.join(__dirname, './src');
// Common plugins
const plugins = [
new SpritePlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'build',
filename: 'build.js',
minChunks(module) {
const context = module.context;
return context && context.indexOf('node_modules') >= 0;
},
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv),
'API_HOST': JSON.stringify('https://posts-sgoldens.herokuapp.com'),
'API_PORT': JSON.stringify(process.env.PORT || 5000)
},
}),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
template: path.join(sourcePath, 'index.html'),
path: buildPath,
filename: 'index.html',
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer({
browsers: [
'last 3 version',
'ie >= 10',
],
}),
],
context: sourcePath,
},
}),
];
// Common rules
const rules = [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader',
],
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-sprite-loader',
options: {
extract: true,
spriteFilename: 'icons-sprite.svg',
},
},
'svgo-loader',
],
include: iconPath,
},
{
test: /\.(png|gif|jpg|svg)$/,
include: imgPath,
use: 'url-loader?limit=20480&name=assets/[name]-[hash].[ext]',
},
];
if (isProduction) {
// Production plugins
plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
},
output: {
comments: false,
},
}),
new ExtractTextPlugin('style-[hash].css')
);
// Production rules
rules.push(
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!postcss-loader!sass-loader',
}),
}
);
} else {
// Development plugins
plugins.push(
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin()
);
// Development rules
rules.push(
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
'style-loader',
// Using source maps breaks urls in the CSS loader
// https://github.com/webpack/css-loader/issues/232
// This comment solves it, but breaks testing from a local network
// https://github.com/webpack/css-loader/issues/232#issuecomment-240449998
// 'css-loader?sourceMap',
'css-loader',
'postcss-loader',
'sass-loader?sourceMap',
],
}
);
}
module.exports = {
devtool: isProduction ? false : 'source-map',
context: jsSourcePath,
entry: {
js: './index.js',
},
output: {
path: buildPath,
publicPath: '/',
filename: 'bundle.js',
},
module: {
rules,
},
resolve: {
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
modules: [
path.resolve(__dirname, 'node_modules'),
jsSourcePath,
],
},
plugins,
devServer: {
contentBase: isProduction ? buildPath : sourcePath,
historyApiFallback: true,
port: 3000,
compress: isProduction,
inline: !isProduction,
hot: !isProduction,
host: '0.0.0.0',
disableHostCheck: true,
stats: {
assets: true,
children: false,
chunks: false,
hash: false,
modules: false,
publicPath: false,
timings: true,
version: false,
warnings: true,
colors: {
green: '\u001b[32m',
},
},
},
};
You code is importing separate source file from node_modules folder react-google-maps/*src*/lib/async/withScriptjs.js
But your webpack rules exclude files in node_modules from babel compilation process
{
test: /\.(js|jsx)$/,
exclude: /node_modules/, // NB!
use: [
'babel-loader',
],
}
You could import compiled version instead /react-google-maps/**lib**/async/withScriptjs.js