In one of my ts files i have a import statement
Import { sp } from “#pnp/sp/presets/all”
Due to which get the unexpected token error in “node_modules#pnp\sp\presets\all.js”
I tried to exclude the node modules
by using below configuration in packge.json
“transformIgnorePatterns”: [
“node_modules/(?!(#pnp))“
]
But same issue ..
I tried changing the transformIgnorePattern configuration but still no luck ..
Related
Following these steps:
Install fresh vuejs 2. Don't change package.json.
Install vue-notion package. This is a renderer for the Notion based on vuejs.
Inject the NotionRenderer object into any page like in an official example: import { NotionRenderer } from 'vue-notion'
Run npm run serve or yarn serve (I've tried both)
... I get the following error while compiling:
error in ./node_modules/vue-notion/dist/esm.js
Module parse failed: Unexpected token (1793:175)
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
|
| // return empty notion decorated text if row is empty
> return (this === null || this === void 0 ? void 0 : (_this$properties = this.properties) === null || _this$properties === void 0 ? void 0 : _this$properties[columnId]) ?? [[" ", false]];
| },
|
# ./src/main.js 9:0-44
# multi (webpack)-dev-server/client?http://192.168.0.107:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
The problem is the nullish coalescing operator (??) at the end of the string.
I've tried to add #babel/plugin-proposal-nullish-coalescing-operator into babel.config, but it still doesn't work:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
],
plugins: [
'#babel/plugin-proposal-nullish-coalescing-operator',
],
}
How can I fix it? What kind of a loader should I use to compile the code?
Thank #Jonathan. I've solved this problem by adding a transpile directive into vue.config.js:
module.exports = {
transpileDependencies: ["vue-notion"]
}
I am using Vue 3 and added highchartsjs according to the docs. I am getting this error:
✘ [ERROR] Could not resolve "highcharts"
node_modules/highcharts-vue/dist/highcharts-vue.min.js:1:90:
1 │ ...?module.exports=e(require("highcharts"),require("vue")):"functio...
╵ ~~~~~~~~~~~~
You can mark the path "highcharts" as external to exclude it from the bundle,
which will remove this error. You can also surround this "require" call with a
try/catch block to handle this failure at run-time instead of bundle-time.
I tried excluding it from bundle as suggested but it's not working:
vite.config.js
export default defineConfig({
...
build: {
rollupOptions: {
external: ['highcharts'],
}
},
})
This works:
export default defineConfig({
...
optimizeDeps: {
exclude: ['highcharts'],
}
})
Excluding highcharts via optimizeDeps.exclude would clear the error, but that would defeat your ultimate goal of using highcharts in your project. You'll notice that after using that config, your project still is not able to import highcharts. The error is indicating that your project is missing that dependency.
The solution would be to install highcharts:
npm install -S highcharts
demo
I'm building an Expo app with jest as my test runner.
After incorporateing expo-auth-session into the project, I get the following error:
FAIL screens/tests/EntriesScreen.test.jsx
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
C:\Users\User\repos\BROG-Trip-Journal\node_modules\expo-auth-session\providers\google.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from '../build/providers/Google';
^^^^^^
SyntaxError: Unexpected token 'export'
17 | Alert,
18 | } from 'react-native';
> 19 | import * as Google from 'expo-auth-session/providers/google';
| ^
20 | import { useDispatch } from 'react-redux';
21 | import { FontAwesomeIcon } from '#fortawesome/react-native-fontawesome';
22 | import PropTypes from 'prop-types';
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (screens/AuthScreen.jsx:19:1)
I'm no stranger to this error on this project. In the past, all I had to do was add the offending module to the transformIngnorePattern so that it would get transpiled by bable. But this time, it's not working.
Here is what my jest.config.js looks like right now:
module.exports = {
preset: 'jest-expo',
moduleDirectories: ['node_modules', 'test-utils'],
setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js'],
transform: {
'^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
},
transformIgnorePatterns: [
'/node_modules/(?!(#react-native|react-native|#fortawesome|expo-app-loading|expo-splash-screen|expo-modules-core|expo-font|expo-asset|expo-constants|expo-sqlite|#react-navigation|expo-location|#expo|expo-status-bar|react-native-keyboard-aware-scroll-view|react-native-iphone-x-helper|expo-auth-session)/).*/',
],
setupFilesAfterEnv: [
'#testing-library/jest-native/extend-expect',
'./jest.setup.js',
],
};
What am I missing?
https://nuxtjs.org/api/configuration-build#babel
I originally left the presets as default.
I then followed the suggestions on
https://github.com/nuxt/nuxt.js/issues/1776
However this dealt more with pipelines
I am just trying to get it to convert the es6 to es5 (import chief among the reasons)
I get the same result or a complete failure no matter if i add the .babelrc, adjust package.json, adjust nuxt.config.js or a combination of them.
currently i have adjusted my nuxt.config.js to:
/*
** Build configuration
*/
build: {
babel: {
presets: ['#babel/preset-env'],
configFile: false,
babelrc: false,
plugins: ['#babel/plugin-syntax-dynamic-import']
}
}
When i upload the entire .nuxt folder to my server (running plesk using phusion passenger)
I get the following error
/var/www/vhosts/website.com/app/client/server.js:1
(function (exports, require, module, __filename, __dirname) { import { stringify } from 'querystring'
My site root is
/var/www/vhosts/website.com/app/client/
The first line of server.js
import { stringify } from 'querystring
Changing this to
var stringify = require("querystring").stringify
Eliminates the error however i would need to go through page after page to remove this. My understanding is i can progamically adjust this using babel. But no matter what ive tried the file stays the same.
I did use the Nuxt CLI to automatically set up babel and webpack but using the above build config is not the default. I have attempted to play with it but i get the same result
I added babel/polyfill to try and get around the import issues without any success
Weird issue I am facing. Using Vue-CLI3 npm run serve.
Have the following config:
// vue.config.js
module.exports = {
chainWebpack: config => {
// GraphQL Loader
config.module
.rule('graphql')
.test(/\.graphql$/)
.use('graphql-tag/loader')
.loader('graphql-tag/loader')
.end();
}
};
and one single .graphql file:
mutation AddOfficeMutation(
$name: String
$location: String
) {
createOffice(
input: {office: { name: $name, location: $location }}
) {
office {
id
name
location
}
}
}
when running npm run serve, I get the following error:
ERROR Failed to compile with 1 errors 1:11:08 PM
error in ./src/graphql/AddOfficeMutation.graphql
Module build failed (from ./node_modules/graphql-tag/loader.js):
GraphQLError: Syntax Error: Unexpected Name "var"
at syntaxError (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/error/syntaxError.js:24:10)
at unexpected (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:1490:33)
at parseDefinition (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:153:9)
at many (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:1520:16)
at parseDocument (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:113:18)
at parse (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:48:10)
at parseDocument (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql-tag/src/index.js:129:16)
at gql (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql-tag/src/index.js:170:10)
at Object.module.exports (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql-tag/loader.js:44:18)
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/AddOfficeForm.vue?vue&type=script&lang=js& 29:0-69 59:18-35
# ./src/components/AddOfficeForm.vue?vue&type=script&lang=js&
# ./src/components/AddOfficeForm.vue
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/AddOfficeView.vue?vue&type=script&lang=js&
# ./src/views/AddOfficeView.vue?vue&type=script&lang=js&
# ./src/views/AddOfficeView.vue
# ./src/router/routes.js
# ./src/router/router-config.js
# ./src/main.js
# multi ./node_modules/#vue/cli-service/node_modules/webpack-dev-server/client?http://192.168.0.99:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
Using:
"graphql": "^14.0.2"
"graphql-tag": "^2.10.0"
I am slowly assuming this might be an error with my Babel or Vue config?
Anyone can shed some light on this?
Thanks!
I faced the same issue and it seemed that having 2 loaders make the crash.
I had installed graphql-tag and webpack-graphql-loader .
Try to uninstall every package that includes apollo or graphql and reinstall using vue cli again. vue add apollo. It worked for me.