Giter Club home page Giter Club logo

Comments (4)

bskimball avatar bskimball commented on May 24, 2024 1

No worries. It works fine when I added the node_modules exclusion. I was working on just adding it directly in to my Nuxt set up (instead of a module), so I could change the templates.

from blog-module.

bskimball avatar bskimball commented on May 24, 2024

In order to get around this issue, I altered my nuxt.config.js to transpile the @nuxtjs directory in node_modules using babel on build. Specifically look at the exclude on the extend function in the build configuration.

Below is an example of my nuxt.config.js.

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'starter',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#20a0ff' },
  plugins: [
    '~/plugins/vue-observe-visibility',
    '~/plugins/vue-scrollto'
  ],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/blog'
  ],
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Babel
     */
    babel: {
      'presets': ['vue-app'],
      'plugins': [
        ['component', [{
          'libraryName': 'element-ui',
          'styleLibraryName': 'theme-default'
        }]]
      ],
      'comments': false
    },
    /*
    ** Run ESLINT on save
    */
    extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      config.module.rules.push({
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules(?!(\/|\\)@nuxtjs)/,
        options: Object.assign({}, this.babelOptions)
      })
    }
  }
}

I'm sure there is a cleaner way to do this.

from blog-module.

znck avatar znck commented on May 24, 2024

I've been using it here (https://github.com/znck/znck.github.io/blob/dev/nuxt.config.js), your can use it as reference.

I'll look into it by the weekend.

from blog-module.

adam-lynch avatar adam-lynch commented on May 24, 2024

I had this problem recently with vue-cli's pwa template (not nuxt). I had to do a very similar fix, I can't see any way around it. I used include instead of exclude though (it's probably safer). Specifically, we got the error when trying to import pretty-bytes.

We were already transpiling stuff in certain directories like src and test. So we wanted to also transpile some problematic (i.e. 2015+) dependencies. Long story short, we ended up with this:

const babelLoaderIncludes = [resolve('src'), resolve('test')];
if (config.dependenciesToTranspile) {
  babelLoaderIncludes.push(...config.dependenciesToTranspile.map(require.resolve));
}

//......

{
          test: /\.js$/,
          loader: 'babel-loader',
          include: babelLoaderIncludes,
},

(require.resolve is the safest way to do it so it gets the full path, no matter where you are)

from blog-module.

Related Issues (13)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.