Related
I'm using expo + web.
For the mobile ads I wantnd to use react-native-google-mobile-ads + conditional loading based on platform.
if (Platform.OS !== 'web') {
FFirstResultAdComponent = require("components/movies/result/first-result-ad-component").FirstResultAdComponent;
}
The problem is that the library is still loaded by webpack for web build what leads to some issues while loading and prevent page from loading.
What would be the best option to avoid this issues, exclude component + library from webpack? Or force to use cjs?
Json.js:74 Uncaught Error: Module parse failed: Unexpected token (7:16)
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
| * in that '+' and '/' are replaced with '-' and '_'.
| */
> static DICT = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
| static REVERSE_DICT = new Map([
| ['A', 0], ['B', 1], ['C', 2], ['D', 3], ['E', 4], ['F', 5],
at ./node_modules/#iabtcf/core/lib/mjs/encoder/Base64Url.js (Json.js:74:1)
at __webpack_require__ (bootstrap:789:1)
at fn (bootstrap:100:1)
at ./node_modules/#iabtcf/core/lib/mjs/encoder/index.js (index.js:1:1)
at __webpack_require__ (bootstrap:789:1)
at fn (bootstrap:100:1)
at ./node_modules/#iabtcf/core/lib/mjs/index.js (index.js:1:1)
at __webpack_require__ (bootstrap:789:1)
at fn (bootstrap:100:1)
at ./node_modules/react-native-google-mobile-ads/lib/module/AdsConsent.js (AdEventType.ts:18:1)
at __webpack_require__ (bootstrap:789:1)
at fn (bootstrap:100:1)
at ./node_modules/react-native-google-mobile-ads/lib/module/index.js (index.ts:18:1)
at __webpack_require__ (bootstrap:789:1)
at fn (bootstrap:100:1)
at ./App.tsx (bootstrap:856:1)
at __webpack_require__ (bootstrap:789:1)
at fn (bootstrap:100:1)
at ./index.js (i18n.ts:10:1)
at __webpack_require__ (bootstrap:789:1)
at fn (bootstrap:100:1)
at 1 (trpc-provider.tsx:35:1)
at __webpack_require__ (bootstrap:789:1)
at bootstrap:856:1
at bootstrap:856:1
./node_modules/#iabtcf/core/lib/mjs/encoder/Base64Url.js # Json.js:74
__webpack_require__ # bootstrap:789
fn # bootstrap:100
./node_modules/#iabtcf/core/lib/mjs/encoder/index.js # index.js:1
__webpack_require__ # bootstrap:789
fn # bootstrap:100
./node_modules/#iabtcf/core/lib/mjs/index.js # index.js:1
__webpack_require__ # bootstrap:789
fn # bootstrap:100
./node_modules/react-native-google-mobile-ads/lib/module/AdsConsent.js # AdEventType.ts:18
__webpack_require__ # bootstrap:789
fn # bootstrap:100
./node_modules/react-native-google-mobile-ads/lib/module/index.js # index.ts:18
__webpack_require__ # bootstrap:789
fn # bootstrap:100
./App.tsx # bootstrap:856
__webpack_require__ # bootstrap:789
fn # bootstrap:100
./index.js # i18n.ts:10
__webpack_require__ # bootstrap:789
fn # bootstrap:100
1 # trpc-provider.tsx:35
__webpack_require__ # bootstrap:789
(anonymous) # bootstrap:856
(anonymous) # bootstrap:856
VM1051:2 Uncaught ReferenceError: process is not defined
at 4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at 8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at 8641 (<anonymous>:2:1379)
at r (<anonymous>:2:306599)
at <anonymous>:2:315627
at <anonymous>:2:324225
at <anonymous>:2:324229
at e.onload (index.js:1:1)
4043 # VM1051:2
r # VM1051:2
8048 # VM1051:2
r # VM1051:2
8641 # VM1051:2
r # VM1051:2
(anonymous) # VM1051:2
(anonymous) # VM1051:2
(anonymous) # VM1051:2
e.onload # index.js:1
be # index.js:1
de # index.js:1
handleErrors # webpackHotDevClient.js:169
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:213
load (async)
be # index.js:1
de # index.js:1
handleErrors # webpackHotDevClient.js:169
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:213
index.js:1 ./node_modules/#iabtcf/core/lib/mjs/model/PurposeRestrictionVector.js 10:14
Module parse failed: Unexpected token (10:14)
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
| * bit length; it can be set and got from here
| */
> bitLength = 0;
| /**
| * a map indexed by a string which will be a 'hash' of the purpose and
webpack.config.js
const createExpoWebpackConfigAsync = require('#expo/webpack-config');
const path = require('path')
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync({
...env,
babel: {
dangerouslyAddModulePathsToTranspile: ["#trpc/react-query",
"#trpc/client", "#tanstack/react-query"],
},
},
argv
);
config.module.rules.push(
{
test: /.mjs$/,
include: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
"#babel/preset-env",
{
loose: false,
}
]
],
plugins: ['#babel/plugin-proposal-class-properties',
"#babel/plugin-proposal-private-property-in-object",
"#babel/plugin-proposal-optional-chaining"]
}
}
});
config.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
});
return config;
};
package.json
{
"version": "1.0.0",
"scripts": {
"start": "expo start --dev-client",
},
"dependencies": {
"#babel/plugin-proposal-export-namespace-from": "^7.18.9",
"#babel/plugin-proposal-optional-chaining": "^7.18.9",
"#babel/plugin-proposal-private-methods": "^7.18.6",
"#babel/preset-env": "^7.20.2",
"#expo/html-elements": "^0.2.2",
"#expo/vector-icons": "^13.0.0",
"#expo/webpack-config": "^0.17.3",
"#hapi/iron": "^7.0.0",
"#iabtcf/core": "^1.5.5",
"#prisma/client": "^4.6.1",
"#react-navigation/bottom-tabs": "^6.4.3",
"#react-navigation/native": "^6.0.14",
"#react-navigation/native-stack": "^6.9.2",
"#react-navigation/stack": "^6.3.5",
"#rneui/base": "^4.0.0-rc.7",
"#rneui/themed": "^4.0.0-rc.7",
"#tanstack/react-query": "^4.3.8",
"#trpc/client": "^10.4.2",
"#trpc/react-query": "^10.4.2",
"#trpc/server": "^10.4.2",
"#types/react": "~18.0.24",
"#types/react-native": "~0.70.6",
"babel-loader": "^8.3.0",
"babel-plugin-jest-hoist": "^29.2.0",
"babel-preset-env": "^1.7.0",
"babel-preset-expo": "^9.2.2",
"cookie": "^0.5.0",
"cors": "^2.8.5",
"expo": "~47.0.8",
"expo-asset": "~8.6.2",
"expo-auth-session": "~3.7.3",
"expo-blur": "~12.0.1",
"expo-build-properties": "~0.4.1",
"expo-dev-client": "~2.0.1",
"expo-localization": "~14.0.0",
"expo-random": "~13.0.0",
"expo-secure-store": "~12.0.0",
"expo-splash-screen": "~0.17.5",
"expo-status-bar": "~1.4.2",
"expo-updates": "~0.15.6",
"i18n-js": "^4.2.0",
"install": "^0.13.0",
"iron-session": "^6.3.1",
"next": "^13.0.4",
"next-compose-plugins": "^2.2.1",
"next-connect": "^0.13.0",
"next-fonts": "^1.5.1",
"next-images": "^1.8.4",
"next-transpile-modules": "^10.0.0",
"nextjs-cors": "^2.1.2",
"npm": "^9.1.3",
"react": "18.1.0",
"react-dev-tools": "^0.0.1",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"react-native-elements": "^4.0.0-beta.0",
"react-native-fbsdk-next": "^11.1.0",
"react-native-gesture-handler": "~2.8.0",
"react-native-google-mobile-ads": "^8.2.2",
"react-native-reanimated": "~2.12.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "~3.18.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.18.9",
"rimraf": "^3.0.2",
"typescript": "^4.6.3",
"zod": "^3.19.1"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#expo/next-adapter": "^4.0.13",
"babel-plugin-module-resolver": "^4.1.0",
"prisma": "^4.6.1"
},
"prisma": {
"schema": "schema.prisma",
"seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
},
"private": true
}
The correct solution is simple like a harm, just create wrappers for components and libraries.
the first one with .tsx file extensions, that will be used for mobiles and only this one should point to react-native-google-mobile-ads
and second one .web.tsx that could be completely blank, the only important thing is that he cannot have any references to react-native-google-mobile-ads
and then webpack will do the job.
I am trying to compile my app and I am getting the following error
Vue packages version mismatch: vue#2.6.14 vue-server-renderer#2.7.10
This is because the version of Nuxt I am using (which i need to use) uses vue-server-renderer#2.6.14, but I am not sure whats causing the other conflict
here are my dependencies, is there any way to find out whats causing it, or fix it?
"dependencies": {
"#nuxtjs/axios": "5.5.4",
"#nuxtjs/style-resources": "0.1.2",
"#nuxtjs/svg-sprite": "0.5.2",
"#sendgrid/mail": "6.4.0",
"body-parser": "1.19.0",
"chokidar": "3.5.2",
"clipboard": "2.0.4",
"compression": "1.7.4",
"cors": "2.8.5",
"express": "4.17.1",
"feed": "4.1.0",
"gsap": "3.1.1",
"lazysizes": "5.3.2",
"lodash": "4.17.21",
"lru-cache": "5.1.1",
"moment": "2.24.0",
"mongoose": "5.9.10",
"morgan": "1.10.0",
"nuxt": "2.15.8",
"pm2": "4.4.0",
"sanitize-html": "2.5.1",
"sitemap": "2.2.0",
"stickyfilljs": "2.1.0",
"svg4everybody": "2.1.9",
"swiper": "6.8.4",
"url-polyfill": "1.1.8",
"vue-waypoint": "3.2.2"
},
"devDependencies": {
"#babel/core": "7.18.10",
"#babel/eslint-parser": "7.18.9",
"eslint": "8.23.0",
"eslint-config-standard": "17.0.0",
"eslint-plugin-vue": "9.3.0",
"eslint-webpack-plugin": "2.7.0",
"normalize-scss": "7.0.1",
"postcss-preset-env": "6.7.0",
"sass": "1.54.7",
"sass-loader": "10.3.1",
}
Full stack trace
This may cause things to work incorrectly. Make sure to use the same
version for both.
at Object.<anonymous> (/usr/src/app/node_modules/vue-server-renderer/index.js:8:9)
at Module._compile (node:internal/modules/cjs/loader:1120:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
at Module.load (node:internal/modules/cjs/loader:998:32)
at Module._load (node:internal/modules/cjs/loader:839:12)
at Module.require (node:internal/modules/cjs/loader:1022:19)
at Hook._require.Module.require (/usr/src/app/node_modules/require-in-the-middle/index.js:101:39)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/usr/src/app/node_modules/#nuxt/vue-renderer/dist/vue-renderer.js:19:27)
at Module._compile (node:internal/modules/cjs/loader:1120:14)
I changed these 3 items and it worked
from
"#nuxtjs/axios": "5.5.4",
"#nuxtjs/style-resources": "0.1.2",
"#nuxtjs/svg-sprite": "0.5.2"
to
"#nuxtjs/axios": "5.10.2",
"#nuxtjs/style-resources": "1.0.0",
"#nuxtjs/svg-sprite": "0.4.10"
Deleted modules and package-lock file, ran npm install, then it worked
I'm trying to create an Electron application using the Vue CLI package in npm, but in the process of using puppeteer, I get the following error message.
Uncaught ReferenceError: __dirname is not defined
at eval (webpack-internal:///./node_modules/electron/index.js:4)
at Object../node_modules/electron/index.js (chunk-vendors.js:2014)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js&:114)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& (app.js:938)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (webpack-internal:///./src/App.vue?vue&type=script&lang=js&:2)
at Module../src/App.vue?vue&type=script&lang=js& (app.js:1007)
vue.runtime.esm.js?2b0e:8440 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
As a result of my research, I found an article that said I should set nodeIntegration to true, so I decided to try the following
I changed nodeIntegration in background.js, App.vue, and vue.config.js to true, and now I get the following error.
How can I fix this?
Uncaught ReferenceError: require is not defined
at eval (external "events"?7a7e:1)
at Object.events (app.js:1123)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (emitter.js?a6bd:1)
at Object../node_modules/webpack/hot/emitter.js (chunk-vendors.js:3793)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (dev-server.js?6895:50)
at Object../node_modules/webpack/hot/dev-server.js (chunk-vendors.js:3782)
The version of the npm package you are using is as follows.
"dependencies": {
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"electron": "^12.0.5",
"electron-store": "^8.0.0",
"multer": "^1.4.2",
"nedb": "^1.8.0",
"path": "^0.12.7",
"puppeteer": "^9.1.1",
"puppeteer-core": "^9.1.1",
"puppeteer-in-electron": "^3.0.3",
"readline": "^1.3.0",
"require": "^2.4.20",
"semantic-ui-vue": "^0.11.0",
"vue": "^2.6.11",
"vue-js-modal": "^2.0.0-rc.6",
"vuejs-dialog": "^1.4.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "^4.5.13",
"babel-eslint": "^10.1.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.1",
"sass-loader": "^10.1.1",
"vue-cli-plugin-electron-builder": "~2.0.0-rc.6",
"vue-template-compiler": "^2.6.11"
},
Make sure you have contextIsolation set to false in your BrowserWindow settings.
Like this:
new BrowserWindow({
webPreferences: {
nodeIntegration: true,
contextIsolation: false
},
});
See here:
NOTE: To access the Node.js API from the Renderer process, you need to set the nodeIntegration preference to true and the contextIsolation preference to false.
Disclaimer, turning on nodeIntegration opens up security holes in your app. See Zac's answer on how to fix them.
I am trying to configure highcharts with Angular6 by following steps :
Step 1 : npm install highcharts-angular --save
Step 2 : Add HighchartsChartModule in app.module.ts under imports
imports: [
HighchartsChartModule
]
Add import statement'import { HighchartsChartModule } from 'highcharts-angular';
Step 3 : npm install highcharts --save
After this when I build my application it gives me below error
ERROR in node_modules/highcharts/highcharts.d.ts(128972,17): error TS2304: Cannot find name 'PlotNetworkDataLabelsFormatterCallbackFunction'.
node_modules/highcharts/highcharts.d.ts(128982,21): error TS2304: Cannot find name 'PlotNetworkDataLabelsFormatterCallbackFunction'.
node_modules/highcharts/highcharts.d.ts(128987,19): error TS2304: Cannot find name 'PlotNetworkDataLabelsTextPath'.
node_modules/highcharts/highcharts.d.ts(128992,15): error TS2304: Cannot find name 'PlotNetworkDataLabelsTextPath'.
node_modules/highcharts/highcharts.d.ts(136653,17): error TS2304: Cannot find name 'PlotPackedBubbleDataLabelsFormatterCallbackFunction'.
node_modules/highcharts/highcharts.d.ts(136658,15): error TS2304: Cannot find name 'PlotPackedBubbleDataLabelsTextPath'.
node_modules/highcharts/highcharts.d.ts(237720,14): error TS2304: Cannot find name 'SeriesOrganizationNodesLayoutValues'.
my package.json looks like below
Package.json
"dependencies": {
"#agm/core": "^1.0.0-beta.3",
"#angular/animations": "6.1.0",
"#angular/cdk": "^6.4.1",
"#angular/common": "6.1.0",
"#angular/compiler": "6.1.0",
"#angular/core": "6.1.0",
"#angular/flex-layout": "^6.0.0-beta.18",
"#angular/forms": "6.1.0",
"#angular/http": "6.1.0",
"#angular/material": "^6.4.1",
"#angular/material-moment-adapter": "^6.4.1",
"#angular/platform-browser": "6.1.0",
"#angular/platform-browser-dynamic": "6.1.0",
"#angular/router": "6.1.0",
"#types/googlemaps": "^3.30.11",
"angular-highcharts-chart": "^1.0.2",
"core-js": "^2.5.7",
"file-input-accessor": "^2.0.0",
"hammerjs": "^2.0.8",
"highcharts": "^7.1.0",
"highcharts-angular": "^2.4.0",
"moment": "^2.22.2",
"moment-business-days": "^1.0.6",
"ngx-cookie": "^4.1.2",
"ngx-storage": "^0.5.0",
"ngx-webstorage": "^2.0.1",
"rxjs": "^6.4.0",
"rxjs-compat": "^6.2.2",
"rxjs-tslint": "^0.1.5",
"zone.js": "^0.8.26"
},
I am really stuck with this setup !!
Any help is highly appreciated !!
Thanks in advance !!
Change your high-chart version to 7.0.3
npm install highcharts#7.0.3
it's working fine.
Install highcharts of version 7.0.3 worked for me.
npm install highcharts#7.0.3
Thanks !!
Im trying to use pnpm but get this error on the buildmachine:
Error: Cannot find module 'less'
at Function.Module._resolveFilename (module.js:339:15)
at Function.require.resolve (internal/module.js:23:19)
at resolve_engine_path (C:\BuildAgent\_work\Web\App\node_modules\.registry.npmjs.org\accord\0.26.4\node_modules\accord\lib\index.js:65:18) at Object.exports.load (C:\BuildAgent\_work\Web\App\node_modules\.registry.npmjs.org\accord\0.26.4\node_modules\accord\lib\index.js:25:19) at Object.<anonymous> (C:\BuildAgent\_work\Web\App\node_modules\.registry.npmjs.org\gulp-less\3.3.0\node_modules\gulp-less\index.js:9:29) at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
##[error]Running build failed.
##[error]Error:
##[error]System.Exception: Failed to run gulp build-release
Im trying to reslove this error but cant figure out how to get pnpm to install the module. Accorging to this issue this should be resloved already:
https://github.com/pnpm/pnpm/issues/118
Some of the package.json:
"devDependencies": {
"aurelia-bundler": "^0.3.2",
"aurelia-tools": "^0.1.0",
"babel-eslint": "^4.1.6",
"del": "^1.1.0",
"eslint": "^1.10.3",
"eslint-plugin-aurelia": "^0.3.0",
"gulp": "^3.8.10",
"gulp-babel": "^5.1.0",
"gulp-bump": "^0.1.11",
"gulp-changed": "^1.1.0",
"gulp-concat": "^2.5.2",
"gulp-cssmin": "^0.1.7",
"gulp-eslint": "^1.1.1",
"gulp-jshint": "^1.9.0",
"gulp-less": "^3.0.1",
"gulp-plumber": "^0.6.6",
"gulp-shell": "^0.4.0",
"gulp-sourcemaps": "^1.3.0",
"gulp-uglify": "^1.1.0",
Anyone had this issue and solved it?
Please let me know if im missing some info out!
You can run npm install less in terminal