Comments (35)
@mkatrenik
I eventually went for the empty/object
trick from one of the linked gists https://github.com/briandipalma/wp-r-template/blob/master/.flowconfig#L12 it works fine.
from flow.
I recently saw someone post a complete example in a gist. Does this help?
from flow.
+1. This is currently my blocker for Flow.
from flow.
Each example given in this issue deals with requiring non-JS files, which I believe can now be handled using the module.name_mapper
config with a declaration file. See #345, #382, and the commit message for the fix, which goes into a bit more usage detail.
Does anyone have a use case that isn't addressed with module.name_mapper
?
from flow.
I believe this also could be helpful for loading images, css, json with webpack.
Webpack lets you do: var image = require('image.jpg');
and obviously flow complains about this. It would be nice to be able to set it to any or say that flow can ignore this.
from flow.
Or I though I want to do if left value of right require
is like var somelib: any = require('foo')
then ignore right if it can.
from flow.
Yes this would be great for exactly what @tcoopman said.
from flow.
@tcoopman Can this be "resolved" with an ignore of all files ending in css or a particular extension?
from flow.
@avikchaudhuri See above comment :-)
from flow.
Mine too. Maybe some way to tell flow that a type is what it is and that it should not check it any further?
var image: !string = require('image.jpg');
var css: !any = require('main.css');
Comparable with maybe types, but instead of ?
you add !
. This doesn't let you do require('./Activity.less');
though, so maybe the suggestion of @gaearon is still necessary unless you could do: reauire('./Activity.less'): !any
from flow.
+1
from flow.
+1
from flow.
+1
from flow.
+1
from flow.
+1
from flow.
Perhaps the proper approach is to actually have an intermediate step where autogenerated files are output instead, so that flow can parse them. I'd imagine there are a bunch of benefits to it not only being part of the final bundling process.
from flow.
@syranide not sure what you mean. You mean that flow should parse the css or url?
from flow.
@tcoopman Rather than webpack (etc) generating js-files for css-files/etc only at the final bundle-stage, being able to output them to disk could make sense, then flow would have access to all the js-files it needs, no workarounds necessary. This would be useful for making many other transforms compatible with flow as well.
from flow.
@syranide ok I see. That would be nice but it also seems that would need more support from the build tools?
Wouldn't you then also need to transform your original files or create a mapping file so flow knows where to find them?
So
var f = require(file.jpg)
Outputs file.jpg minimised and hashed filename + a is file that has the hashed filename.
After the translation it would be var f = 'file.hash.jpg'
and flow could type check that.
Again seems nice but in the meantime a solution where you can tell flow that a variable is of a type without type checking it would be a good start.
from flow.
@tcoopman It wouldn't necessarily need more support from the build tools, but some of the steps would have to be available separately (either by the bundler or by an entirely separate transform tool, which seems preferable).
Wouldn't you then also need to transform your original files or create a mapping file so flow knows where to find them?
require('app.css')
would generate app.css.js
according to some user specified css transform (which it already does, it just does so internally), so the initial require would still work as-is. If you had some non-standard resolution of require
s (say @providesModule
) then it could also be applied in this step, flattening the files and rewriting the require
s.
A nice side-effect is that this would also be compatible with any bundler (or no bundler if running node
on the server), so you're less committed to any one bundler and can more easily switch if the need arises.
from flow.
@syranide that looks like it could work indeed. I've asked @sokra on gitter to give his opinion about this.
from flow.
require('app.css')
would generateapp.css.js
Workaround and too error prone.
We could implement a webpack output mode, which outputs every module as separate js file and generate node.js require
s. Basically compiling to a node.js app containing multiple files.
Or we could generate a bundle that can be parsed by flow. SourceMaps could be used to map errors back to the original sources...
from flow.
@samwgoldman do you have an example of how it would work for css files?
I guess the issue is that we don't have a type definition for a css file, I guess it's more blocked on some webpack config/transform than on flow
from flow.
+1
from flow.
I imagine this would work by including something like:
module.name_mapper= '.*\.s*css$' -> './CSSStub'
in your config and then declaring a module like this:
declare module CSSStub { }
But I still get errors like this:
admin.js:8:1,41: sweetalert/dev/sweetalert.scss Required module not found
I'm probably overlooking something simple, any advice?
from flow.
@samwgoldman I will give that a go, seems like it should work.
from flow.
@samwgoldman maybe something for the documentation?
from flow.
@samwgoldman Awesome. Thanks for that article it works. Any idea why declaring my own empty module wouldn't work though? Even with the same regex, it doesn't seem to find my module declaration. Personally I would rather have an extra module declaration rather than add another npm dep.
from flow.
@jeffutter Could you provide a repo that has the minimal code+config to reproduce what you're seeing? What you're describing should work, so a repro would help me figure out what's going on.
from flow.
@samwgoldman I avoided adding webpack and setting up its config file, but the following code is exactly what you'd be using with Webpack and css modules.
I'll also note that the example you linked above is working great. I'd vote +1 for adding it to the docs, this was one of the remaining errors I was getting in one of my repos after moving the code to be more flow-friendly.
Terminal
~/D/flow-css-modules ❯❯❯ ../flow/bin/flow .
src/Foo.js:3:10,29: ./Foo.css
Required module not found
Found 1 error
package.json
{
"name": "flow-css-modules",
"version": "1.0.0",
"main": "src/Foo.js",
"dependencies": {
"react": "^0.13.3"
}
}
.flowconfig
[include]
.*/src/.*
[libs]
./interfaces/CSSModule.js
[options]
module.name_mapper='.*\(.css\)' -> 'CSSModule'
module.system=node
strip_root=true
src/Foo.js
/* @flow */
import cn from './Foo.css'
import type { ReactElement } from 'react'
import React, { Component } from 'react'
export default class Foo extends Component {
render (): ReactElement {
return (
<div className={cn.Foo}>
Foo
</div>
)
}
}
src/Foo.css
.Foo {
height: 100px;
width: 100px;
}
interfaces/CSSModule.js
declare module CSSModule {
declare var exports: { [key: string]: string };
}
declare module 'CSSModule' {
declare var exports: { [key: string]: string };
}
I tried both of those variations and neither works. However if I change it so it has the same string, it works. For example:
declare module './Foo.css' {
declare var exports: { [key: string]: string };
}
from flow.
I'm seeing this error,
app/main.js:7
7: import "./main-style.css";
^^^^^^^^^^^^^^^^^^ ./main-style.css. Required module not found
I guess that means the replacement didn't occur, so there is an issue with the RegExp (module.name_mapper='^.*.css' -> 'CSSModule'
)?
from flow.
@briandipalma your regex works for me if i set module.system=haste
from flow.
+1
from flow.
Sorry for the delay here. @cesarandreu thank you for the very clear repro case. I figured out what is going on here, and it seems like a simple oversight.
In an effort to make the issues a bit higher signal, I'm going to close this and replace it with #1322, which is more to the point with the exact issue.
Thanks everyone!
from flow.
but what about when you import files without the extension?
from flow.
Related Issues (20)
- Relay + graphql literals HOT 11
- [homebrew] regression test failure with 0.226.0,0.227.0 HOT 2
- FLOW BUG: This is a misplaced error HOT 3
- The `experimental.ts_syntax` doesn’t seem to do anything HOT 2
- Parameters<> does not support optional params HOT 2
- Top level exports HOT 1
- flow strict should allow unclear types for generics HOT 6
- Regression in invalid-computed-prop detection HOT 7
- Flow hangs every now and then requires restarting HOT 4
- Component syntax is not enabled HOT 5
- Alternative defaultProps not working with component syntax HOT 1
- Ability to copy all files and not only JS files when stripping types using `flow-remove-types` HOT 5
- Component syntax & unreachable code HOT 1
- Add a setting to turn off type guard removal / mutation risk check
- There is a question about `user friends` under limited login. When using limited login, the app only [get the user friends's app scoped IDs (ASIDs).](https://developers.facebook.com/docs/facebook-login/limited-login/permissions/#key-considerations-user-friends) **Can we get brief details about these user friends**, such like name, avatar, etc. It seems like we can't use graph API under limited login any more.
- [Proposal] Mark state & prop arrays in components & hooks as readonly HOT 5
- React.ElementType not working for children HOT 1
- Default arguments in an object destructure aren't checked for string literal unions HOT 1
- Regression with incompatible-type detection HOT 2
- Internal error on double underscore function name HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flow.