Error finding ~flexboxgrid about react-flexbox-grid

[roylee0704]

@rsteckler Have you checked my https://github.com/roylee0704/react-flexbox-grid-example already? :) Over there I've put an example of how to run & supercharge my lib with webpack, sass and css-modules.

[rsteckler]

I looked at the example and it works perfectly :)

I even tried stealing pieces of the webpack config from your project, but I'm unable to find the right magical combination to get it working.

I think the real problem is that I don't understand what that error is telling me. flexboxgrid seems like an odd path to be looking for - it's clearly not referencing my user directory (). I'm assuming it's looking in the node_modules folder, but in that case, it should find flexboxgrid; it's definitely installed.

I read the docs for isomorphic-style-loader, but didn't see anything that points me in the right direction, either.

I totally get that your example proves that react-flexbox-grid works! I'm just trying to get it to work in the project I already have setup :)

[roylee0704]

ah, if that's the case, would you mind to dump both your webpack.config & package.json here? :)

[rsteckler]

Absolutely; here they are. For what it's worth, I've basically taken this project and tried to add react-flexbox-grid to it.
I know this isn't a problem in this project, so I appreciate the help!

[roylee0704]

Perhaps the culprit is the missing extension: \.css. Because the original source for flexboxgrid lib is in .css, and should be consumed by css-loader.

{
        test: /(\.scss|\.css)$/,
        loaders: [
          'isomorphic-style-loader',
          `css-loader?${DEBUG ? 'sourceMap&' : 'minimize&'}modules&localIdentName=` +
          `${DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]'}`,
          'postcss-loader',
        ],
      },

[leandroz]

I also had the same problem, I solved it adding .scss to the require statement for the style file. I think you should do the same to save some headaches to other people! By the way thanks for the library! great work!

[rsteckler]

Adding the css loader didn't make a difference.
I edited the /node_modules/react-flexbox-grid/lib/styles.scss file that had the "problematic" import. I changed it from:

@import '~flexboxgrid';

to

@import 'flexboxgrid/dist/flexboxgrid.css';

Things look "better", but I still get a weird exception in webpack:

Child
    Time: 5102ms
                           Asset     Size  Chunks             Chunk Names
    main.js?221d13c9b7b647724618  4.19 MB       0  [emitted]  main
Child
    Time: 4219ms
            Asset    Size  Chunks             Chunk Names
        server.js  206 kB       0  [emitted]  main
    server.js.map  209 kB       0  [emitted]  main
webpack: bundle is now VALID.
Error: Cannot find module '../style'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/rsteckler/code/evmote/web/node_modules/react-flexbox-grid/lib/components/Grid.js:13:14)
    at Module._compile (module.js:397:26)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)

This is after I included '.scss' in the list of resolve extensions in the webpack config.

I changed react-flexbox-grid/lib/componenets/Grid.js to say:

var _style = require('../style.scss');

...but that resulted in another error:

Child
    Time: 4079ms
            Asset    Size  Chunks             Chunk Names
        server.js  206 kB       0  [emitted]  main
    server.js.map  209 kB       0  [emitted]  main
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
webpack building...
SyntaxError: Unexpected token ILLEGAL
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/rsteckler/code/evmote/web/node_modules/react-flexbox-grid/lib/components/Grid.js:13:14)
    at Module._compile (module.js:397:26)
    at Object.Module._extensions..js (module.js:404:10)
webpack built a514d96197abd778897b in 175ms

I'm guessing that modifying the compiled code in lib isn't a great idea, but I'm getting desperate :)

[roylee0704]

okay, revert back to its previous state, under loaders for css/scss, include .css extension:

      {
        test: /(\.scss|\.css)$/,
        loaders: [
          'isomorphic-style-loader',
          `css-loader?${DEBUG ? 'sourceMap&' : 'minimize&'}modules&localIdentName=` +
          `${DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]'}`,
          'postcss-loader',
        ],
      },

Then, add modulesDirectories under resolve:, this tells webpack where to consume files.

  resolve: {
    extensions: ['', '.jsx', '.css', '.scss', '.js', '.json'],
    modulesDirectories: [
      'node_modules',
      path.resolve(__dirname, './node_modules')
    ]
  },

[rsteckler]

Thank you for the help. When I do that, I continue to get:

ERROR in ./~/css-loader?sourceMap&modules&localIdentName=[name]_[local]_[hash:base64:3]!./~/postcss-loader!./~/react-flexbox-grid/lib/style.scss
    Module build failed: Error: /Users/rsteckler/code/evmote/web/node_modules/react-flexbox-grid/lib/style.scss:1:1: Failed to find '~flexboxgrid' from /Users/rsteckler/code/evmote/web

Simply getting rid of the ~ on the import statement gives me:

Child
    Time: 5146ms
                           Asset     Size  Chunks             Chunk Names
    main.js?221d13c9b7b647724618  4.19 MB       0  [emitted]  main
Child
    Time: 4202ms
            Asset    Size  Chunks             Chunk Names
        server.js  206 kB       0  [emitted]  main
    server.js.map  209 kB       0  [emitted]  main
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
webpack building...
Error: Cannot find module '../style'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/rsteckler/code/evmote/web/node_modules/react-flexbox-grid/lib/components/Grid.js:13:14)
    at Module._compile (module.js:397:26)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
webpack built 221d13c9b7b647724618 in 183ms
Child
    Time: 183ms
Child
    Time: 4202ms
            Asset    Size  Chunks             Chunk Names
        server.js  206 kB       0  [emitted]  main
    server.js.map  209 kB       0  [emitted]  main
webpack: bundle is now VALID.
Error: Cannot find module '../style'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/rsteckler/code/evmote/web/node_modules/react-flexbox-grid/lib/components/Grid.js:13:14)
    at Module._compile (module.js:397:26)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)

If you get fed up trying to help, let me know. You're under no obligation to get it working :)

[roylee0704]

No worries, I'm more than willing to help. I will attempt to include react-flexbox-grid into react-starter-kit, when I get back to my machine tomorrow. :)

[rsteckler]

That would be AMAZING.

Thank you!

On Wed, Jan 27, 2016 at 11:36 AM LEE SIONG TAI (Roy) <
[email protected]> wrote:

No worries, I'm more than willing to help. I will attempt to include
react-flexbox-grid into react-starter-kit, when I get back to my machine
tomorrow. :)

—
Reply to this email directly or view it on GitHub
#12 (comment)
.

Thanks,
Ryan Steckler

[leandroz]

I made it work with https://github.com/davezuko/react-redux-starter-kit adding the .scss extension as I said before. The only thing I don't understand why the change made it work, I have the '' to resolve files without the extension.

[rsteckler]

@leandroz Adding the extension didn't work for me. I definitely tried that.
My guess is that it's something with the isomorphic-style-loader not liking the way the modules are required, but I'm way out of my depth on this stuff. Still in learning mode with react/webpack.

[roylee0704]

@rsteckler cant get it to work with isomophic-style-loader. I'm gonna try on different approach.

[rsteckler]

Well, I'm glad it wasn't just me :)
I'm going to try a different boilerplate that works better with flexbox-grid. There's no need to spend more time trying to get them working together.

Thanks for all of your help!

[rsteckler]

I just tried it with react-redux-universal-hot-example and it works perfectly.

Thank again!