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
Related
I am trying to use babel module resolver plugin with eslint + create react app but I am unable to start the application, getting the error
internal/modules/cjs/loader.js:1237
throw err;
^
SyntaxError: C:\Users\enisr\Desktop\projects\pcPartPicker\jsconfig.json:
Unexpected token } in JSON at position 166
at parse (<anonymous>)
I have set up a git repo showcasing the problem https://github.com/sgoulas/pcPartPicker
I have read the instructions in the docs and in the original repository and I am unable to configure it correctly.
My configuration files are the following:
.babelrc
{
"plugins": [
["module-resolver", {
"extensions": [
".js",
".jsx",
".es",
".es6",
".mjs"
],
"root": ["./src"],
"alias": {
"#components": "./src/components"
}
}
]
]
}
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": ["src/*"],
"#components/*": ["./src/components/*"],
}
}
}
webpack.config.dev.js
var path = require("path");
module.exports = {
include: path.appSrc,
loader: require.resolve("babel-loader"),
options: {
plugins: [
[
"module-resolver",
{
root: ["./src/App"],
alias: {
"#components": "./src/components",
},
},
],
],
cacheDirectory: true,
},
};
My component:
import { GPUtable, CPUtable } from "#components/Tables";
const App = () => {
return (
<>
<GPUtable />
<CPUtable />
</>
);
};
export default App;
There are some minor fixes you need to make (below), but the main issue is that Create React App does not expose the webpack config, you'll need to eject to edit that.
npm run eject
Merge the babel configs: delete the babel key + value at the bottom of the package.json, and paste the value into your bablrc ("presets": ["react-app"],).
Add import React from 'react'; to the top of App.js
Confirmed locally that the app will run.
Other suggested fixes
Your jsconfig has a trailing comma after the array value in #components/*. You need to remove it because JSON doesn’t support them.
You need to fix the include path in weback.config.dev.js. appSrc isn't something defined on the node path module. Try using path.resolve(__dirname, 'src') - the example in their docs is creating/importing a paths object with appSrc pointing to this value.
You're missing test: /\.(js|jsx|mjs)$/, in webpack.config.dev.js.
I am using webpack with babel to transpile modules and after adding swiper npm package to the build, IE11 browser stopped working because dom7 dependency is not transpiled properly. This is pointed out on the swiper's get started page, however it is not clear what has to be done to fix the problem.
After couple days of research and multiple attempts, I've finally got it working.
Important thing to note is that you must use babel.config.js instead of .babelrc so that node_modules could be included into build.
The final configuration:
babel.config.js (relevant section only):
module.exports = {
"presets": [
["#babel/env", {
"targets": {
"ie": "11"
}
}],...
webpack.config.js (relevant section only):
test: /\.js$/,
exclude: /node_modules\/(?!(swiper|dom7)\/).*/,
rules: [
{
use: [{
loader: 'babel-loader',
options: {
cacheDirectory: true,
babelrc: false,
rootMode: 'upward'
}
}]
}
]
Here is the article which got me to the right direction (see comment from RyanGosden) - https://www.bountysource.com/issues/79144083-not-working-in-ie11
Hope that helps other people to save some time!
Update in 2022:
Previous answer was correct, but swiper 7 adds a new esm dependency named ssr-window. So it needs to be added as below:
webpack.config.js (relevant section only):
test: /\.js$/,
exclude: /node_modules\/(?!(swiper|dom7|ssr-window)\/).*/,
rules: [
{
use: [{
loader: 'babel-loader',
options: {
cacheDirectory: true,
babelrc: false,
rootMode: 'upward'
}
}]
}
]
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
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 am developing an ionic app and i am trying to use the flag-icon-css library (https://github.com/lipis/flag-icon-css). I have installed the library using npm install and added the library to my package.json file
I added the following to my app.scss file:
$flag-icon-css-path: '~flag-icon-css/flags' !default;
#import "~flag-icon-css/sass/flag-icon";
This path is not recognized and i get the following compilation error:
sass: src/app/app.scss, line: 25
File to import not found or unreadable: ~flag-icon-css/sass/flag-icon. Parent style sheet:
/src/app/app.scss
L25: #import "~flag-icon-css/sass/flag-icon";
When changing the path to relative notation, i.e:
$flag-icon-css-path: '../../node_modules/flag-icon-css/flags' !default;
#import '../../node_modules/flag-icon-css/sass/flag-icon';
The code compiles and the css classes are resolved but the app cannot resolve the path to the flags svg files, resulting in a 404 error.
My webpack config:
var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);
module.exports = {
entry: process.env.IONIC_APP_ENTRY_POINT,
output: {
path: '{{BUILD}}',
publicPath: 'build/',
filename: process.env.IONIC_OUTPUT_JS_FILE_NAME,
devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
},
devtool: process.env.IONIC_SOURCE_MAP_TYPE,
resolve: {
extensions: ['.ts', '.js', '.json'],
modules: [path.resolve('node_modules')]
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.ts$/,
loader: process.env.IONIC_WEBPACK_LOADER
}
]
},
plugins: [
ionicWebpackFactory.getIonicEnvironmentPlugin(),
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};
Any ideas?