Module parse failed error thrown when trying to import using index.js exports

[grimunit]

When I try to utilize the index.js exports by importing using just the node module name I get a parsing error:

ERROR in ./~/reduxbknd-sdk/index.js Module parse failed: /Users/{username}/{project_path}/node_modules/reduxbknd-sdk/index.js Unexpected token (2:7) You may need an appropriate loader to handle this file type.

I'm trying to import it like this: import { get_items } from 'reduxbknd-sdk';

[rannn505]

Did you generate "items" using the "npm run generate"? And can you verify that "import { get_items } from './node_modules/reduxbknd-sdk/src/items/itemsActions" works? and I will be very thankful if you will add "index.js" content after the generation

[grimunit]

Yes I ran generate for the 'items' object, and my IDE is correctly identifying that it is the correct path linking to the correct npm module.

This is what my index.js file looks like after running generate for my objects:

Index.js

export * from './src/auth/authActions'
export authReducer from './src/auth/authReducer'

export * from './src/users/usersActions'
export usersReducer from './src/users/usersReducer'
export * from './src/items/itemsActions'
export itemsReducer from './src/items/itemsReducer'
export * from './src/uploads/uploadsActions'
export uploadsReducer from './src/uploads/uploadsReducer'
export * from './src/itemType/itemTypeActions'
export itemTypeReducer from './src/itemType/itemTypeReducer'
export * from './src/itemSize/itemSizeActions'
export itemSizeReducer from './src/itemSize/itemSizeReducer'

[rannn505]

But if you try to use import { get_items } from './node_modules/reduxbknd-sdk/src/items/itemsActions instead of import { get_items } from 'reduxbknd-sdk' the error is gone?

and can you please add the "index.js" content after the generation 🥇

[rannn505]

Which loader do you use? not babel?

[grimunit]

I was going to open another issue for the error I get when I try to import it directly. But it says it can't find the module when I try to access it with a relative path.

So when I import like this: import { get_items } from '../node_modules/reduxbknd-sdk/src/items/itemsActions';

I get this error: ERROR in ./app/containers/Inventory/actions.js Module not found: Error: Can't resolve '../node_modules/reduxbknd-sdk/src/items/itemsActions' in '/Users/{username}/{project_path}/app/containers/Inventory'

I'm using the react-boilerplate which uses the following loaders:

• babel-loader
• exports-loader
• imports-loader
• file-loader
• json-loader
• url-loader
• css-loader
• html-loader
• image-webpack-loader
• null-loader
• style-loader
• sass-loader
• karma-sourcemap-loader

[rannn505]

It seems like the loader cant bundle the module files for some reason.... I need you to paste the "index.js" content after the generation here pls so i will be able to check it.

[grimunit]

hmm sorry what do you mean by the content of the index.js file? I thought I already included up above when I said: "This is what my index.js file looks like after running generate for my objects:"

[rannn505]

ohhh... sorry i did not noticed you included it... going to check this out... thx :)

[grimunit]

and I'm also trying to use the vanillabknd-sdk to connect to my app with the backand.initiate api, but I can't seem to find anywhere in my Backand app the required signUpToken. I was able to find the anonymousToken. Any documentation that explains how I generate that? Or is it automatically supposed to be supplied to you the same way the anonymousToken is but I just can't find it in the dashboard?

[grimunit]

Oh I think I found it, it's in the Security & Auth > Social & Keys section, nevermind will try using that now.

[rannn505]

[grimunit]

Awesome ok I'm now getting data with the vanilla api, but I'd love to use this redux sdk. But ya it's probably not liking me trying to do relative imports with the loaders I have, and then the index.js imports aren't playing nice either because of the loaders :/

[grimunit]

In the boilerplates docs > general > gotchas.md it talks about needing to import with the loader syntax if you're importing images with any other tag besides the <img> tag in your html files. Saying that you would need to import them like this: import 'file?name=[name].[ext]!../img/yourimg.png';

I wonder if I'd have to do something similar for any of the files from the redux sdk?

[rannn505]

you should try... im trying to fix the issue with the index.js now... will have answer soon :)

[rannn505]

ok i think i fixed the issue... can you do npm update and check again with this syntax: import { get_items } from 'reduxbknd-sdk' and how did it go with the thing from the boilerplates docs?

[grimunit]

Thanks, looks like I now get the exact same error as if I were loading it relatively. But I think what I've found is that it has to do with the html-webpack-plugin. I think the boilerplate tries to do a lot of optimizations and make it no able to import for some reason :/ I'll keep looking.

[rannn505]

I'v downloaded react-boilerplate and on the example app made the customization that on the readme ... and the webpack of the project didnt throw any errors as you can see: anyway let me know if you find any solution for your problem

[grimunit]

Hmm and you added the reduxbknd-sdk and imported some files using this syntax?

import { get_items } from 'reduxbknd-sdk';

[grimunit]

Oh hey.... duh I forgot to go and run the generate command again... It's working now :D Thanks for fixing that, I see the changes that are being generated in the new index.js file:

export * from './src/auth/authActions'
export { default as user } from './src/auth/authReducer'

export * from './src/users/usersActions'
export { default as users } from './src/users/usersReducer'
export * from './src/items/itemsActions'
export { default as items } from './src/items/itemsReducer'
export * from './src/uploads/uploadsActions'
export { default as uploads } from './src/uploads/uploadsReducer'
export * from './src/itemType/itemTypeActions'
export { default as itemType } from './src/itemType/itemTypeReducer'
export * from './src/itemSize/itemSizeActions'
export { default as itemSize } from './src/itemSize/itemSizeReducer'

Will now try and doing some importing and trying it out. Thanks for your help.

[rannn505]

Ok, so let me if it works as expected, and if you liked it... or wants to improve something... and i will be glad if you mark this issue as closed when you done... thx 👍

[grimunit]

Yep it's working, I'm able to import no problem now.