Semantic-Org/Semantic-UI-LESS

Can't resolve '../../theme.config'

keyvanm opened this issue · 2 comments

Hi,

Thank you for this amazing library! I am using the official theming guide at https://react.semantic-ui.com/theming to set up theming for my React App. Unfortuantely after following the steps and running npm start I get this error message:

Failed to compile.

./node_modules/semantic-ui-less/semantic.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-8-3!./node_modules/semantic-ui-less/semantic.less)

@import (multiple) '../../theme.config';
^
Can't resolve '../../theme.config' in 'PROJECT_DIR/node_modules/semantic-ui-less/definitions/modules'
      in PROJECT_DIR/node_modules/semantic-ui-less/definitions/modules/transition.less (line 19, column 0)

It seems like the alias defined in craco.config.js isn't being picked up.

  webpack: {
    alias: {
      '../../theme.config$': require('path').resolve(
        __dirname,
        '/src/semantic-ui/theme.config',
      ),
    },
  },

It might be related to #6

Fixed! It should be path.join() rather than path.resolve()

  webpack: {
    alias: {
      '../../theme.config$': require('path').join(
        __dirname,
        '/src/semantic-ui/theme.config',
      ),
    },
  },

Hi, I have the exact same issue, but in the official theming guide I do not see any requirement of alias define. I tried to do this:

module.exports = {
  webpack: {
    alias: {
      '../../theme.config$': require('path').join(
        __dirname,
        '/src/semantic-ui/theme.config',
      ),
    },
  },
  plugins: [{ plugin: require('@semantic-ui-react/craco-less') }],
}

but still got the same problem, what is worng?