2

I am having issues trying to integrated Pinia@2.0.14 with Sitecore JSS App built from version 15.0.2. The sample app uses "vue": "~2.6.10". When I am running the app locally in connect mode using jss start:connected, everything works fine but when I deploy it to sitecore server using jss build. It is giving me following error:

Server Error in '/' Application.
Object(...) is not a function
TypeError: Object(...) is not a function
   at Module.f140 (C:\inetpub\wwwroot\dist\RACQForms\server.bundle.js:51544:52)
   at __webpack_require__ (C:\inetpub\wwwroot\dist\RACQForms\server.bundle.js:20:30)
   at C:\inetpub\wwwroot\dist\RACQForms\server.bundle.js:84:18
   at Object.<anonymous> (C:\inetpub\wwwroot\dist\RACQForms\server.bundle.js:87:10)
   at Module._compile (node:internal/modules/cjs/loader:1103:14)
   at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
   at Module.load (node:internal/modules/cjs/loader:981:32)
   at Function.Module._load (node:internal/modules/cjs/loader:822:12)
   at Module.require (node:internal/modules/cjs/loader:1005:19)
   at require (node:internal/modules/cjs/helpers:102:18)
Description: An unhandled exception occurred.

Exception Details: Sitecore.JavaScriptServices.ViewEngine.NodeServices.HostingModels.NodeInvocationException: Object(...) is not a function
TypeError: Object(...) is not a function
   at Module.f140 (C:\inetpub\wwwroot\dist\RACQForms\server.bundle.js:51544:52)
   at __webpack_require__ (C:\inetpub\wwwroot\dist\RACQForms\server.bundle.js:20:30)
   at C:\inetpub\wwwroot\dist\RACQForms\server.bundle.js:84:18
   at Object.<anonymous> (C:\inetpub\wwwroot\dist\RACQForms\server.bundle.js:87:10)
   at Module._compile (node:internal/modules/cjs/loader:1103:14)
   at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
   at Module.load (node:internal/modules/cjs/loader:981:32)
   at Function.Module._load (node:internal/modules/cjs/loader:822:12)
   at Module.require (node:internal/modules/cjs/loader:1005:19)
   at require (node:internal/modules/cjs/helpers:102:18)

I am assuming it might be related to version of Node being out of date. I have node version node-v12.22.12-x64.msi on sitecore servers.

Vue.config.js file:

const fs = require('fs');
let vueConfig = {};

if (process.env.BUILD_TARGET_ENV === 'server') {
  const serverConfig = require('./server/server.vue.config');
  vueConfig = serverConfig;
} else if (process.env.BUILD_TARGET_ENV === 'client') {
  // We can't directly assign a value to `process.env.BASE_URL`, as it is always assigned by `config.publicPath`, regardless of whether `config.publicPath` is defined or undefined.
  // Therefore, we set a value for `process.env.PUBLIC_URL` then use that value for `config.publicPath`.
  vueConfig.publicPath = process.env.PUBLIC_URL;

  // By default, Vue cli uses HtmlWebpackPlugin to generate the html file used for rendering the app.
  // When in production mode, it also enables the HtmlWebpackPlugin `minify` option and sets
  // the `removeAttributeQuotes` option of the html minifier to true.
  // Our server-side rendering script uses string replacement to determine where to inject the
  // rendered output of the JSS app. For example, the SSR script is looking for `<div id="root">` and injecting
  // the rendered output into that place in the html template string.
  // However, with the `removeAttributeQuotes` enabled, our html template output is `<div id=root>`, so the SSR
  // string replacement can't find `<div id="root">`.
  // Therefore, by disabling the `removeAttributeQuotes` flag for html minification, all is well.
  if (process.env.NODE_ENV === 'production') {
    vueConfig.chainWebpack = (config) => {
      config.plugin('html').init((Plugin, args) => {
        const newArgs = {
          ...args[0],
        };
        newArgs.minify.removeAttributeQuotes = false;
        return new Plugin(newArgs);
      });
    };
  }
} else {
  vueConfig.devServer = {
    port: process.env.PORT || 3000,
    proxy: `http://localhost:${process.env.PROXY_PORT || 3042}`,
    https: true,
    pfx: fs.readFileSync('./certs/localhost.pfx'),
    pfxPassphrase: "arun1234",
    headers: { "Access-Control-Allow-Origin": "*" }
  };
}

// We may already have an existing `configureWebpack` definition (e.g. when building the server bundle).
// So we need to preserve that definition and ensure it is invoked along with the config
// options that are common to both client/server bundles.
const existingConfigureWebpack = vueConfig.configureWebpack;

vueConfig.configureWebpack = (config) => {
  if (existingConfigureWebpack) {
    existingConfigureWebpack(config);
  }

  // we turn off `.mjs` file support in Vue, because `graphql` ships
  // mjs files in its npm package (bad) and Vue's webpack settings destroy
  // graphql's mjs files, causing strange runtime errors. By disabling mjs,
  // we make webpack use the .js files in graphql instead, which work fine.
  const indexOfMjs = config.resolve.extensions.indexOf('.mjs');
  if (indexOfMjs > -1) {
    config.resolve.extensions.splice(indexOfMjs, 1);
  }

  config.module.rules.push({
    test: /\.(graphql|gql)$/,
    exclude: /node_modules/,
    loader: 'graphql-tag/loader',
  },
  {
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto"
  });

};
vueConfig.css = {
  loaderOptions: {
    sass: {
      additionalData: `
        @import "@/assets/css/_variables.scss";
        @import "@/assets/css/utilities/_mixins.scss";
      `
    }
  }
};
// Below is a workaround when building the app within the context of the JSS monorepo.
// The monorepo uses symlinks within the `node_modules` folder to reference `sitecore-jss-*` packages,
// which causes the eslint loader to attempt resolving eslint config from the _actual_ package location,
// not the "virtual" location under `node_modules`. In turn, an incorrect eslint config is resolved and
// breaks the build process.
// The workaround is to exclude the `packages/sitecore-jss*` packages from eslint-loader.

// We may already have an existing `chainWebpack` definition (e.g. when building the server bundle).
// So we need to preserve that definition and ensure it is invoked along with the config
// options that are common to both client/server bundles.
const existingChainWebpack = vueConfig.chainWebpack;
vueConfig.chainWebpack = (config) => {
  if (existingChainWebpack) {
    existingChainWebpack(config);
  }
  config.module.rule('eslint').exclude.add(/packages(\\|\/)sitecore-jss*/);
};

module.exports = vueConfig;

Create APP.js

Vue.use(Meta);
Vue.use(SitecoreJssStorePlugin);
Vue.use(SitecoreJssPlaceholderPlugin, { componentFactory });
Vue.use(VueApollo);
Vue.use(PiniaVuePlugin);
const pinia = createPinia();
Vue.component('RacqSelectFormulateInput', RacqSelectFormulateInput)
Vue.use(VueFormulate,  {
  classes: {
    outer: 'forms-input-wrapper',
  },
  library: {
    selectbox: {
      classification: 'select',
      component: 'RacqSelectFormulateInput'
    }
  }
});
Vue.use(pinia)

// createApp is invoked by both the main and SSR entry points, so the two entry points can use the same app creation process.
export function createApp(initialState, i18n) {
  Vue.config.productionTip = false;

  const router = createRouter();
  const graphQLProvider = createGraphQLProvider(initialState);

  const vueOptions = {
    apolloProvider: graphQLProvider,
    router,

    render: (createElement) => createElement(AppRoot),
  };
  // conditionally add i18n to the Vue instance if it is defined
  if (i18n) {
    vueOptions.i18n = i18n;
  }
  vueOptions.pinia = pinia;
  const app = new Vue(vueOptions);

  // if there is an initial state defined, push it into the store, where it can be referenced by interested components.
  if (initialState) {
    app.$jss.store.setSitecoreData(initialState);
  }

  return { app, router, graphQLProvider };
}
import Vue from 'vue';
import Meta from 'vue-meta';
import VueApollo from 'vue-apollo';
import { SitecoreJssPlaceholderPlugin } from '@sitecore-jss/sitecore-jss-vue';
import AppRoot from './AppRoot';
import { createRouter } from './router';
import SitecoreJssStorePlugin from './lib/SitecoreJssStorePlugin';
import GraphQLClientFactory from './lib/GraphQLClientFactory';
import config from './temp/config';
import componentFactory from './temp/componentFactory';
import VueFormulate from '@braid/vue-formulate'
import RacqSelectFormulateInput from './components/foundation/controls/RacqSelectFormulateInput';
import { createPinia, PiniaVuePlugin } from "pinia";

This is the server.bundle code where it is failing:

var useFormDataStore = Object(pinia["defineStore"])('formDataStore', {
  state: function state() {
    return {
      stepsData: []
    };
  },
  actions: {
    addStepData: function addStepData(stepNumber, stepData) {
      this.stepsData.push({
        stepNumber: stepNumber,
        data: stepData
      });
    }
  }
});
2
  • Can you compare your local and global node version, it both are different that may create a issue May 23, 2022 at 18:54
  • @RishirajShekhawat I am using same node version on server and local.
    – Arun Kumar
    May 24, 2022 at 13:11

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.