I have a simple Vue.js application which works perfectly on other browsers than IE, which shows a blank page with an error SCRIPT1003: Expected ':'. I have added a vue.config.js file which looks like that:
module.exports = {
transpileDependencies: ["bootstrap-css-only", "mdbvue"]
};
My .babelrc file is a default one taken from the official project starting page, this is:
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}
],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
In my main.js file I tried 2 approaches:
import "core-js/stable";
import "regenerator-runtime/runtime";
and
import "#babel/polyfill";
Both didn't change anything and the error and behaviour is the same. The only one thing which still comes to my mind to solve this problem is mentioned here, i.e. in export default I'm using the following syntax for component:
components: {
mdbContainer,
mdbRow,
mdbCol,
mdbCard,
mdbCardBody,
mdbInput,
mdbBtn,
mdbIcon,
mdbModalFooter,
mdbView
}
Edit2: But if I'll drop this lines then all my UI elements from MDBootstrap are gone. Is there any other way to use it? I wanted simply to use polyfills.
I tried to create babel.config.js file, but also didn't help. The logic in this file is like that:
module.exports = {
presets: [["#vue/app", { useBuiltIns: "entry" }]]
};
Is there anything I'm missing? What I understood the vue.config.js file doesn't has to be imported anywhere, because vue.config.js is an optional config file that will be automatically loaded by #vue/cli-service. Here are my questions:
Any ideas what can be wrong?
Shall I have babel.config.js and .babelrc or only one of these?
Is babel.config.js file automatically detected like vue.config.js?
[Edit] Maybe something in webpack configuration should be changed?
Vue CLI version:
$ vue --version
3.11.0
I had a similar issue. I recreated the project using vue-cli 4 and left all the defaults alone.I did not reference babel or core-js in my main.js. I looked at the console error in IE to see which library was causing the script error,( lets call it some-imported-lib ). Then I added that library in vue.config.js as follows
transpileDependencies:['some-imported-lib']
The problem is that IE11 doesn't support shorthand property notation, but you're using that in your components list. Your .babelrc isn't set to ensure that the resulting code can run on IE11.
You'll want to review the browserlist documentation to fine-tune your browsers setting, but for instance adding IE 11 to it will ensure that the transpiled code has all the transforms required to run on IE11.
Note that IE11 basically doesn't support anything in ES2015+. (It has const and a broken version of let, but that's basically it.) So doing this will effectively transpile all your code to ES5 levels. You may want to serve different bundles to IE and to other, more modern browsers.
Related
I'm building a react app with parcel. I have an eslint config set up that I like, and use VSCode tools to catch eslint errors and fix them as I code. The app builds correctly as of now. So all that is fine.
However, as an added precaution, I would like to set up parcel to run eslint, using my config, and to halt the build process and output an error when I havent followed the eslint rules, either when running dev server or building for production.
I'm aware of this npm package from googling, but the package doesnt have a readme, and i can't find setup instructions in the parcel docs: https://www.npmjs.com/package/#parcel/validator-eslint
For reference I am using parcel 1.12.3 but would be open to changing to parcel 2.x.x if that is neccesary.
Thanks!
In parcel v2, you can use the #parcel/validator-eslint plugin to accomplish this. Here's how:
Install eslint and #parcel/validator-eslint in your project. Note that this plugin will currently only work with eslint v7 or earlier due to this bug (which hopefully we can fix soon ;-))
yarn add -D eslint#7 #parcel/validator-eslint
Add an .eslintrc.json file to your project with your configuration. It's best to use a static config file (like .json or .yaml) rather than a dynamic one (like .js) if you can, because that helps parcel's caching be more efficient and faster (see docs). Here's a basic file example that works, but you can extend this to suit your needs by checking out the eslint docs:
{
"env": {
"browser": true
},
"extends": [
"eslint:recommended"
],
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module"
}
}
Tell configure parcel to use the plugin for javascript files by adding a .parcelrc file at the root of your project (or modify your existing .parcelrc file to include the "validators" entry below):
{
"extends": "#parcel/config-default",
"validators": {
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
"#parcel/validator-eslint"
]
}
}
Now, if you have an eslint error, it should bubble up through parcel like this:
🚨 Build failed.
#parcel/validator-eslint: ESLint found 1 errors and 0 warnings.
C:\Users\ansteg\Projects\parcel-eslint-example\src\index.js:2:7
1 | // This unused variable should trigger an ESLint error.
> 2 | const unusedVar = "Hello!";
> | ^^^^^^^^^^ 'unusedVar' is assigned a value but never used.
3 |
See this github repo for a working example.
Although I am able to start the npm project using npm start without any issues with webpack or babel, once I run npm test, I find the following error related to testing App.js using App.test.js (where App.js imports ApolloClient):
TypeError: Cannot assign to read only property '__esModule' of object '[object Object]'
| import ApolloClient from 'apollo-boost';
| ^
at node_modules/apollo-boost/lib/bundle.cjs.js:127:74
at Array.forEach (<anonymous>)
at Object.<anonymous> (node_modules/apollo-boost/lib/bundle.cjs.js:127:36)
Essentially, I'm confused as to why I get an error when running the test but not when starting the project.
I've tried adding in a number of babel plugins to both .babelrc and in my webpack config file:
#babel/plugin-transform-object-assign
#babel/plugin-transform-modules-commonjs
babel-plugin-transform-es2015-modules-commonjs
However, I haven't been able to resolve the issue. My thinking was that this is related to the fact that the file that fails to compile was originally CommonJS.
I was only able to find something relatively similar here, https://github.com/ReactTraining/react-router/pull/6758, but I didn't find a solution.
Is there something that I'm missing specifically related to running tests? I should also mention I've tried frameworks other than Jest and ran into the same issue.
EDIT:
I removed everything from App.test.js except the imports to isolate the issue so it just contains the following:
import React from 'react';
import { shallow } from 'enzyme/build';
import App from './App';
UPDATE:
I was able to resolve the initial error by upgrading apollo-boost from version 0.3.1 to 0.4.2. However, I now have a different error that is similarly frustrating. I am using Babel 7 and have added the plugin #babel/plugin-syntax-dynamic-import to both my .babelrc and to my webpack.config.js files. Despite this, I get the following error related to the use of a dynamic import in App.js when running the Jest to test App.test.js:
SyntaxError: Support for the experimental syntax 'dynamicImport' isn't currently enabled
Add #babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.
I'm not sure if there is a parsing error or something else, but I've tried numerous things that have not worked. The closest discussion I could find related to this problem is, https://github.com/facebook/jest/issues/5920, however, the proposed solutions don't work for me.
UPDATE:
One thing that I'm trying is to avoid duplication of the babel options as right now they're both in .babelrc and in the babel-loader options within webpack.config.js. From what I found online (Whats the difference when configuring webpack babel-loader vs configuring it within package.json?), the way to make webpack use the settings in .babelrc is to not specify options. However, doing so results in the same error described above showing up only this time when running npm start. I will add that the project that was originally created using create-react-app, however, in order to support multiple pages, I needed to customize webpack's configuration and so ejected from it. I'm not sure why this is so convoluted.
its probably a babel configuration issue, I'm pretty sure jest needs to be compiled to work with create-react-app...
did you specify a setup file in package.json:
"jest": {
"setupFiles": [
"/setupTests.js"
]
}
and in setupTests.js:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
It turns out that one of the components in the project's src directory had its own local package.json file even though it wasn't being used and was not installed as a local dependency in the top level package.json (instead imports were done using relative urls). For some reason, the existence of this file changed the behavior of webpack and other tools when starting and testing the project such that none of the top level configurations were used for files within directories with separate package.json files. Once I removed these local package.json files from the components sub-directory, all the prior issues were resolved. One hallmark of this problem is that compilation errors were not showing up for JavaScript files that weren't nested under an alternate package.json file.
Hopefully this is useful for anyone that encounters similar errors as I don't think the cause can be directly determined from the compiler messages alone.
The documents talk about using external in the context of the node resolve plugin, but I am not using that. I would like to exclude lit-html (which is native es6 modules) so that those imports remain in the bundle.
In my module I import them with import { html, render } from '../../node_modules/lit-html/lit-html.js'; and it works great in the browser.
I have tried every permutation of path including relative path like rollup --format=esm --file=dist/bundle.js -- src/main.js --external 'node_modules/lit-html/lit-html.js' and just get [!] Error: Could not resolve entry (--external).
It does not even say if the file is found, never mind what the problem is.
Seems your command is wrong, use -i to indicate the input file or try moving -- src/main.js to the end of the command without the dashes.
Regarding the external part, don't think it will work without using the exact id of the import but worth a try.
Using a config file:
module.exports = {
input: 'src/main.js',
external:[
'../../node_modules/lit-html/lit-html.js'
],
output: {
format: 'esm',
file: './dist/bundle.js',
sourcemap: true
}
}
I am running an Angular 4 project with Webpack 2.4.
For some reason, some of the third party Javascript plugins files are being modified after compilation, and they are shown in the browser's debugger as a very long, one line string:
This is very inconvenient because I can't use Chrome / FF debugger, as I am unable to set up any breakpoint in there.
Following some of the already posted questions in this site and many others, I extracted the webpack.config.js file by executing ng eject
The section where the js files are imported look as follows:
{
...
"scripts": [
...
"script-loader!./node_modules/handsontable-pro/dist/handsontable.full.js",
...
],
"styles": [
...
]
},
"output": {
"path": path.join(process.cwd(), "dist"),
"filename": "[name].bundle.js",
"chunkFilename": "[id].chunk.js"
}
The file handsontable.full.js does not look like that in my project's folder. It seems to be pretty structured. It seems to suffer some kind of modification when the application is built and served.
More puzzling, many other files in the node_modules folder do not have the same problem.
Now, I tried to tweak the webpack.config.js, as suggested in many forums, specifically SourceMapDevToolPlugin, but with very little luck.
So, several questions arise here:
What is happening here? The transformed file doesn't seem to be a minified file, or a hashed file... What is it?
How can I prevent this from happening, so I can set up breakpoints in that file and use the browser's debugger for tracing, var inspect, etc.
Check the devtool: property in the Webpack config object. If it's set to eval, cheap-eval-source-map (or something like it, don't remember all the eval options), try changing it to source-map or cheap-source-map.
Full list of options here: https://webpack.js.org/configuration/devtool/
I'm trying to use this library in my Angular 2 project. I've tried:
npm install search-query-parse --save
And then:
Adding via <script> in index.ts - doesn't understand export in file (understandably)
Adding through RequireJS by adding it to the config file and then using import { searchQuery} from 'search-query-parser'; - I can see the file is loaded through the network inspector, though I can't use it... I get Unhandled Promise rejection: (SystemJS) Can't resolve all parameters
What am I missing?
EDIT:
Here is my system-config.ts (the relavant parts...)
map: {
'search-query-parser': 'npm:search-query-parser'
},
packages: {
'search-query-parser': { main: './index.js', defaultExtension: 'js'
}
It largely depends on the module itself in your case.
There are several ways to fix this, but the easiest one in this circumstance is using:
import * as searchQuery from 'search-query-parse'
This will fix the issue because it will import everything in the searchQuery constant, so you will use:
searchQuery.parse(params)
because the library exposes a .parse method.
Alternatively, you can also import the parse method only:
import { parse } from 'search-query-parse'
and use it as parse(params)
That is because the brackets notation ({}) will look exactly for the method / property exported by the module that exposes the name provided in the brackets.
If you still have no success with both methods, it's likely that the module is not being include at all by SystemJS (however, an error should be shown in that case).
There are several fixes for such an issue (where one of them is to search for a node or SystemJS module that actually is compliant with typescript), but the easiest one is looking for the HTML file where the systemjs config is included, locating the wrapper (System.import(app)) and, before such call, defining by yourself the module:
System.set("search-query-parse", System.newModule(require('search-query-parse'));
In this way, you're telling SystemJS that, at runtime, it needs to make the Node Module "search-query-parse" available under "search-query-parse", so using in typescript he vanilla-style require:
const sqp = require('search-query-parser');
Please note that there also are other ways to fix such an issue (usually through the systemjs file), however these likely are the easiest and portable ones.
This is typically how you'd bring in an external script such that it's bundled and available to the app (assuming you are using the CLI): in angular-cli.json, note the "script" element. Try putting it there, it will then be bundled and the deps will (hopefully) resolve. I've done this for a number of different scripts, they always work.
"mobile": false,
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css",
"styles.css"
],
"scripts": ["./app/my_script.js"],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
Wrote an article on that: http://www.tcoz.com/newtcoz/#/errata