Comments (4)
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.
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.
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.
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)
- Action required: Greenkeeper could not be activated 🚨
- Incompatible with nuxt 2.0 HOT 5
- How to change default port HOT 1
- How? HOT 1
- Broken after update to Nuxt 2 HOT 1
- Issue with Nuxt 2.8.0? HOT 1
- Improve documentation HOT 12
- Not working for nuxt2.9.2 HOT 2
- (node:28176) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead HOT 1
- Hello World example. HOT 3
- Project status? HOT 1
- Support for static sites HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blog-module.