title: Field 'browser' doesn't contain a valid alias configuration when I changed the import path using @
body: <p>When I changed the vue component import from:</p>
  <pre><code>import Options from './components/Translator.vue'
  </code></pre>
  <p>to:</p>
  <pre><code>import Options from '@/popup/components/Translator.vue'
  </code></pre>
  <p>shows error:</p>
  <pre><code>ERROR in ./src/popup/App.vue?vue&amp;type=script&amp;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&amp;type=script&amp;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&amp;type=script&amp;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
  </code></pre>
  <p>Where is the <code>browser</code>? 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:</p>
  <pre><code>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'),
      },
    },
  </code></pre>
  <p>Today I face the same problem again and tweak the config like this:</p>
  <pre><code>resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
            process: 'process/browser',
            @: path.resolve(__dirname, 'src'),
        },
      },
  </code></pre>
  <p>still did not work at all. This is my full webpack config:</p>
  <pre><code>  const path = require('path');
    const webpack = require( 'webpack' );
    const MiniCssExtractPlugin = require( 'mini-css-extract-plugin');
    const HtmlWebpackPlugin = require( 'html-webpack-plugin');
    const CopyPlugin = require(&quot;copy-webpack-plugin&quot;);
    const { VueLoaderPlugin } = require(&quot;vue-loader&quot;);
  
    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, &quot;css-loader&quot;],
          },
          {
            test : /\.(scss)$/ ,
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
          }
        ]
      },
      plugins : [
        new webpack.ProvidePlugin({
          process: 'process/browser',
        }),
        new VueLoaderPlugin(),
        new CopyPlugin({
          patterns: [
            { from: &quot;src/manifest.json&quot;, to: &quot;manifest.json&quot; },
            { from: &quot;src/resource/image&quot;, to: &quot;resource/image&quot; },
          ],
        }),
        new MiniCssExtractPlugin({
          filename: &quot;[name].css&quot;,
          chunkFilename: &quot;[id].css&quot;,
        }),
        new HtmlWebpackPlugin({
          filename: 'popup/popup.html',
          template: 'src/popup/index.html'
        }),
        new webpack.DefinePlugin({
          __VUE_OPTIONS_API__: false,
          __VUE_PROD_DEVTOOLS__: false,
        }),
      ]
    };
  </code></pre>