Field 'browser' doesn't contain a valid alias configuration when I changed the import path using @

Question

When I changed the vue component import from:

import Options from './components/Translator.vue'

to:

import Options from '@/popup/components/Translator.vue'

shows error:

ERROR in ./src/popup/App.vue?vue&type=script&lang=ts (./node_modules/ts-loader/index.js??clonedRuleSet-1!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[8].use[0]!./src/popup/App.vue?vue&type=script&lang=ts) 3:0-67
Module not found: Error: Can't resolve '@/public/widget/translator/Translator.vue' in '/Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup'
resolve '@/public/widget/translator/Translator.vue' in '/Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup'
 Parsed request is a module
 using description file: /Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/package.json (relative path: ./src/popup)
 Field 'browser' doesn't contain a valid alias configuration
 resolve as module
 /Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup/node_modules doesn't exist or is not a directory
 /Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/src/node_modules doesn't exist or is not a directory
 looking for modules in /Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/node_modules
 /Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/node_modules/@/public doesn't exist
 /Users/xxx/source/reddwarf/frontend/node_modules doesn't exist or is not a directory
 /Users/xxx/source/reddwarf/node_modules doesn't exist or is not a directory
 /Users/xxx/source/node_modules doesn't exist or is not a directory
 /Users/xxx/node_modules doesn't exist or is not a directory
 /Users/node_modules doesn't exist or is not a directory
 /node_modules doesn't exist or is not a directory
 @ ./src/popup/App.vue?vue&type=script&lang=ts 1:0-189 1:0-189 1:190-368 1:190-368
 @ ./src/popup/App.vue 2:0-54 3:0-49 3:0-49 8:49-55
 @ ./src/popup/index.ts 2:0-28 4:14-17
webpack 5.67.0 compiled with 1 error in 116 ms

Where is the browser? I search my whole project and did not found this. why would I set the browser alias? what should I do to avoid this problem? this is the webpack 5.x alias config:

resolve: {
 extensions: ['.tsx', '.ts', '.js'],
 alias: {
 // https://stackoverflow.com/questions/50805384/module-not-found-error-cant-resolve-vue-path-not-correct
 vue: 'vue/dist/vue.esm-bundler.js',
 '@': path.resolve(__dirname, 'src'),
 },
 },

Today I face the same problem again and tweak the config like this:

resolve: {
 extensions: ['.tsx', '.ts', '.js'],
 alias: {
 vue: 'vue/dist/vue.esm-bundler.js',
 process: 'process/browser',
 @: path.resolve(__dirname, 'src'),
 },
 },

still did not work at all. This is my full webpack config:

 const path = require('path');
 const webpack = require( 'webpack' );
 const MiniCssExtractPlugin = require( 'mini-css-extract-plugin');
 const HtmlWebpackPlugin = require( 'html-webpack-plugin');
 const CopyPlugin = require("copy-webpack-plugin");
 const { VueLoaderPlugin } = require("vue-loader");
 module.exports = {
 entry : {
 'popup/popup' : './src/popup/',
 'background/background': './src/background' 
 } ,
 resolve: {
 extensions: ['.tsx', '.ts', '.js'],
 alias: {
 vue: 'vue/dist/vue.esm-bundler.js',
 process: 'process/browser',
 '@': path.resolve(__dirname, 'src'),
 },
 },
 output : {
 path : path.resolve(__dirname, '../../bundle') ,
 filename : '[name].js'
 },
 module : {
 rules : [
 {
 test: /\.ts$/,
 loader: 'ts-loader',
 options: {
 appendTsSuffixTo: [/\.vue$/]
 },
 exclude: /node_modules|\.d\.ts$/
 },
 {
 test: /\.d\.ts$/,
 loader: 'ignore-loader'
 },
 {
 test: /\.vue$/,
 loader: 'vue-loader'
 },
 {
 test : /\.js$/ ,
 exclude : [ /node_modules(?!(\/|\\?\\)(translation\.js|selection-widget|connect\.io|chrome-env)1円)/ ] ,
 loader : 'babel-loader'
 } ,
 {
 test: /\.css$/i,
 use: [MiniCssExtractPlugin.loader, "css-loader"],
 },
 {
 test : /\.(scss)$/ ,
 use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
 }
 ]
 },
 plugins : [
 new webpack.ProvidePlugin({
 process: 'process/browser',
 }),
 new VueLoaderPlugin(),
 new CopyPlugin({
 patterns: [
 { from: "src/manifest.json", to: "manifest.json" },
 { from: "src/resource/image", to: "resource/image" },
 ],
 }),
 new MiniCssExtractPlugin({
 filename: "[name].css",
 chunkFilename: "[id].css",
 }),
 new HtmlWebpackPlugin({
 filename: 'popup/popup.html',
 template: 'src/popup/index.html'
 }),
 new webpack.DefinePlugin({
 __VUE_OPTIONS_API__: false,
 __VUE_PROD_DEVTOOLS__: false,
 }),
 ]
 };

Answer 1

 '@': path.resolve(__dirname, 'src'),

I do not think that it alias should be string

 @: path.resolve(__dirname, 'src'),

https://webpack.js.org/configuration/resolve/

• Dolphin: I tried your way but seems did not work. @Yilmaz the @ must have '' to pass the check by visual studio code.

Answer 2

instead of using @ as alias name, just give a try with some component based name. That may help you.