Nuxt.js: Problem with third-party plugins

Created on 7 Sep 2017  路  9Comments  路  Source: nuxt/nuxt.js

After Nuxt 1.0.0-rc4 versions there is problem with third-party plugins.
For example, I use moment.js. That's how I included them

In nuxt.config.js

plugins: [
  //...
  { src: '~/plugins/moment.js' },
  //...
],
build: {
  vendor: [
    //...
    'moment',
    //...
  ],
  plugins: [
    new webpack.ContextReplacementPlugin(/node_modules\\moment\\locale/, /ru/)
  ]
}

In ~/plugins/moment.js:

import moment from 'moment';
moment.locale('ru');
export default moment;

App building without errors, but when try to open any page showed error:
image

This question is available on Nuxt.js community (#c1431)
help-wanted

All 9 comments

npm install moment --save

@engelsoc it's installed. And work with rc4.

I experienced this issue too.
The console error is not the really helpful, but pasting it anyways:

[nuxt] Error while initializing app TypeError: t.replace is not a function
    at Z (common.912fcaa6357ec2f09fd1.js:2)
    at fe (common.912fcaa6357ec2f09fd1.js:2)
    at ye (common.912fcaa6357ec2f09fd1.js:2)
    at pe (common.912fcaa6357ec2f09fd1.js:2)
    at ge (common.912fcaa6357ec2f09fd1.js:2)
    at Me (common.912fcaa6357ec2f09fd1.js:2)
    at e (common.912fcaa6357ec2f09fd1.js:2)
    at app.4415a9678f7975153d9f.js:1
    at r (common.912fcaa6357ec2f09fd1.js:2)
    at Generator._invoke (common.912fcaa6357ec2f09fd1.js:2)

P.S: This is rc9

I think the issue is that moment is exported directly from the plugin.
What is expected from a plugin to export is a function that gets executed with the context passed in.
Plugins docs.

Workaround. Move all imports into 1 file for SSR-ready and 1 file for client-only

Before:
nuxt.config.js

  plugins: [
    { src: '~/plugins/bootstrap.js', ssr: false },
    { src: '~/plugins/alertify.js', ssr: false },
    { src: '~/plugins/datatables.js', ssr: false },
    { src: '~/plugins/moment.js' },
    { src: '~/plugins/inputmask.js', ssr: false },
    { src: '~/plugins/datatable/dateAsAbbr.js' }
  ],

After:
nuxt.config.js

plugins: [
    { src: '~/plugins/client-side-plugins.js', ssr: false },
    { src: '~/plugins/ssr-compatible-plugins.js' }
],

This will work on RC11

Having 1 plugin file seems to reduce errors for me as well.

@alexchopin why you close issue? This is already fixed?

@Alex-Sokolov You have to export function, try this:

import moment from 'moment';
import 'moment/locale/ru';

export default () => {
  moment.locale('ru');
};

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gary149 picture gary149  路  3Comments

pehbehbeh picture pehbehbeh  路  3Comments

maicong picture maicong  路  3Comments

surmon-china picture surmon-china  路  3Comments

jaredreich picture jaredreich  路  3Comments