Code Monkey home page Code Monkey logo

Comments (6)

catamphetamine avatar catamphetamine commented on May 18, 2024

Well, we have style_loader_path_extractor for that now
https://github.com/halt-hammerzeit/webpack-isomorphic-tools/blob/master/source/plugin/plugin.js#L207-L210

The strange thing is that your path is /myproject/components/Ad/Ads.scss instead of ./components/Ad/Ads.scss.
I didn't see such absolute paths before.
Maybe your webpack is set up wrong or something else

from webpack-isomorphic-tools.

sergesemashko avatar sergesemashko commented on May 18, 2024

I've just tried style_loader_path_extractor, however I got the same error because paths are absolute in webpack-stats.json:

{
  "javascript": {
    "main": "http://localhost:3001/dist/main-3e2673a8359a316eb4cc.js"
  },
  "styles": {},
  "assets": {
    "/myproject/example/components/Ad/Ads.scss": {
      "boxAdWrapper": "boxAdWrapper___2ASei",
      "bannerAdWrapper": "bannerAdWrapper___2xr1Z",
      "boxAd": "boxAd___1q-Nw",
      "bannerAd": "bannerAd___VeW6w",
      "_style": "..."
    }
  }
}

I'm using https://github.com/erikras/react-redux-universal-hot-example boilerplate, so webpack config is almost the same except few lines, see them highlighted below as CHANGED:

module.exports = {
  devtool: 'inline-source-map',
  context: rootDir, // CHANGED. absolute path to project root, /myproject
  entry: {
    'main': [
      // use webpack-hot-middleware from koa-webpack-hot-middleware dependencies
      'koa-webpack-hot-middleware/node_modules/webpack-hot-middleware/client.js?path=http://' + host + ':' + port + '/__webpack_hmr', // CHANGED
      path.relative(rootDir, process.env.CLIENT) // CHANGED. relative path of project rootDir to client.js
    ]
  },
  output: {
    path: assetsPath,
    filename: '[name]-[hash].js',
    chunkFilename: '[name]-[chunkhash].js',
    publicPath: 'http://' + host + ':' + port + '/dist/'
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /hydra\/node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.less$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
      { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
      { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
    ]
  },
  progress: true,
  resolve: {
    modulesDirectories: [
      'src',
      'node_modules'
    ],
    extensions: ['', '.json', '.js']
  },
  plugins: [
    // hot reload
    new webpack.HotModuleReplacementPlugin(),
    new webpack.IgnorePlugin(/webpack-stats\.json$/),
    new webpack.DefinePlugin({
      __CLIENT__: true,
      __SERVER__: false,
      __DEVELOPMENT__: true,
      __DEVTOOLS__: true  // <-------- DISABLE redux-devtools HERE
    }),
    webpackIsomorphicToolsPlugin.development()
  ]
};

Not really sure where absolute paths are coming from. @halt-hammerzeit, does it make sense to add check for absolute path to style_loader_path_extractor?

NodeJS version is 5.0.0

from webpack-isomorphic-tools.

catamphetamine avatar catamphetamine commented on May 18, 2024

Well, there are two CHANGED lines.

Try to output these values to the console.log

rootDir
path.relative(rootDir, process.env.CLIENT)

from webpack-isomorphic-tools.

sergesemashko avatar sergesemashko commented on May 18, 2024

Console logged them:

  • rootDir: /Users/<user>/Sites/react-redux - the alias of /myproject from previous message
  • path.relative(rootDir, process.env.CLIENT): client.js

from webpack-isomorphic-tools.

catamphetamine avatar catamphetamine commented on May 18, 2024

try to manually write ./client.js instead of path.relative(rootDir, process.env.CLIENT) and then run your project.

from webpack-isomorphic-tools.

sergesemashko avatar sergesemashko commented on May 18, 2024

I figured out the weird issue with paths. I have uncommon project structure and I was loading webpack from node_modules of parent directory, so that's probably why webpack made all paths absolute. I placed everything in one folder and it works fine now.
Thanks for the help and for style_loader_path_extractor hint.
closing the issue.

from webpack-isomorphic-tools.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.