Babel transform import statements

Babel transform import statements - javascript

I have an ASP.NET MVC solution with my front-end scripts in TypeScript. I am trying to use webpack and babel with ts-loader so I can develop with es2016 but have babel transform to es5 and be able to run and debug in IE from Visual Studio. However I find that the output js is not transformed as I expect. For example the following statements in my ts appear in my resulting js, which are not es5:
import * as moment from 'moment';
import { classes } from './order';
Here is my config:
.babelrc
{
"presets": ["es2015"]
}
webpack.config.js
var path = require('path');
module.exports = {
context: path.join(__dirname, 'Scripts'),
entry: ['babel-polyfill', './pos.ts'],
output: {
path: path.join(__dirname, 'Scripts'),
filename: '[name].js'
},
resolve: {
extensions: ['.js', '.ts']
},
module: {
loaders: [{
test: /\.ts$/,
loaders: ['babel-loader', 'ts-loader'],
exclude: /(node_modules|bower_components)/
}]
},
devtool: 'inline-source-map'
};
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es2016",
"module": "es2015",
"lib": [ "dom", "es2015", "es2016" ],
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"preserveConstEnums": true,
"skipLibCheck": true
},
"include": [
"node_modules/#types/**/*.d.ts",
"Scripts/**/*.ts"
]
}
package.json
{
"version": "1.0.0",
"name": "foo",
"readme": "README.md",
"description": "foo",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-bower": "^0.0.13",
"gulp-clean-css": "^3.4.1",
"gulp-concat": "^2.6.1",
"gulp-copy": "^1.0.0",
"gulp-less": "^3.3.0",
"gulp-rimraf": "^0.2.1",
"gulp-sass": "^3.1.0",
"gulp-shell": "^0.6.3",
"gulp-sourcemaps": "^2.6.0",
"gulp-tsc": "^1.3.2",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8",
"merge-stream": "^1.0.1",
"node-sass": "^4.5.3",
"run-sequence": "^1.2.2",
"ts-loader": "^2.3.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1",
"webpack-notifier": "^1.5.0"
},
"dependencies": {
"#types/jquery": "^2.0.46",
"#types/bootstrap-touchspin": "",
"#types/maskedinput": "",
"#types/bootstrap-select": ""
},
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server --hot --inline"
}
}
Webpack appears to be running successfully in that there are no errors and js is created from my ts. I think that Babel is being invoked because if I put in an invalid preset I get an error. However as noted above it seems like Babel is not transforming to es5. I have tried other presets like env and 2016. What am I missing?

Related

'Invalid left-hand side in assignment' after webpack and babel build

Brief overview
I am struggling with porting a react app to be es5 compatible. We have special requirements to run the app on Chrome v37. Therefore i added es5 compatible polyfills, shimming and transpiling to the toolchain
Tools and basic configuration
Webpack (v5+), babel (v7+), npm, and typescript (v4.7+)
core-js (v3.23+) for polyfills
bundle file for our sources
bundle file for vendor sources
node_modules which are not es5 compatible are NOT excluded from babel-loader
node_modules which are es5 compatible are excluded from babel-loader
I also tried:
use different module types in the typescript.config (CommonJS, AMD and ES6)
use different properties for strict mode in tthe typescript.config
downgrade rtf.js package (but don't go under 3.0 because the author removed jquery with 3.0)
Problem
Modern browsers do not throw any error. Old browser does.
The error states: 'Invalid left-hand side in assignment' in the vendor.bundle.js file on 'push.../node_modules/rtf.js/dist/RTFJS.bundle.js'
Chrome v37 throws following error:
Uncaught ReferenceError: Invalid left-hand side in assignment
vendors.c543a78e.js:10131push.../node_modules/rtf.js/dist/RTFJS.bundle.js
vendors.c543a78e.js:10131__webpack_require__ app.c543a78e.js:1802fn
app.c543a78e.js:2048(anonymous function) index.js:7push.../node_modules/rtf.js/index.js
vendors.c543a78e.js:10152__webpack_require__ app.c543a78e.js:1802fn
app.c543a78e.js:2048(anonymous function)
RtfTextConverter.ts?111d:4__webpack_modules__../controllers/sceneInterpreters
/compositeSceneInterpreter/RtfTextConverter.ts app.c543a78e.js:1533__webpack_require__
app.c543a78e.js:1802fn app.c543a78e.js:2048(anonymous function)
CompositeSceneInterpreter.ts?8981:16__webpack_modules__../controllers/sceneInterpreters
/compositeSceneInterpreter/CompositeSceneInterpreter.ts
app.c543a78e.js:1523__webpack_require__ app.c543a78e.js:1802fn
app.c543a78e.js:2048(anonymous function)
PlaylistInterpreter.ts?e5ab:6__webpack_modules__../PlaylistInterpreter.ts
app.c543a78e.js:543__webpack_require__ app.c543a78e.js:1802fn
app.c543a78e.js:2048(anonymous function)
PlaylistManager.tsx?4d1a:5__webpack_modules__../PlaylistManager.tsx
app.c543a78e.js:553__webpack_require__ app.c543a78e.js:1802fn
app.c543a78e.js:2048(anonymous function)
KeyConfigurer.ts?e3b4:8__webpack_modules__../KeyConfigurer.ts
app.c543a78e.js:493__webpack_require__ app.c543a78e.js:1802fn
app.c543a78e.js:2048(anonymous function) Main.tsx?e426:5__webpack_modules__../Main.tsx
app.c543a78e.js:503__webpack_require__ app.c543a78e.js:1802(anonymous function)
app.c543a78e.js:2958__webpack_require__.O app.c543a78e.js:1851(anonymous function)
app.c543a78e.js:2959(anonymous function)
Build Configuration
webpack.config.json
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SignageOSPlugin = require('#signageos/webpack-plugin');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const Dotenv = require('dotenv-webpack');
const fs = require('fs');
var GitRevisionPlugin = require('git-revision-webpack-plugin');
var gitRevisionPlugin = new GitRevisionPlugin({
commithashCommand: 'rev-list --max-count=1 --no-merges HEAD',
versionCommand: 'rev-list HEAD --count',
branchCommand: 'status --porcelain',
});
module.exports = {
optimization: {
minimize: false,
// put all third-party libs into separate bundle file.
// (https://webpack.js.org/plugins/split-chunks-plugin/)
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
plugins: [
new webpack.DefinePlugin({
__COMMITHASH__: JSON.stringify(gitRevisionPlugin.commithash()),
__COMMITS_TOWARDS_HEAD__: JSON.stringify(gitRevisionPlugin.version()),
__GIT_STATUS__: JSON.stringify(gitRevisionPlugin.branch()),
}),
new HtmlWebpackPlugin({
template: '../index_web.html',
}),
new Dotenv(),
new webpack.HotModuleReplacementPlugin(),
new SignageOSPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
],
entry: {
app: ['core-js', 'whatwg-fetch', 'raf/polyfill', './Main.tsx'],
},
mode: 'development',
devServer: {
host: '0.0.0.0',
},
devtool: 'eval-cheap-module-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: new RegExp(fs.readFileSync(path.resolve('./non_ES5_node_modules'), 'utf-8').slice(1, -2)), // /[\\/]node_modules[\\/](?!(free-style|rtf.js|rtfjs)[\\/])/,
},
{
/*
* https://github.com/webpack-contrib/html-loader/pull/116/commits/843c76eef19122142505ef3c4611ec5b2c70ba24#diff-04c6e90faac2675aa89e2176d2eec7d8
* https://github.com/dbailo1988/html-loader#examples
*/
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
minimize: false,
},
},
],
},
{
test: /^(.(?!.module.css))*.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: ['/.jsx?$/', '/.js$/', '/.m?js$/'],
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: [
[
// disabling strict mode for babel transform because free-style lib would fail
'#babel/plugin-transform-modules-commonjs',
{
loose: true,
strictMode: false,
},
],
],
},
},
exclude: new RegExp(fs.readFileSync(path.resolve('./non_ES5_node_modules'), 'utf-8').slice(1, -2)), // /[\\/]node_modules[\\/](?!(free-style|rtf.js|rtfjs)[\\/])/,
},
],
},
context: path.resolve(__dirname, 'src'),
resolve: {
extensions: ['.tsx', '.ts', '.js'],
modules: ['src', 'node_modules'],
fallback: { stream: require.resolve('stream-browserify') },
alias: {
process: 'process/browser', // shimming process/browser for chrome v37
'free-style': 'free-style/dist.es5/index.js', // avoid es2015 build and use es5 dist files for free-style
},
},
output: {
path: path.resolve(__dirname, './dist/'),
filename: '[name].[hash:8].js',
sourceMapFilename: '[name].[hash:8].map',
chunkFilename: '[id].[hash:8].js',
},
};
tsconfig.json
{
"extends": "./node_modules/gts/tsconfig-google.json",
"compilerOptions": {
"outDir": "./dist/",
"module": "ES6", //es6
"target": "ES5",
"allowJs": true,
"sourceMap": true,
"strict": false,
"jsx": "react",
"noEmit": false,
"moduleResolution": "node",
"esModuleInterop": true,
// es2015.promise -> required for promises
// es2017 -> required for maps/sets
"lib": ["es2017", "dom"],
// related to jest
//"allowSyntheticDefaultImports": true
"typeRoots": ["../node_modules/#types"],
"skipLibCheck": true,
// "alwaysStrict": true,
// disabling strict because free-style lib would fail
"noImplicitUseStrict": true
},
"exclude": ["node_modules", "src/**/*.spec.ts", "src/**/*.test.ts"],
"include": ["src/**/*.ts", "test/**/*.ts", "typings/**/*.d.ts", "src/**/*"]
}
package.json
{
"name": "newsrodeoviewer",
"version": "2.0.3",
"description": "NewsRodeo Viewer built with SignageOS middleware",
"private": true,
"main": "dist/index.html",
"browserslist": [
"since 2014",
"dead",
"chrome 37",
"chrome 38"
],
"scripts": {
"start": "webpack-dev-server --mode development",
"prepare": "npm run clean && npm run build",
"upload": "sos applet upload",
"clean": "gts clean",
"escheck": "npx es-check --module=false es5 dist/*.js",
"build": "webpack --mode production",
"postbuild": "npm run escheck",
"connect": "webpack --watch",
"lint": "gts lint",
"test": "jest --watch",
"test-failures": "jest --onlyFailures",
"test-unit": "jest unit.test",
"test-int": "jest int.tes",
"dev-build": "npx webpack --mode development",
"prod-build": "npx webpack --mode production",
"compile": "tsc",
"fix": "gts fix",
"postinstall": "sh -c \"npx --silent are-you-es5 check -r . | tail -n 1 > ./non_ES5_node_modules \""
},
"keywords": [],
"author": "",
"files": [
"dist"
],
"devDependencies": {
"#babel/core": "^7.17.10",
"#babel/preset-env": "^7.17.10",
"#signageos/cli": "^1.0.2",
"#signageos/webpack-plugin": "^0.3.0",
"#types/jest": "^28.1.3",
"#types/node": "^14.18.21",
"#types/node-fetch": "^2.1.2",
"#types/react": "^18.0.12",
"#types/uuid": "^8.3.4",
"amd-define-factory-patcher-loader": "^1.0.0",
"are-you-es5": "^2.1.2",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"dotenv-webpack": "^7.1.1",
"git-revision-webpack-plugin": "^3.0.3",
"gts": "^3.1.0",
"html-loader": "^3.1.2",
"html-webpack-plugin": "^5.5.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^28.1.1",
"jest-css-modules": "^1.1.0",
"jest-environment-jsdom": "^28.1.1",
"node-fetch": "^2.2.0",
"source-map-loader": "^4.0.0",
"style-loader": "^3.3.1",
"ts-jest": "^28.0.5",
"ts-loader": "^9.3.1",
"tslint": "^5.11.0",
"tslint-react": "^3.6.0",
"typescript": "^4.7.4",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3",
"webpack-node-externals": "^3.0.0"
},
"dependencies": {
"#signageos/front-applet": "^5.3.0",
"#signageos/front-display": "^9.16.2",
"#types/crypto-js": "^3.1.43",
"#types/jquery": "^3.5.14",
"#types/react-dom": "^18.0.4",
"#types/react-redux": "^7.1.24",
"async-mutex": "^0.1.3",
"circularbuffer": "^0.1.1",
"core-js": "^3.23.3",
"crypto-js": "^3.1.9-1",
"free-style": "^3.2.4",
"http-status-codes": "^1.3.0",
"moment": "^2.29.3",
"raf": "^3.4.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-icons-kit": "^2.0.0",
"react-live-clock": "^5.10.0",
"react-redux": "^8.0.2",
"react-spinkit": "^3.0.0",
"redux": "^4.2.0",
"regenerator-runtime": "^0.13.9",
"rtf.js": "^3.0.1",
"stream-browserify": "^3.0.0",
"typesafe-actions": "^2.0.4",
"typestyle": "^2.3.0",
"uuid": "^8.3.2",
"whatwg-fetch": "^3.6.2",
"xml-js": "^1.6.7"
}
}
non_ES5_node_modules
/[\\/]node_modules[\\/](?!(free-style|rtf.js)[\\/])/
I really need to solve this and have no clue what to do.
Please feel free to ask for additional information if necessary.
Thank you very much!

Rollup produces incorrect Dist structure when test are present

I'm packaging a React module with rollup. Implemented with TypeScript. It contains Jest tests. Once I add a "test/mock/data.ts" to file, the output in "dist" changes its structure. A new "dist/src" folder appears. I need the build output to be the same as if the tests were not there at all. The library is open-source: https://github.com/kubevious/ui-properties
Directory Structure:
- src
- index.ts
- test
- mock
- data.ts
- dist
- index.js
- index.d.ts // during the CI build this file is under src/
- src // only if test/mock/data.ts file is there.
- <other>
I have an ugly workaround. Would appreciate a proper solution. During the build:
$ mv .test test
$ npm run build
$ mv test .test
package.json
{
"name": "#kubevious/ui-properties",
"version": "1.0.73",
"description": "Kubevious UI Properties Components",
"main": "dist/index.js",
"types": "dist",
"files": [
"dist/**/*",
"public/**/*"
],
"scripts": {
"test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' jest",
"test:watch": "jest --watch",
"build": "rollup -c",
"start": "rollup -c -w",
"format": "prettier --write ./src/ ./test/",
"format-check": "prettier --write ./src/ ./test/",
"lint": "eslint",
"storybook": "start-storybook -s ./public,./node_modules/#kubevious/entity-meta/public,./node_modules/#kubevious/ui-components/public -p 6006",
"build-storybook": "build-storybook"
},
"author": "Ruben Hakopian <ruben.hakopian#gmail.com>",
"license": "Apache-2.0",
"dependencies": {
"#kubevious/entity-meta": "^1.0.69",
"#kubevious/state-registry": "^1.0.13",
"#kubevious/ui-alerts": "^1.0.49",
"#kubevious/ui-components": "^1.0.242",
"#kubevious/ui-framework": "^1.0.59",
"#types/react-gauge-chart": "^0.3.1",
"bootstrap": "^5.0.0-beta3",
"chart.js": "^3.7.1",
"chartjs-plugin-datalabels": "^2.0.0",
"classnames": "2.3.1",
"js-yaml": "^4.0.0",
"react-chartjs-2": "^4.1.0",
"react-gauge-chart": "^0.4.0",
"the-lodash": "^2.0.9",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.3"
},
"devDependencies": {
"#storybook/addon-actions": "6.5.7",
"#storybook/addon-essentials": "6.5.7",
"#storybook/addon-links": "6.5.7",
"#storybook/react": "6.5.7",
"#testing-library/jest-dom": "5.16.4",
"#testing-library/react": "12.1.5",
"#types/jest": "26.0.24",
"#types/js-yaml": "^4.0.0",
"#types/node": "^14.6.0",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2",
"#types/uuid": "^8.3.0",
"#typescript-eslint/eslint-plugin": "5.27.1",
"#typescript-eslint/parser": "5.27.1",
"#babel/core": "7.18.2",
"babel-loader": "8.2.5",
"eslint": "8.17.0",
"identity-obj-proxy": "^3.0.0",
"jest": "26.6.3",
"postcss": "8.4.14",
"sass": "1.52.2",
"prettier": "^2.1.0",
"#rollup/plugin-babel": "5.3.1",
"#rollup/plugin-commonjs": "22.0.0",
"#rollup/plugin-json": "4.1.0",
"rollup": "2.75.6",
"rollup-plugin-peer-deps-external": "2.2.4",
"rollup-plugin-postcss": "4.0.2",
"rollup-plugin-typescript2": "0.32.1",
"sass-loader": "13.0.0",
"should": "13.2.3",
"storybook-css-modules-preset": "1.1.1",
"ts-jest": "26.5.6",
"ts-node": "10.8.1",
"tslib": "2.4.0",
"typescript": "4.7.3",
"rollup-plugin-sass": "1.2.12",
"#storybook/preset-scss": "1.0.3",
"#types/react-router-dom": "5.3.3",
"#testing-library/dom": "8.13.0",
"#testing-library/user-event": "13.5.0",
"jest-environment-jsdom": "26.6.2",
"css-loader": "6.7.1"
},
"resolutions": {
"the-lodash": "^2.0.9",
"#kubevious/ui-framework": "^1.0.59",
"#kubevious/ui-components": "^1.0.242",
"#kubevious/ui-alerts": "^1.0.49",
"#kubevious/entity-meta": "^1.0.69",
"#kubevious/state-registry": "^1.0.13",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.3",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2",
"#types/react-router-dom": "5.3.3"
}
}
rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import { babel } from '#rollup/plugin-babel';
import commonjs from '#rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import json from '#rollup/plugin-json';
import sass from 'rollup-plugin-sass';
import pkg from './package.json';
export default {
input: 'src/index.ts',
output: [
{
format: 'cjs',
sourcemap: true,
file: pkg.main,
globals: { react: 'React' },
},
],
plugins: [
typescript(),
peerDepsExternal(),
postcss({
extract: false,
modules: true,
use: ['sass'],
}),
babel({ exclude: 'node_modules/**' }),
commonjs({
include: 'node_modules/**',
namedExports: {
'node_modules/react-is/index.js': ['isValidElementType'],
},
}),
sass({ insert: true }),
json(),
],
external: ['react', 'react-dom'],
};
tsconfig.json
{
"compilerOptions": {
"outDir": "dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom", "dom.iterable", "esnext","es2016", "es2017"],
"sourceMap": true,
"allowJs": false,
"jsx": "react",
"declaration": true,
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"esModuleInterop": true
},
"importHelpers": true,
"include": ["./src"],
"exclude": [
"node_modules",
"dist",
"test",
"**/*.stories.js",
"**/*.stories.jsx",
"**/*.stories.ts",
"**/*.stories.tsx",
"**/test",
"**/test/**/*.test.js",
"**/test/**/*.test.ts",
"**/test/**/*.test.jsx",
"**/test/**/*.test.tsx"
]
}

How to parse esm module in vuejs

I'm encountering the following error in my vue project after packages update:
Failed to compile.
./node_modules/#polkadot/networks/packageInfo.js 6:27
Module parse failed: Unexpected token (6:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export const packageInfo = {
| name: '#polkadot/networks',
> path: new URL('.', import.meta.url).pathname,
| type: 'esm',
| version: '8.3.1'
Honestly I've tried lot of suggestions found across the internet and nothing appears to solve it.
My package.json:
{
"name": "polkadot-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#polkadot/extension-dapp": "0.42.2",
"#polkadot/keyring": "^8.1.2",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.2.0",
"vuetify": "^2.4.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-router": "^4.5.15",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-plugin-vuex": "^4.5.15",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-standard": "^5.1.2",
"#vue/eslint-config-typescript": "^7.0.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"typescript": "~4.1.5",
"vue-cli-plugin-vuetify": "~2.4.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
}
}
My tsconfig:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
My vue.config.js
module.exports = {
transpileDependencies: [
'vuetify'
]
}
My babel.config.js
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
Does anyone have idea how to fix this? As far as I understand from the error my webpack can't parse the js file from the module. But aren't the js files supported by default in webpack?
My understanding is that somehow I need to specify in vue.config.js that I'm using esm modules, and how they can be loaded and parsed.
Any ideas will be greatly appreciated!

It appears that this is known issue with webpack 4 and older versions (I think it is fixed in version 5).
Basically in order webpack to be able to parse the problematic files it needs additional package:
https://www.npmjs.com/package/#open-wc/webpack-import-meta-loader
Once I've installed the package I've included it in my vue webpack config via the vue.config.js file as follows:
const {VueLoaderPlugin} = require("vue-loader");
module.exports = {
transpileDependencies: [
'vuetify'
],
configureWebpack: {
module: {
rules: [
{
test: /\.js$/,
loader: require.resolve('#open-wc/webpack-import-meta-loader'),
}
]
}
}
}

In my case solution proposed by #themartto was not working.
I had to set vue.config.js
{
transpileDependencies: [
'affected-dependency'
],
chainWebpack (config)
{
config.module
.rule('js')
.test(/\.js$/)
.use('#open-wc/webpack-import-meta-loader')
.loader('#open-wc/webpack-import-meta-loader');
}
}

Why does my vue web app load a blank page in IE11 and look broken in Edge?

I'm having a bit of trouble with getting my project to work on IE11 and Edge
You can view it here: https://tagfireandsecurity.co.uk/
THE PROBLEMS
IE11: Blank page, shows multiple errors:
SCRIPT1002: Syntax error
firebase-app.js (1,1)
SCRIPT1002: Syntax error
firebase-analytics.js (1,1)
SCRIPT1002: Syntax error
init.js (1,1)
SCRIPT5043: Accessing the 'caller' property of a function or arguments object is not allowed in strict mode
eval code (3959) (15268,9)
SCRIPT5022: SecurityError
sockjs.js (1684,3)
Edge: Loads the website, however its all messed up. For example the grid is not working and my carousels aren't working. Also shows some errors:
SCRIPT65535: SCRIPT65535: Invalid calling object
WHAT I'VE DONE SO FAR
I tried to make sure babel will polyfill which I don't even know if it's doing it to be honest, I followed the documentation on their website and I don't think its working.
I also tried to add transpileDependencies: ['vue-mq', 'vue-carousel', 'firebase', 'vue-lazyload-video'] to polyfill my plugins but I don't think that is doing anything either.
I also added an autoprefixer and I believe that is working because the SCSS to CSS output now has all the prefixes in it, so why it's not working in EDGE? I don't know. Inspecting it in Edge shows it has the prefixes there, sometimes just disabling the prefix and putting it back on again fixes it so I'm very confused.
Here are my config files:
babel.config.js
module.exports = {
presets: [
['#vue/app', {
polyfills: [
'es.promise',
'es.symbol'
]
}]
]
};
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}],
vue: {
// configure autoprefixer
autoprefixer: {
browsers: ['last 2 versions']
}
}
}
}
vue.config.js
// vue.config.js
module.exports = {
transpileDependencies: ['vue-mq', 'vue-carousel', 'firebase', 'vue-lazyload-video']
}
main.ts
import "core-js/stable";
import "regenerator-runtime/runtime";
require('intersection-observer');
import "regenerator-runtime/runtime";
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "#fortawesome/fontawesome-free/css/all.css";
import VueMq from "vue-mq";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import VueCarousel from "vue-carousel";
import "animate.css/animate.css";
import * as firebase from "firebase";
import VueLazyLoadVideo from "vue-lazyload-video";
require("intersection-observer");
require("matchmedia-polyfill");
require("matchmedia-polyfill/matchMedia.addListener");
import "lazysizes";
import "lazysizes/plugins/parent-fit/ls.parent-fit";
import "lazysizes/plugins/blur-up/ls.blur-up";
// Register Components
// LazyVideo & LazyVideoAsGIF
Vue.use(VueLazyLoadVideo);
const firebaseConfig = {
HIDDEN CONFIG FOR STACKOVERFLOW
};
firebase.initializeApp(firebaseConfig);
Vue.use(VueCarousel);
gsap.registerPlugin(ScrollTrigger);
Vue.use(VueMq, {
breakpoints: {
// default breakpoints - customize this
sm: 480,
md: 921,
lg: 1024
}
});
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({})
]
};
package.json
{
"name": "tag",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#firebase/polyfill": "^0.3.36",
"#fortawesome/fontawesome-free": "^5.13.0",
"animate.css": "^4.1.0",
"axios": "^0.19.2",
"core-js": "^3.6.5",
"firebase": "^7.15.5",
"gsap": "^3.4.0",
"intersection-observer": "^0.11.0",
"lazysizes": "^5.2.2",
"matchmedia-polyfill": "^0.3.2",
"uuid": "^8.2.0",
"vue": "^2.6.11",
"vue-carousel": "^0.18.0",
"vue-class-component": "^7.2.3",
"vue-lazyload-video": "^0.1.15",
"vue-mq": "^1.0.1",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#babel/preset-env": "^7.10.4",
"#typescript-eslint/eslint-plugin": "^2.33.0",
"#typescript-eslint/parser": "^2.33.0",
"#vue/cli-plugin-babel": "^4.4.6",
"#vue/cli-plugin-eslint": "~4.4.0",
"#vue/cli-plugin-router": "~4.4.0",
"#vue/cli-plugin-typescript": "~4.4.0",
"#vue/cli-plugin-vuex": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^5.0.2",
"autoprefixer": "^9.8.5",
"cssnano": "^4.1.10",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"fork-ts-checker-webpack-plugin": "^5.0.5",
"google-auth-library": "^6.0.5",
"node-sass": "^4.12.0",
"postcss-import": "^12.0.1",
"postcss-load-config": "^2.1.0",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"prettier": "^1.19.1",
"sass-loader": "^8.0.2",
"sugarss": "^2.0.0",
"typescript": "~3.9.3",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"#vue/typescript/recommended",
"#vue/prettier",
"#vue/prettier/#typescript-eslint"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {}
},
"browserslist": [
"last 1 version",
"> 1%",
"IE 10"
]
}
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"jsx": "preserve",
"allowJs": true,
"strict": false,
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}

Sorry to say this, you can't render a website built with JS based framework (VUE, ReactJS etc) in IE, and the JS engine of Edge (non-chromium) is not capable of handling all features of ES6 standard. If the customer wants to use your website on a Microsoft based browser, then they have to switch to the latest Edge based on Chromium.

Minified React error #321 - React Typescript library build

I am writing my own React library with Typescript. I have a lot of problems with building and using it. I am using webpack with ts loader to build files into lib folder. When I am trying to use my components from build
import React from 'react'
import { Text } from '../lib'
export default () => {
return <Text lg>Blabla</Text>
}
I get an error
index.js:9 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
What is wrong?
tsconfig
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "esnext"],
"allowJs": true,
"outDir": "./lib/",
"noImplicitAny": true,
"allowSyntheticDefaultImports": true,
"module": "esnext",
"jsx": "react",
"moduleResolution": "node",
"esModuleInterop": true,
"declaration": true,
"typeRoots": ["node_modules/#types"]
},
"include": ["src"],
"exclude": ["node_modules"]
}
webpack
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, '../src/index.ts'),
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, '../lib'),
library: 'my-library',
libraryTarget: 'umd',
umdNamedDefine: true
},
plugins: [new CleanWebpackPlugin()]
}
package.json
{
"name": "my-library",
"version": "1.0.0",
"private": true,
"types": "lib",
"main": "lib/index.js",
"dependencies": {
"#types/node": "^14.0.11",
"#types/react": "^16.9.35",
"#types/react-dom": "^16.9.8",
"#types/styled-components": "^5.1.0",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.3.0",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"styled-components": "^5.1.1",
"ts-loader": "^7.0.5",
"typescript": "^3.9.5",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"build": "webpack --config config/webpack.prod.js",
"dev": "webpack-dev-server --mode development --open --hot --config config/webpack.dev.js",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"devDependencies": {
"#babel/core": "^7.10.2",
"#storybook/addon-actions": "^5.3.19",
"#storybook/addon-links": "^5.3.19",
"#storybook/addons": "^5.3.19",
"#storybook/react": "^5.3.19",
"babel-loader": "^8.1.0"
}
}

Develop Reference

JavaScript is the programming language of the Web.

Babel transform import statements - javascript

Related

'Invalid left-hand side in assignment' after webpack and babel build

Rollup produces incorrect Dist structure when test are present

How to parse esm module in vuejs

Why does my vue web app load a blank page in IE11 and look broken in Edge?

Minified React error #321 - React Typescript library build

Categories

Resources