I use React.js, Webpack, ...props syntax, arrow functions.
When I run "npm run build", I get this error:
ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [bundle.js:77854,15]
Here is my debug.log
My webpack.config
How to run build successfully?
I found the line which causes the bug, here it is:
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
I don't know why. :(
Without it, all my ES6 syntax works and compiled without any errors.
Any Help please
This error happens if you use have an npm dependency that has ES6 syntax. It happended to me, too, with Preact (see https://github.com/developit/preact-compat/issues/155).
You can fix it by adding the dependency explicitly to the modules that are loaded through babel, like so:
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: [
srcPath,
// we need to include preact-compat
// otherwise uglify will fail
// #see https://github.com/developit/preact-compat/issues/155
path.resolve(__dirname, '../../../node_modules/preact-compat/src')
]
}
]
}
In bundle.js, line 77854, character 15, there is a parenthese after a object properties name, instead of a :.
There must be something like :
{property () {}}
instead of
{property : function () {}}
Edit (thanks to #handoncloud): The first is valid ES6, and is a shorthand for the second, that is the equivalent in ES5.
The problem is, that the build does not fully support ES6.
Found it.
React-Bootstrap-Table have a dependency named React-Modal.
I installed React Modal by npm install react-modal without --save or --save-dev. So React-Modal wasn't not listed in my package.json.
Now everything is ok.
SOLUTION : npm install react-modal --save
Related
ESLint is throwing a Parsing error: Unexpected token = error when I try to lint my Es6 classes. What configuration parameter am I missing to enable fat arrow class methods in eslint?
Sample class:
class App extends React.Component{
...
handleClick = (evt) => {
...
}
}
.eslint
{
"ecmaFeatures": {
"jsx": true,
"modules":true,
"arrowFunctions":true,
"classes":true,
"spread":true,
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"strict": 0,
"no-underscore-dangle": 0,
"quotes": [
2,
"single"
],
}
}
If you want to use experimental features (such as arrows as class methods) you need to use babel-eslint as a parser. Default parser (Espree) doesn't support experimental features.
First install babel-eslint:
npm i -D babel-eslint
Then add the following to your .eslintrc.json file:
"parser": "babel-eslint"
First install these plugins:
npm i -D babel-eslint eslint-plugin-babel
Then add these settings to your ESLint config file:
{
"plugins": [ "babel" ],
"parser": "babel-eslint",
"rules": {
"no-invalid-this": 0,
"babel/no-invalid-this": 1,
}
}
This way you can use fat arrow class methods plus you will not get any no-invalid-this errors from ESLint.
From what I read in the error message Parsing error: Unexpected token = it looks like more a parser error than linter one.
Assuming you are using Babel as your JavaScript compiler/transpiler and babel-eslint as your ESLint parser, chances are that it is Babel complaining about the syntax, not ESLint.
The issue is not about the arrow functions but something more experimental (ES7??) that I think it is called property initializer or class instance field (or both :) ).
If you want to use this new syntax/feature you need to enable preset-stage-1 in Babel. This preset includes the syntax-class-properties plugin that allows that syntax.
Summing up:
Install babel preset:
npm install babel-preset-stage-1
Add this preset to the list of your presets (I suppose you are already using es2015 and react presets), either in your .babelrc or in your babel-loader query field if you are using webpack.
"presets": ["es2015", "stage-1", "react"]
I came across the same problem today
and #dreyescat 's answer works for me.
By default, babel uses 3 presets: es2015, react, stage-2
Screenshot with "Parsing error: Unexpected token ="
Then if you also select the stage-1preset, the error is gone
Screenshot with no error
You can test it on the bebeljs.io site yourself
2021 Update: Be sure you're using #babel/eslint-parser and not the deprecated babel-eslint
Remove the old package if necessary: yarn remove babel-eslint or npm uninstall babel-eslint
yarn add --dev #babel/eslint-parser or npm install --save-dev #babel/eslint-parser
In .eslintrc add "parser": "#babel/eslint-parser"
Optionally, this answer suggests including "requireConfigFile": false in .eslintrc to prevent eslint from searching for unnecessary config files:
{
...
"parserOptions": {
...
"requireConfigFile": false,
}
}
If this still doesn't work, try checking whether your system is using a globally installed eslint (and removing it).
My other problem was eslint was using a globally installed version instead of my local version, and the global eslint can't access my locally installed babel-eslint parser. Further, since my globally installed eslint was installed on a different version of node, removing it was non-trivial.
Checking if your system is using global versus local eslint.
Install babel-eslint following #spencer.sm's answer for your local eslint.
From the terminal, check if you get different output from running eslint . and npx eslint .. If you get different output it's likely that it's your global eslint running that can't access babel-eslint.
Uninstalling the global eslint
For most people, the following commands should uninstall eslint with npm (uninstall global package with npm) and yarn (uninstall global package with yarn):
# npm
npm uninstall -g eslint
npm uninstall eslint
# yarn
yarn global remove eslint
Next, run npx eslint . to see if things work. If it doesn't, which it didn't for me, you need to take an extra step to remove the globally installed eslint.
From this answer, I learned that I had installed eslint on a system version of Node instead of my current version of Node (I use nvm). Follow these simple steps to remove the global eslint and you should be good to go!
Your sample isn't valid ES6, so there's no way to configure eslint to allow it
I am currently building my angular project via webpack with source-map-loader to extract source maps, like so:
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
enforce: "pre",
use: ["source-map-loader"],
},
],
},
};
This works fine with my Angular 11 build.
Once I upgrade my angular packages to Angular 12, I begin to get the following error:
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (./node_modules/source-map-loader/dist/index.js:21:24)
Removing this section from my webpack module allows the build to succeed but I am no longer extracting the source maps, causing my bundle to increase in size.
I have tried upgrading source-map-loader to latest version and did not change the error.
I have dug into the node_module and it is complaining about this section of code:
async function loader(input, inputMap) {
const options = this.getOptions(_options.default);
I have seen may other questions on here in regards to sass-loader and other style loaders for Vue but this is for Angular and is mad about extracting source maps.
There are some breaking changes when going to Angular 12 but upgrading to webpack 5.0.0 did not seem to make a difference
What are some other things I can do to debug this?
By looking at the source code v1.1.3 we do see
import { getOptions } from "loader-utils";
But after v2.0 or even v3.0, this import was deleted.
It came from the library loader-utils
Since v2.0, package.json doesn't import it anymore.
Looks like it has been deprecated, getOptions should be use from Webpack type instead of loader-utils.
Maybe your error come from a conflict with an old dependencie from your node_modules, you should remove the old one from your directory and try again
rm -rf node_modules/#types/loader-utils
rm -rf node_modules/loader-utils
I am taking a course on Udemy (it is Brad Schiff's React for the Rest of Us course here) that is based on React and I am receiving an error related to webpack which is keeping it from compiling.
I am getting the following error as I am trying to compile my webpack file from a Udemy course I am taking... here is a picture of the error I am receiving on my terminal:
please view it here
Here is the text of the error but please view the link for more details as a screenshot nonetheless:
Module not found: Error: Can't resolve 'path' in '/Users/seanmodd/Development/2021/BradSchiff/Frontend/node_modules/webpack/lib/util'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
# ./node_modules/webpack/lib/CleanPlugin.js 12:17-37
# ./node_modules/webpack/lib/index.js 115:9-33
# ./node_modules/dotenv-webpack/dist/index.js 12:15-33
# ./node_modules/dotenv-webpack/browser.js 1:13-38
# ./app/components/HomeGuest.js 5:15-40
# ./app/Main.js 8:0-47 38:96-105
Run npm install node-polyfill-webpack-plugin in your terminal`
go to your webpack.config.js and paste this:
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = {
// Other rules like entry, output, devserver....,
plugins: [
new NodePolyfillPlugin()
]}
this should fix it, they removed automatic polyfills in webpack 5 that's why downgrading web3 version will fix it too
They have removed automatic polyfills in webpack 5. We have to include them ourselves.
More info here
By looking at the error stack, we see that ./app/components/HomeGuest.js line 15 requires the path module.
If you really need the path module on the client side, you have to add this in the webpack config file:
module.exports = {
// ... your config
resolve: {
fallback: {
path: require.resolve("path-browserify")
}
}
}
And also, install the path-browserify module (npm install path-browserify).
However, you may not need this module on the client side, and then the fix is to edit the HomeGuest.js file line 15 in such a way that the path module is not required.
I just started to use Babel to compile my ES6 javascript code into ES5. When I start to use Promises it looks like it's not working. The Babel website states support for promises via polyfills.
Without any luck, I tried to add:
require("babel/polyfill");
or
import * as p from "babel/polyfill";
With that I'll get the following error on my app bootstrapping:
Cannot find module 'babel/polyfill'
I searched for the module but it seems I'm missing some fundamental thing here. I also tried to add the old and good bluebird NPM but it looks like it's not working.
How to use the polyfills from Babel?
This changed a bit in babel v6.
From the docs:
The polyfill will emulate a full ES6 environment. This polyfill is automatically loaded when using babel-node.
Installation:
$ npm install babel-polyfill
Usage in Node / Browserify / Webpack:
To include the polyfill you need to require it at the top of the entry point to your application.
require("babel-polyfill");
Usage in Browser:
Available from the dist/polyfill.js file within a babel-polyfill npm release. This needs to be included before all your compiled Babel code. You can either prepend it to your compiled code or include it in a <script> before it.
NOTE: Do not require this via browserify etc, use babel-polyfill.
The Babel docs describe this pretty concisely:
Babel includes a polyfill that includes a custom regenerator runtime
and core.js.
This will emulate a full ES6 environment. This polyfill is
automatically loaded when using babel-node and babel/register.
Make sure you require it at the entry-point to your application, before anything else is called. If you're using a tool like webpack, that becomes pretty simple (you can tell webpack to include it in the bundle).
If you're using a tool like gulp-babel or babel-loader, you need to also install the babel package itself to use the polyfill.
Also note that for modules that affect the global scope (polyfills and the like), you can use a terse import to avoid having unused variables in your module:
import 'babel/polyfill';
For Babel version 7, if your are using #babel/preset-env, to include polyfill all you have to do is add a flag 'useBuiltIns' with the value of 'usage' in your babel configuration. There is no need to require or import polyfill at the entry point of your App.
With this flag specified, babel#7 will optimize and only include the polyfills you needs.
To use this flag, after installation:
npm install --save-dev #babel/core #babel/cli #babel/preset-env
npm install --save #babel/polyfill
Simply add the flag:
useBuiltIns: "usage"
to your babel configuration file called "babel.config.js" (also new to Babel#7), under the "#babel/env" section:
// file: babel.config.js
module.exports = () => {
const presets = [
[
"#babel/env",
{
targets: { /* your targeted browser */ },
useBuiltIns: "usage" // <-----------------*** add this
}
]
];
return { presets };
};
Reference:
usage#polyfill
babel-polyfill#usage-in-node-browserify-webpack
babel-preset-env#usebuiltins
Update Aug 2019:
With the release of Babel 7.4.0 (March 19, 2019) #babel/polyfill is deprecated. Instead of installing #babe/polyfill, you will install core-js:
npm install --save core-js#3
A new entry corejs is added to your babel.config.js
// file: babel.config.js
module.exports = () => {
const presets = [
[
"#babel/env",
{
targets: { /* your targeted browser */ },
useBuiltIns: "usage",
corejs: 3 // <----- specify version of corejs used
}
]
];
return { presets };
};
see example: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3
Reference:
7.4.0 Released: core-js 3, static private methods and partial
application
core-js#3, babel and a look into the future
If your package.json looks something like the following:
...
"devDependencies": {
"babel": "^6.5.2",
"babel-eslint": "^6.0.4",
"babel-polyfill": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babelify": "^7.3.0",
...
And you get the Cannot find module 'babel/polyfill' error message, then you probably just need to change your import statement FROM:
import "babel/polyfill";
TO:
import "babel-polyfill";
And make sure it comes before any other import statement (not necessarily at the entry point of your application).
Reference: https://babeljs.io/docs/usage/polyfill/
First off, the obvious answer that no one has provided, you need to install Babel into your application:
npm install babel --save
(or babel-core if you instead want to require('babel-core/polyfill')).
Aside from that, I have a grunt task to transpile my es6 and jsx as a build step (i.e. I don't want to use babel/register, which is why I am trying to use babel/polyfill directly in the first place), so I'd like to put more emphasis on this part of #ssube's answer:
Make sure you require it at the entry-point to your application,
before anything else is called
I ran into some weird issue where I was trying to require babel/polyfill from some shared environment startup file and I got the error the user referenced - I think it might have had something to do with how babel orders imports versus requires but I'm unable to reproduce now. Anyway, moving import 'babel/polyfill' as the first line in both my client and server startup scripts fixed the problem.
Note that if you instead want to use require('babel/polyfill') I would make sure all your other module loader statements are also requires and not use imports - avoid mixing the two. In other words, if you have any import statements in your startup script, make import babel/polyfill the first line in your script rather than require('babel/polyfill').
babel-polyfill allows you to use the full set of ES6 features beyond
syntax changes. This includes features such as new built-in objects
like Promises and WeakMap, as well as new static methods like
Array.from or Object.assign.
Without babel-polyfill, babel only allows you to use features like
arrow functions, destructuring, default arguments, and other
syntax-specific features introduced in ES6.
https://www.quora.com/What-does-babel-polyfill-do
https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423
Like Babel says in the docs, for Babel > 7.4.0 the module #babel/polyfill is deprecated, so it's recommended to use directly core-js and regenerator-runtime libraries that before were included in #babel/polyfill.
So this worked for me:
npm install --save core-js#3.6.5
npm install regenerator-runtime
then add to the very top of your initial js file:
import 'core-js/stable';
import 'regenerator-runtime/runtime';
I'm currently trying to use emoji-dictionary on my project but it fails to run!
I'm receive the index.js:2 Uncaught Error: Cannot find module "./emojis" error!
Since the reactjs tag appears, I speculate you use Webpack and you didn't set up the json-loader. emojis.json is a file from the emojilib package which is a dependency of emoji-dictionary.
Install json-loader:
npm install --save-dev json-loader
And then configure it:
module.exports = {
module: {
rules: [
{
test: /\.json$/,
use: 'json-loader'
}
]
}
}
Check out json-loader on GitHub for more information.
If this is not solving the issue, you may need to explain a little bit the context. It seems to not be related to the package itself because •it's working on my machine•. 😅