Im using Nuxt 2.4
On dev environment, I'm having this issue.
For my nuxt.config.js
build: {
transpile: ['vuetify/lib'],
plugins: [new VuetifyLoaderPlugin()],
loaders: {
stylus: {
import: ["~assets/style/variables.styl"]
}
},
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}
Solved it by adding proxy on axios.
Thanks
Related
I am seeing my eslint rules applied in VSCode however they are not working in Babel.
I believe that I need to clear the cache, but I don't know how to do it.
Could you tell me how to do this?
rules
"#typescript-eslint/camelcase": ["warn"],
"camelcase": "off"
Babel output
vscode output
If you are using a babel.config.js file which looks like below. You can turn off the cache by passing false to api.cache(false)
module.exports = function (api) {
const presets = [
[
'#babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3, proposals: true }
}
],
'#babel/preset-react',
'#babel/preset-flow'
];
const plugins = [
'lodash',
['#babel/plugin-transform-spread', { loose: true }],
['#babel/plugin-proposal-class-properties', { loose: true }],
'#babel/plugin-transform-runtime'
];
/** this is just for minimal working purposes,
* for testing larger applications it is
* advisable to cache the transpiled modules in
* node_modules/.bin/.cache/#babel/register* */
api.cache(false);
return {
presets,
plugins
};
};
You should delete .babel_cache folder that's create parallel to your output folder.
I am trying to build a PWA with NextJS and this https://www.npmjs.com/package/next-pwa
It have been working fine in development, but know i try to build and run it in production.
It seems like the files below only is being build when i run it as dev and is thereby missing in the prod build.
enter image description here
Is this an error in my config?
module.exports = withImages(
withPWA({
pwa: {
dest: 'public'
},
env: {
apiUrl: process.env.API_URL
},
webpack: (config, { isServer }) => {
if (!isServer) {
config.node = {
fs: 'empty'
}
}
return config
}
})
)
Please help!
I'm trying to do code splitting and lazy loading with webpack using the import() method
import('./myLazyModule').then(function(module) {
// do something with module.myLazyModule
}
I'm getting
'import' and 'export' may only appear at the top level
Note top level imports are working fine, i'm just getting an issue when I try and using the dynamic variant of import()
var path = require('path');
module.exports = {
entry: {
main: "./src/app/app.module.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name]-application.js"
},
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}]
}
]
},
resolve : {
modules : [
'node_modules',
'bower_components'
]
},
devtool : "source-map"
}
EDIT:
If I change it so the syntax reads, it works.... but the chunk comments don't work to label the bundle. I'm confused because the documentation says the the following is depreciated.
The use of System.import in webpack did not fit the proposed spec, so
it was deprecated in webpack 2.1.0-beta.28 in favor of import().
System.import('./myLazyModule').then(function(module) {
// do something with module.myLazyModule
}
You need the plugin syntax-dynamic-import to be able to use the import() function with Babel.
Install it with:
npm install --save-dev #babel/plugin-syntax-dynamic-import
And add it to your plugins:
{
presets: ['es2015'],
plugins: ['#babel/plugin-syntax-dynamic-import']
}
I have a little problem regarding resolving aliases in webpack 2. No matter what i do i cant resolve this. Here is the relevant code:
/* webpack.mix.js */
mix.webpackConfig({
module: {
rules: [
{
test: /\.js$/,
loader: 'eslint-loader'
}
]
},
resolve: {
root: path.resolve(__dirname),
// path is reqired at the beggining of file
alias: {
config: 'src/assets/js/config', // this is a config folder
js: 'src/assets/js'
}
}
});
/* router.js */
import { DashboardRoute } from 'config/route-components'
// this import is unresolved
The resolve.root option no longer exists in webpack 2. Instead it is merged into resolve.modules (from the official Migration Guide). Webpack even throws an error that it's not a valid property. If you want to be able to import from your root directory you would change the resolve config to:
resolve: {
alias: {
config: 'src/assets/js/config',
js: 'src/assets/js'
},
modules: [
path.resolve(__dirname),
'node_modules'
]
}
Alternatively you can use an absolute path in your resolve.alias like so:
resolve: {
alias: {
config: path.resolve(__dirname, 'src/assets/js/config'),
js: path.resolve(__dirname, 'src/assets/js')
}
}
Try this:
resolve: {
root: [
'node_modules',
path.resolve('src') // Resolve on root first
],
alias: {
config: 'src/assets/js/config', // this is a config folder
js: 'src/assets/js'
}
}
In ionic 3 (version 3.13.3), in order to get alias mapping working, you will have to define path mapping both in webpack.config.js & tsconfig.json
Please refer complete answer here question here
I picked the getting started with Angular2 tutorial format and only added in the angularfire2 part.
I installed firebase and angularfire2 using the steps on the angularfire2 docs page
Below is my systemjs.config.js
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'angularfire2': 'npm:angularfire2'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
angularfire2: {
main: 'index.js',
defautExtension: 'js'
}
}
});
})(this);
Then I am simply importing it like so:
import { AngularFireModule } from 'angularfire2';
Then I keep getting this error:
Any hint what is going on?
Your config maps angularfire2 to node_modules/angularfire2/index.js, which is written is es6, so SystemJS tries to compile it using traceur, and can not find it.
The easy fix would be to configure it so it loads the bundle in angular2/bundles/angularFire2.umd.js, not index.js.
So angularfire2 in packages
angularfire2: {
main: 'index.js'
needs to be changed to
angularfire2: {
main: 'bundles/angularFire2.umd.js'
Also, angularFire depends on Firebase, so, as #Jonathon Oates said in his answer, you need to provide configuration for Firebase too.
Thanks #artem — I was having the exact same problem!
You may also need to reference Firebase in your map too e.g.
'firebase': 'npm:firebase'
And add Firebase to your packages e.g.
'angularfire2': {
main: './bundles/angularFire2.umd.js',
defaultExtension: 'js'
},
'firebase': {
main: './firebase.js',
defaultExtension: 'js'
}
Otherwise you may see a new 404 error for Firebase.