Field 'browser' doesn't contain a valid alias configuration /opt/atlassian/pipelines/agent/build/src/css/index.css doesn't exist .tsx

[noventiqpb]

Scss/CSS files are not working on Azure - npm run build is failed in pipelines in Webpack, React.

I am working on a micro-frontend application. In the localhost environment, everything is working fine. "npm run build" is working fine in the localhost.

But when I tried to build an Azure pipeline, an error came up.

I have tried many times output variable path in webpack.common.js, but every time pipeline failed. Please help me.

Error is:

_Field 'browser' doesn't contain a valid alias configuration /opt/atlassian/pipelines/agent/build/src/css/index.css doesn't exist .tsx

Field 'browser' doesn't contain a valid alias configuration /opt/atlassian/pipelines/agent/build/src/css/index.css.tsx doesn't exist .ts

Field 'browser' doesn't contain a valid alias configuration /opt/atlassian/pipelines/agent/build/src/css/index.css.ts doesn't exist .js_

Complete Error is

ERROR in ./src/App.tsx 3:0-25
Module not found: Error: Can't resolve './css/index.css' in '/opt/atlassian/pipelines/agent/build/src'
resolve './css/index.css' in '/opt/atlassian/pipelines/agent/build/src'
  using description file: /opt/atlassian/pipelines/agent/build/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /opt/atlassian/pipelines/agent/build/package.json (relative path: ./src/css/index.css)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /opt/atlassian/pipelines/agent/build/src/css/index.css doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /opt/atlassian/pipelines/agent/build/src/css/index.css.tsx doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /opt/atlassian/pipelines/agent/build/src/css/index.css.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /opt/atlassian/pipelines/agent/build/src/css/index.css.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /opt/atlassian/pipelines/agent/build/src/css/index.css.json doesn't exist
      as directory
        /opt/atlassian/pipelines/agent/build/src/css/index.css doesn't exist
 @ ./src/bootstrap.tsx 3:0-24 7:30-33
 @ ./src/index.tsx
ERROR in ./src/App.tsx 4:0-26
Module not found: Error: Can't resolve './css/style.scss' in '/opt/atlassian/pipelines/agent/build/src'
resolve './css/style.scss' in '/opt/atlassian/pipelines/agent/build/src'
  using description file: /opt/atlassian/pipelines/agent/build/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /opt/atlassian/pipelines/agent/build/package.json (relative path: ./src/css/style.scss)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /opt/atlassian/pipelines/agent/build/src/css/style.scss doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /opt/atlassian/pipelines/agent/build/src/css/style.scss.tsx doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /opt/atlassian/pipelines/agent/build/src/css/style.scss.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /opt/atlassian/pipelines/agent/build/src/css/style.scss.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /opt/atlassian/pipelines/agent/build/src/css/style.scss.json doesn't exist
      as directory
        /opt/atlassian/pipelines/agent/build/src/css/style.scss doesn't exist
 @ ./src/bootstrap.tsx 3:0-24 7:30-33
 @ ./src/index.tsx

Files structure is

node_modules
public
   index.html
src
   /css/
      - index.css
      - style.scss
   App.tsx
   bootstrap.tsx
   index.tsx
webpack
  webpack.common.js
  webpack.dev.js
  webpack.prod.js
package.json

package.json script tag is:

"scripts": {
    "start": "webpack serve --config webpack/webpack.dev.js",
    "build": "webpack --config webpack/webpack.prod.js",
    "lint": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx,json}\"",
    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
  },

webpack.common.js file code is

module.exports = {
    name: 'mcmp',
    entry: path.resolve(__dirname, '..', './src/index.tsx'),
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.json'],
        mainFields: ['source', 'module', 'main'],
        modules: [path.join(__dirname, '../node_modules')],
    },
    module: {
        rules: [
            {
                test: /\.(?:js|ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            },
            {
                test: /\.(?:css|scss)$/,
                include: path.resolve(__dirname, '..', 'src'),
                use: [
                    // Creates `style` nodes from JS strings
                    "style-loader",
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                    "postcss-loader",
                ],
            },
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
                type: 'asset/inline', // note: you can also use asset/resource for svgs, but it is best when you have large svgs, so it enables caching and also outputs a smaller js bundle size but it increases the number of network request as svgs are emitted as separate files. But asset/inline is best for small svgs. svgs are embedded into js bundles as data urls so it increases bundle size, but reduces http requests.
            },
        ]
    },
    output: {
        path: path.resolve(__dirname, '..', './build'),
        filename: '[name]_[fullhash].js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(__dirname, '..', './public/index.html'),
            favicon: path.resolve(__dirname, '..', './public/images/favicon.ico'),
            showErrors: true,
        }),
        new MiniCssExtractPlugin({
            filename: '[name]_[fullhash].css',
            chunkFilename: '[id].css',
        }),
        new WebpackManifestPlugin({
            writeToFileEmit: true,
        }),
        new ForkTsCheckerWebpackPlugin(),
    ],
}

webpack.prod.js code is

const webpack = require('webpack');
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common');
const Dotenv = require('dotenv-webpack');
const path = require('path');

const prodConfg = {
    mode: 'production',
    devtool: 'source-map',
    plugins: [
        new Dotenv({
            path: path.resolve(__dirname, '..', './env/prod.env'),
        }),
    ],
} 
module.exports = merge(commonConfig, prodConfg);

CSS files are included in App.tsx

import { useState } from 'react'
import './css/index.css'
import './css/style.scss'
import UserImage from './assets/images/user.png'

const App = () => {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h2>App</h2>
      <p>ENVIRONMENT VARIABLE: {process.env.REACT_APP_NAME}</p>
      <p>
        <img src={UserImage} alt=" of user" title=" of user" width={200} />
      </p>
      <p>
        <button onClick={() => setCount(count + 1)}>Click</button>
      </p>
      <p>COUNT: {count} </p>
    </div>
  )
}

export default App

[alexander-akait]

It means you don't have such file, we don't have any logic which change between CI and not, also please check you have valid path to this file

[bin1357]

have same problem after update from [email protected] to 5.94

[alexander-akait]

Can you create reprducible test repo?