2

After updating to a new webpack (from 1 to 3), the following error occurs with all aliases (with webpack --display-error-details:

ERROR in ./app/components/Units/Material/_/Views/index.css
Module not found: Error: Can't resolve './config/root.css' in '/home/cpt/Desktop/prod/local/app/components/Units/Material/_/Views'
resolve './config/root.css' in '/home/cpt/Desktop/prod/local/app/components/Units/Material/_/Views'
  using description file: /home/cpt/Desktop/prod/local/package.json (relative path: ./app/components/Units/Material/_/Views)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /home/cpt/Desktop/prod/local/package.json (relative path: ./app/components/Units/Material/_/Views)
    using description file: /home/cpt/Desktop/prod/local/package.json (relative path: ./app/components/Units/Material/_/Views/config/root.css)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/cpt/Desktop/prod/local/app/components/Units/Material/_/Views/config/root.css doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/cpt/Desktop/prod/local/app/components/Units/Material/_/Views/config/root.css.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/cpt/Desktop/prod/local/app/components/Units/Material/_/Views/config/root.css.json doesn't exist
      as directory
        /home/cpt/Desktop/prod/local/app/components/Units/Material/_/Views/config/root.css doesn't exist

Here is my webpack.config.js:

/* eslint-disable */
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const config = require('../config');
const write = require('./write');
const defaultConfig = require('./default.config');

var version;

try {
    version = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'version.json'), 'utf8'));
    version += 1;
    fs.writeFileSync(path.resolve(__dirname, 'version.json'), version);
} catch (e) {
    version = 0;
    fs.writeFileSync(path.resolve(__dirname, 'version.json'), 0);
}

module.exports = Object.assign({}, {

    entry: path.resolve(__dirname, '..', 'client', 'index.js'),

    output: {
        filename: `application-[hash].version.${version}.js`,
        path: path.resolve(__dirname, '..', 'public', 'assets'),
        publicPath: `/public/assets/`
    },

    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            include: [
                path.resolve(__dirname, '..', 'app'),
                path.resolve(__dirname, '..', 'client'),
                path.resolve(__dirname, '..', 'utils'),
                path.resolve(__dirname, '..', 'config')
            ]
        },
        {
            test: /\.css$/,
            use: {
                loader: 'css-loader',
                options: {
                    modules: true,
                    localIdentName: config.get('classnames:production')
                }
            }
        },
        {
            test: /\.sss$/,
            use: {
                loader: 'sass-loader',
                options: {
                    modules: true,
                    localIdentName: config.get('classnames:production')
                }
            }
        }]
    },

    plugins: [
        new ExtractTextPlugin(`application-[hash].version.${version}.css`, {allChunks: true}),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production'),
                BROWSER: true,
                API_ROOT: JSON.stringify(process.env.API_ROOT || '')
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            output: {comments: false},
            compress: {warnings: false}
        }),
        new CompressionPlugin({
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
        }),
        new webpack.optimize.AggressiveMergingPlugin(),
        write({
            dirname: path.resolve(__dirname, '..', 'public', 'assets'),
            processMainOnly: true,
            version
        })
    ],
    resolve: {
        alias: {
            constants: path.resolve(__dirname, '../app/constants'),
            actions: path.resolve(__dirname, '../app/actions'),
            components: path.resolve(__dirname, '../app/components'),
            reducers: path.resolve(__dirname, '../app/reducers'),
            config: path.resolve(__dirname, '../config'),
            modules: path.resolve(__dirname, '../app/modules'),
            utils: path.resolve(__dirname, '../utils'),
            api: path.resolve(__dirname, '../app/api.js')
        },

        modules: [
            'node_modules',
            'components'
        ]
    }
});

And my package.json: https://jsonblob.com/408db155-6746-11e9-89b4-f5e81a4a1a2f

How i import in css files: @import 'config/root.css';

My folder structure:

├── app
│   ├── components
|        ├──some_component
|           ├──index.js
|           ├──index.css
│   ├── App.js
├── webpack
│   ├── webpack.config.js
├── config
│   ├── root.css

Tell me, please, what could be the matter? Alias is faithfully refs to the config folder, the problem is 100% in import.

Also, I repeat, the problem is not only with the config folder, but also with the rest of the aliases.

Thanks in advance for any of your advice or answer.

A.Burdonskaya
  • 511
  • 1
  • 4
  • 27
  • Do you have any `@import` inside your css files? – herodrigues Apr 23 '19 at 11:03
  • @herodrigues of course! sorry, forgot to add this in question, updated post – A.Burdonskaya Apr 23 '19 at 11:06
  • You have to have an alias for the css too. The `css-loader` library doesn't handle this yet (https://github.com/webpack-contrib/css-loader/issues/914). – herodrigues Apr 23 '19 at 11:11
  • @herodrigues Could you please tell me what to do about it? Thanks a lot, now I understand the problem, but I don’t understand how to solve it at all... – A.Burdonskaya Apr 23 '19 at 11:30
  • if you meant the following construction, in `webpack` : `config: path.resolve(__dirname, "../config/root.css")` and in `css` files: `@import 'config'` - this does not work. Well, this is if I understood everything correctly, which I strongly doubt – A.Burdonskaya Apr 23 '19 at 12:11
  • Is your webpack configuration inside the `app` folder? I'd need to check the project folder structure. – herodrigues Apr 23 '19 at 12:47
  • @herodrigues Updated the question, added file structure, please look at it – A.Burdonskaya Apr 23 '19 at 13:00
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/192286/discussion-between-herodrigues-and-a-burdonskaya). – herodrigues Apr 23 '19 at 22:20

0 Answers0