Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

module error when trying to include #5

Open
martypdx opened this issue Sep 2, 2015 · 9 comments
Open

module error when trying to include #5

martypdx opened this issue Sep 2, 2015 · 9 comments

Comments

@martypdx
Copy link

martypdx commented Sep 2, 2015

Can't require this because inclusion of require('styles.styl') doesn't work (I'm not using webpack).

Doesn't seem like dev dependencies should be necessary for runtime use :)

Cannot find module '!!./../node_modules/css-loader/index.js!./../node_modules/stylus-loader/index.js!./styles.styl' from '/Users/marty/cardsmith/app/node_modules/ractive-datatable'
Error: Cannot find module '!!./../node_modules/css-loader/index.js!./../node_modules/stylus-loader/index.js!./styles.styl' from '/Users/marty/cardsmith/app/node_modules/ractive-datatable'
    at /Users/marty/cardsmith/app/node_modules/gobble-
...
@JonDum
Copy link
Owner

JonDum commented Sep 2, 2015

Ah hmm, so the built version has the styles included in the javascript, but the source version uses stylus-loader to compile that shiz. Is there a stylus-loader equivalent for gobble?

@martypdx
Copy link
Author

martypdx commented Sep 2, 2015

Looks like maybe it's the hot-loader code at L437:

        if(!content.placeholders) {
            module.hot.accept("!!./../node_modules/css-loader/index.js!./../node_modules/stylus-loader/index.js!./styles.styl", function() {
                var newContent = require("!!./../node_modules/css-loader/index.js!./../node_modules/stylus-loader/index.js!./styles.styl");
                if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
                update(newContent);
            });
        }

@JonDum
Copy link
Owner

JonDum commented Sep 3, 2015

@martypdx I've been making a lot of components lately and I want them to be usable for everyone.

Would it be easier if I pointed the package.main towards the built version? Or do you use the version in src/ directly?

Also, I may be able to run it through Uglify and then beautify it so it removes all the useless webpack before it goes through uglify again in your app.

@JonDum
Copy link
Owner

JonDum commented Sep 3, 2015

The other option is to do what I did in ractive-autosize-input and only provide a minified version in the repo and leave the package.json's main pointed to the src/ so people with webpack/require can npm i it and use it directly after with the same name.

@martypdx
Copy link
Author

martypdx commented Sep 3, 2015

@JonDum I just did npm install ractive-datatable and then import datatable from 'ractive-datatable';, so whatever makes that work :)

The package main looks like it is pointed to datatable.js in the root, but I'm not an npm publisher expert (yet).

@JonDum
Copy link
Owner

JonDum commented Sep 3, 2015

That's the goal! But I actually meant for src/datatable.js to be the package main lol.

What do you use? Gulp+Babel? I'd like to test if it works when package.main points to the src/ entry file.

@martypdx
Copy link
Author

martypdx commented Sep 3, 2015

What do you use?

gobble + gobble-babel + browerify

@JonDum
Copy link
Owner

JonDum commented Sep 7, 2015

Can you post your gobblefile you use? I used the example project in the gobble repo, and all it did was output some require() statements instead of actually including the code, so I'm really confused and am probably not using gobble like you do.

app.js pre-gobble:

import Ractive from 'ractive'
import datatable from 'ractive-datatable'

alert('hello!')

console.log(Ractive);
console.log(datatable);

post gobble:

"use strict";

var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };

var Ractive = _interopRequire(require("ractive"));

var datatable = _interopRequire(require("ractive-datatable"));

alert("hello!");

console.log(Ractive);
console.log(datatable);
//# sourceMappingURL=app.js.map

Not sure how the imports/requires even get into the resultant app.js? The build folder doesn't even include them anywhere.

@ghost
Copy link

ghost commented Oct 26, 2017

I have installed version : "ractive-datatable": "^1.7.0"

After including this line import datatable from 'ractive-datatable';

the following throwing ....

"!ractive!./template.html" in /home/salim/MyProjects/employee-management/node_modules/ractive-datatable/src/datatable.js (web.browser)
                                              
If you notice problems related to these missing modules, consider running:
                                              
  meteor npm install --save !ractive!.        
                                              
=> Errors prevented startup:                  
   
   While building for web.browser:
   node_modules/ractive-datatable/src/partials/default.html:1: Expected one of: <body>, <head>, <template>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants