with this webpack config:
{ test: /\.tsx?$/,
use:[
{
loader:'babel-loader',
options: {
presets:['#babel/preset-env']
}
},
{
loader:'ts-loader'
}]
},
I get an error message Error: Cannot find module 'babel-preset-es2015'
If I add that module I get two errors
babel-preset-es2015 is deprecated, use babel-preset-env
But when I install babel-preset-env I still get error about not finding babel-preset-es2015
When I install babel-preset-es2015 I get the error
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/henrikbechmann/Servers/tribalopolis/www/tribalopolis.com/node_modules/babel-preset-es2015/lib/index.js
So it's a complete trap!
Any suggestions?
Answer: Mostly a matter of updating .babelrc
{
"presets": [
"#babel/env",
"#babel/react"
]
}
and of course updating modules
tip: try npx update-babel
Related
I'm troubleshooting a webpack error.
Command: bin/webpack --colors --progress
Produces this error:
ERROR in ./node_modules/#flatfile/sdk/dist/index.js 351:361
Module parse failed: Unexpected token (351:361)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| class v extends i {
| constructor(e, t) {
> super(e), r(this, "code", "FF-UA-00"), r(this, "name", "UnauthorizedError"), r(this, "debug", "The JWT was not signed with a recognized private key or you did not provide the necessary information to identify the end user"), r(this, "userMessage", "There was an issue establishing a secure import session."), e && (this.debug = e), this.code = t ?? "FF-UA-00";
| }
| }
# ./app/javascript/src/app/pages/content_assets/Index.vue?vue&type=script&lang=ts& (./node_modules/babel-loader/lib??ref--8-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/src/app/pages/content_assets/Index.vue?vue&type=script&lang=ts&) 22:0-41 125:6-14
# ./app/javascript/src/app/pages/content_assets/Index.vue?vue&type=script&lang=ts&
# ./app/javascript/src/app/pages/content_assets/Index.vue
# ./app/javascript/packs/app.js
NOTES
I found what appears to be an identical issue reported in the Flatfile project: https://github.com/FlatFilers/sdk/issues/83
Looks like ES2020 was emitted to the /dist folder so my cra babel loader is not able to parse it, in order to fix it I need to include the path on my webpack config.
Node v16.13.1
We're using webpack with a Rails project via the webpacker package (#rails/webpacker": "5.4.3") which is depending on webpack#4.46.0.
When I change to Node v14x and rebuild node_modules (yarn install) webpack compiles successfully.
The line referenced in the error (351:361) does not exist when I go check the file in node_modules/
We have a yarn.lock file, which I delete and recreate before running yarn install. I also delete the node_modules directory to ensure a "fresh" download of the correct packages.
We have a babel.config.js file...
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')
if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(currentEnv) +
'.'
)
}
return {
presets: [
isTestEnv && [
'#babel/preset-env',
{
targets: {
node: 'current'
}
}
],
(isProductionEnv || isDevelopmentEnv) && [
'#babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: false,
exclude: ['transform-typeof-symbol']
}
],
["babel-preset-typescript-vue", { "allExtensions": true, "isTSX": true }]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'#babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'#babel/plugin-transform-destructuring',
[
'#babel/plugin-proposal-class-properties',
{
loose: true
}
],
[
'#babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'#babel/plugin-transform-runtime',
{
helpers: false,
regenerator: true,
corejs: false
}
],
[
'#babel/plugin-transform-regenerator',
{
async: false
}
]
].filter(Boolean)
}
}
Ultimately I want to get webpack to compile. If you had advice about any of the following questions, it would help a lot.
Why would changing the Node version (only) cause different webpack behavior? We aren't changing the the webpack version or the version of the #flatfile package that's causing the error.
Why is the error pointing to a line that doesn't exist in the package? Is this evidence of some kind of caching problem?
Does the workaround mentioned in the linked GitHub issue shed light on my problem?
I'll take a stab at this.
I believe your issue is that webpack 4 does not support the nullish coalescing operator due to it's dependency on acorn 6. See this webpack issue and this PR comment.
You haven't specified the exact minor version of Node.js 14x that worked for you. I will assume it was a version that did not fully support the nullish coalescing operator, or at least a version that #babel/preset-env's target option understood to not support ??, so it was transpiled by babel and thus webpack didn't complain. You can see what versions of node support nullish coalescing on node.green.
I don't fully understand the point you are making here, so not focusing on this in the proposed solution.
I'm not sure what the proposed workaround is in the linked issue, maybe the comment about "include the path on my webpack config", but yes the issue does seem relevant as it is pointing out the nullish coalescing operator as the source of the issue.
You can try to solve this by
adding #babel/plugin-proposal-nullish-coalescing-operator to your babel config's plugins
updating your webpack config to run #flatfile/sdk through babel-loader to transpile the nullish coalescing operator:
{
test: /\.jsx?$/,
exclude: filename => {
return /node_modules/.test(filename) && !/#flatfile\/sdk\/dist/.test(filename)
},
use: ['babel-loader']
}
Another possibility is to upgrade webpacker to a version that depends upon webpack v5.
One final remark, when you say
We have a yarn.lock file, which I delete and recreate before running yarn install.
you probably should not be deleting the lock file before each install, as it negates the purpose of a lock file altogether.
I successfully installed Vuejs and Nodejs but got a problem when installing Nuxtjs. This is what I get. I already asked some friends but it didn't work. Thanks for your help ! :)
Error : Rule can only have one resource source (provided resource and test + include + exclude)
Rule can only have one resource source (provided resource and test + include + exclude) in {
"use": [
{
"loader": "C:\\Users\\User\\Desktop\\JS\\my-first-project\\node_modules\\babel-loader\\lib\\index.js",
"options": {
"configFile": false,
"babelrc": false,
"cacheDirectory": true,
"envName": "server",
"presets": [
[
"C:\\Users\\User\\Desktop\\JS\\my-first-project\\node_modules\\#nuxt\\babel-preset-app\\src\\index.js",
{
"corejs": {
"version": 3
}
}
]
]
},
"ident": "clonedRuleSet-30[0].rules[0].use[0]"
}
]
}
"use": [
{
"loader": "C:\\Users\\User\\Desktop\\JS\\my-first-project\\node_modules\\babel-loader\\lib\\index.js",
"options": {
"configFile": false,
"babelrc": false,
"cacheDirectory": true,
"envName": "server",
"presets": [
[
"C:\\Users\\User\\Desktop\\JS\\my-first-project\\node_modules\\#nuxt\\babel-preset-app\\src\\index.js",
{
"corejs": {
"version": 3
}
}
]
]
},
"ident": "clonedRuleSet-30[0].rules[0].use[0]"
}
]
}
at checkResourceSource (node_modules\#nuxt\webpack\node_modules\webpack\lib\RuleSet.js:167:11)
at Function.normalizeRule (node_modules\#nuxt\webpack\node_modules\webpack\lib\RuleSet.js:198:4)
at node_modules\#nuxt\webpack\node_modules\webpack\lib\RuleSet.js:110:20
at Array.map (<anonymous>)
at Function.normalizeRules (node_modules\#nuxt\webpack\node_modules\webpack\lib\RuleSet.js:109:17)
at new RuleSet (node_modules\#nuxt\webpack\node_modules\webpack\lib\RuleSet.js:104:24)
at new NormalModuleFactory (node_modules\#nuxt\webpack\node_modules\webpack\lib\NormalModuleFactory.js:115:18)
at Compiler.createNormalModuleFactory (node_modules\#nuxt\webpack\node_modules\webpack\lib\Compiler.js:636:31)
at Compiler.newCompilationParams (node_modules\#nuxt\webpack\node_modules\webpack\lib\Compiler.js:653:30)
at Compiler.compile (node_modules\#nuxt\webpack\node_modules\webpack\lib\Compiler.js:661:23)
at node_modules\#nuxt\webpack\node_modules\webpack\lib\Watching.js:77:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:22:1)
at AsyncSeriesHook.lazyCompileHook (node_modules\tapable\lib\Hook.js:154:20)
at Watching._go (node_modules\#nuxt\webpack\node_modules\webpack\lib\Watching.js:41:32)
at node_modules\#nuxt\webpack\node_modules\webpack\lib\Watching.js:33:9
at Compiler.readRecords (node_modules\#nuxt\webpack\node_modules\webpack\lib\Compiler.js:529:11)
npm i -D webpack#^4.46.0 try this, it worked for me.
I've had the same issue today, it seems to be related to an npm dependencies resolution issue.
I have opened an issue in nuxt.js repository
In my project, the issue was present, cause of #nuxtjs/eslint-module, you can remove it and regen dependencies :
npm uninstall #nuxtjs/eslint-module
rm -rf node_modules package-lock.json
npm install
You will not longer have eslint feedbacks in your build command, but you can still use npm run lint, and you will be able to use nuxt until the issue will be fixed.
I ran into this same error while trying to upgrade one of my old NuxtJS projects (using sass) built on node version 12 to version 16.
To fix this, i also installed #nuxtjs/style-resources that matches my versions of sass-loader and node-sass.
To confirm, uninstall the ones you already have, and run
npm install --save-dev node-sass sass-loader#10 fibers #nuxtjs/style-resources
see this article for more
This happened to me when I installed the most recent version of copy-webpack-plugin in Nuxt v2 project. Apparently it doesn't use webpack5 so I had to downgrade copy-webpack-plugin to last compatible version e.g. copy-webpack-plugin#4.6.0
I'm trying to make use of the jsonapi-vuex npm package. I import it within my code like so:
import { jsonapiModule } from "jsonapi-vuex";
Jest however stumbles over this package. This package uses es6 modules. The index.js for that node module looks like this:
export { jsonapiModule, utils } from './src/jsonapi-vuex'
Jest fails on this even though babel-jest is installed with the following error:
Jest encountered an unexpected token
/node_modules/jsonapi-vuex/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { jsonapiModule, utils } from './src/jsonapi-vuex'
^^^^^^
I've tried various things:
Tried adding to jest config so that just shouldn't ignore this library when transpiling:
transformIgnorePatterns: [
"<rootDir>/node_modules/(?!jsonapi-vuex)"
],
Tried the babel-plugin-transform-es2015-modules-commonjs plugin
As far as I can tell, babel-jest makes use of .babelrc. I have this configured with the #babel/preset-env preset, which is supposed to handle es6 modules... so I really don't understand why it is failing. Here's the .babelrc
{
"presets": [
[
"#babel/preset-env",
{
"modules": "commonjs",
"targets": {
"node": "current"
}
}
]
]}
I'm trying to use rollup for the first time and I can't figure out why I get this error :
TypeError: eslint is not a function
I previously installed rollup (v1.1.0) then eslint npm install rollup-plugin-eslint (v5.0.0)
here is my rollup.config.js
import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';
export default {
input: 'src/main.js',
output: {
format: 'iife',
file: 'build/js/main.min.js',
name: 'main'
},
plugins: [
eslint({
exclude: [
'src/styles/**',
]
}),
babel({
exclude: 'node_modules/**',
}),
],
}
When I use ./node_modules/.bin/rollup -c I get this error TypeError: eslint is not a function. (NB : rollup is working fine with only babel)
However it works if I use npm run lint adding this code in package.json
"scripts": {
"lint": "eslint src/**"
}
What do I do wrong with the rollup configuration ?
Thanks for your help
Try changing:
- import eslint from 'rollup-plugin-eslint';
+ import { eslint } from 'rollup-plugin-eslint';
Release notes for v5.0.0
I'm having issues using npm packages with rollup (specifically lodash).
I'm getting an unresolved dependencies error. I have installed both rollup-plugin-node-resolve and rollup-plugin-commonjs and configured according to the docs. It's possible I could have missed something obvious.
Error
[~/Projects/rollup] yarn run build
yarn run v1.2.1
$ rollup -c
src/main.js → ./build/app.js...
(!) Unresolved dependencies
https://github.com/rollup/rollup/wiki/Troubleshooting#treating-module-as-external-dependency
loadash (imported by src/main.js)
(!) Missing global variable name
Use options.globals to specify browser global variable names corresponding to external modules
loadash (guessing 'loadash')
created ./build/app.js in 47ms
✨ Done in 0.93s.
src/main.js
import { map } from 'loadash';
console.log('Test');
rollup.config.js
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
export default {
input: 'src/main.js',
output: {
file: './build/app.js',
format: 'iife'
},
plugins: [
resolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs()
]
};
What am I doing wrong?
It's called lodash, not loadash!