In my MessageItem.tsx component I have the following code:
const data = useFragment(
graphql`
fragment MessageItem_message on Message {
date
body
}
`,
message as any
);
After running relay-compiler --src ./src --schema ../../schema.graphql --language typescript --artifactDirectory ./src/__generated__, a module named MessageItem_message.graphql.ts gets generated.
But when I run the app it gives me an error:
Failed to compile.
./src/components/MessageItem.tsx
Module not found: Can't resolve
'./__generated__/MessageItem_message.graphql'
The reason is only components at the src root can refer to the right path (./__generated__), whereas components in a folder actually need to refer to the path (../__generated__) but it's not doing so.
How can I configure the path?
Edit .babelrc to point to the artifactDirectory
// .babelrc
{
"plugins": [
[
"relay",
{
"artifactDirectory": "./src/ui/graphql/types"
}
]
]
}
Remove "--artifactDirectory ./src/__generated__" from the relay-compiler options.
By default it seems the Relay compiler puts a "__generated__" directory in the directory with any source code containing GraphQL.
As a result any "./__generated__" references anywhere and at any level in the source code hierarchy now work as they should.
Thanks to #ThibaultBoursier for the pointer.
PS I wonder if the --artifcactDirectory option is just meant to be used to change the name of the artifact directory, rather than its location?
Just moments ago I ran into the same issue. The reason is that the relay-compiler is using the artifactDirectory setting to decide where to put the generated files, but the babel-plugin-relay exposing the graphql tag needs to get the very same argument otherwise it just attempts to include a colocated relative file.
I fixed it in my case by configuring the plugin with a babel-plugin-macros.config.js file as follows (where the artifactDirectory is the same as the one supplied to the relay-compiler):
module.exports = {
relay: {
artifactDirectory: "./src/ui/graphql/types",
},
};
This solution assumes you are using the macro via babel-plugin-macros, otherwise you might need to supply that argument via the .babelrc file but I have no experience with that unfortunately.
I am using react-codemirror2. I used npx create-react-app appname to create my app.
But when I try to run the development server it gives me the following error -
./node_modules/codemirror/mode/rpm/changes/index.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <!doctype html>
|
| <title>CodeMirror: RPM changes mode</title>
One solution suggested to change the modulesDirectories. I tried doing so using npm run eject. But wasn't successful at doing it.
Please help me with the same
Go to solutions section if you are in a hurry.
The why
The reason for this error is the way bundling dynamic imports works in webpack. Imports go by providing a starting part of a path and you may refine that through an end part that holds a path that precise an extension.
Ex:
import(`codemirror/mode/${snippetMode}/${snippetMode}`)
ref: https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import
Such an import is processed by webpack through the following regex ^\.\/.*$. That we can see in the error message:
| <title>CodeMirror: RPM changes mode</title>
# ./node_modules/codemirror/mode/ sync ^\.\/.*$ ./rpm/changes/index.html
And that's basically to determine the possible modules. And bundle them as chunks for code splitting.
Because of that open matching regex. So all files of all types (extensions) are matched. Then depending on the extension. The correct loader would be used. If we had the html-loader setup and configured through a rule. That wouldn't fail. As the loader will handle that module (webpack module [html]). Even though that can be an option to handle the problem. It wouldn't be the right thing to do. As it would create an extra bundle for the module. And also some entries for it. In the main bundle.
Dynamic Imports types and there resolution
All types get code splitted (chunks created for them for code splitting). Except for the last one.
Absolute full path. (static) ==> Imported dynamically and code splitted.Ex:
import('codemirror/mode/xml/xml')
The exact path and module will be resolved and a chunk for it will be created.
Dynamic path with a starting path.
Ex:
import(`codemirror/mode/${snippetMode}/${snippetMode}`)
All paths with this regex codemirror\/mode\/.*$ are matched.
Dynamic path with a starting path and an ending path with extension as well.ex:
import(`./locale/${language}.json`)
All paths with the following regex would be matched ./locale/.*\.json which limit it to .json extension module only.
Full variable import.Ex:
import(someVar)
Doesn't create code splitting at all. Neither tries to match. Because it can match just quite anything in the project. Even if the variable is set to a path someVar = 'some/static/path'. It wouldn't check and resolve the variable association.
The solutions
No electron or electron.
module.noParse
module: {
noParse: /codemirror\/.*\.html$/,
rules: [
// ...
noParse tell webpack to not parse the matched files. So it both allows us to exclude files and boost the performance. It works all great. And can be one of the best solutions as well. You can use a regex. Or a function.
ref: https://webpack.js.org/configuration/module/#module-noparse
Don't use the import('some/path' + dynamicEl) format and use instead
const dynamicPath = 'some/path' + dynamicEl
import(dynamicPath) // That would work just ok
Use magic comments [wepackExclude or wepackInclude] with import (if electron and using require => convert require to import + magic comment). Magic comments don't work with require but only import.
ex:
import(
/* webpackExclude: /\.html$/ */
`codemirror/mode/${snippetMode}/${snippetMode}`
)
or even better
import(
/* webpackInclude: /(\.js|\.jsx)$/ */
`codemirror/mode/${snippetMode}/${snippetMode}`
)
Include allows us to make sure we are targeting exactly what we want to target. Excluding HTML. May still create chunks for some other files that are not .js. It's all relative to what we want. If you want to include only a specific extension. An include is better. Otherwise, if we don't know. And some other extension would be required. Then an exclude is better.
ref: https://webpack.js.org/api/module-methods/#magic-comments
Magic comments examples and usage:
// Single target
import(
/* webpackChunkName: "my-chunk-name" */
/* webpackMode: "lazy" */
/* webpackExports: ["default", "named"] */
'module'
);
// Multiple possible targets
import(
/* webpackInclude: /\.json$/ */
/* webpackExclude: /\.noimport\.json$/ */
/* webpackChunkName: "my-chunk-name" */
/* webpackMode: "lazy" */
/* webpackPrefetch: true */
/* webpackPreload: true */
`./locale/${language}`
);
And to fully ignore code splitting
import(/* webpackIgnore: true */ 'ignored-module.js');
If nodejs or electron and the import should be processed as commonjs require. Use the externals config property like in the example bellow:
externals: {
'codemirror': 'commonjs codemirror'
}
which works like this. Webpack for any import with codemirror (left part). convert it to the commonjs import without bundling it (right part).
import(`codemirror/mode/${snippetMode}/${snippetMode}`)
will be converted to:
require(`codemirror/mode/${snippetMode}/${snippetMode}`)
instead of bundled.
extenals doc ref: https://webpack.js.org/configuration/externals/#externals
If electron. And the feature should not be bundled. use window.require for all nodejs electron API calls (Otherwise set it on entry file window.require = require). And use it instead.
Its electron, nodejs ==> Webpack stay the hell out of this
The doctype declaration is incorrect, it should have been:
<!DOCTYPE html>
Notice DOCTYPE should be in caps.
How to use the angular-dynamic-locale with webpack?
The angular-dynamic-locale always tries to load the angular-locale_en.js file from path http://localhost:8080/angular/i18n/angular-locale_de.js during the running-time, when the "tmhDynamicLocale.set('de');" is performed.
I'm using webpack therefore I define every dependencies either in the top of my app.js or in the top of my controllers. I tried to define this with require('angular-i18n/angular-locale_de') or with import, but unfortunatelly, I always get the following error messages:
GET http://localhost:8080/angular/i18n/angular-locale_de.js net::ERR_ABORTED 404 (Not Found)
Refused to execute script from 'http://localhost:8080/angular/i18n/angular-locale_de.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
If you use your locales like this:
tmhDynamicLocaleProvider
.localeLocationPattern('./angular/i18n/angular-locale_{{locale}}.js')
.defaultLocale('de');
You can probably use CopyWebpackPlugin like this:
new CopyWebpackPlugin([
{from: './node_modules/angular-i18n/angular-locale_de.js', to: path.resolve(__dirname, '.[WEBPACK OUTPUT FOLDER]' + '/angular/i18n')}
])
Be sure that the destination folder matches the output of your webpacked files
I'm using create-react-app from Facebook, when it starts via 'npm start' it shows me a list of warnings, such as:
'Bla' is defined but never used
Expected '===' and instead saw '=='
I don't want to see any of these warnings, is there a way to supress them?
For local Eslint, add a file to your project named .eslintignore and add any directories or files you want to ignore:
build/
src/
*.js
Though you might as well remove it entirely at this point.
This doesn't work with building or starting the code however, if you are using create-react-app. There is no way to disable Eslint without ejecting because it's built into react-scripts. Anytime any you build or start the server, it will run eslint using its internal configs aside from special cases defined in package.json. The only way around that is to eject or prepend each file with the disable comment as mentioned elsewhere. See this issue on Github for more information.
Those warnings come from eslint. To disable them add /* eslint-disable */ at the top of the file you don't want to follow the eslint rules.
For specific eslint warning supression insert the following code at the beginning of the file.
/* eslint-disable react/no-direct-mutation-state */
My rep is not high enough to comment on #fly's excellent answer, so I'll C+P it to add this instead:
For anyone looking for a temporary but quick and effective workaround for disabling console warnings from DevTools, this might do the trick.
Disclaimer - this might not work on versions that are not mine(react-scripts v3.0.1, react-dev-utils#^9.0.1), so use it at your own risk.
enter this directory
node_modules/react-dev-utils/webpackHotDevClient.js
look for this function(should be around line 114)
function handleWarnings(warnings) {
either add the return at the start of function printWarnings() (line 124), or comment out the call to printWarnings() in line 145.
restart, eg with npm run start, for change to take effect.
This way, the hot reloader continues to work, but the annoying warnings which have already been caught in my editor are not output in the browser.
Recently the ability to add your own editor configurations was added, this can be used to "partially" disable the functionality of ESLint. You just need to create a configuration file in the root directory.
.eslintrc:
{
"parser": "babel-eslint"
}
.env
SKIP_PREFLIGHT_CHECK=true
If you create a new application, it will by default come with a pre-filled eslintConfig object in the package.json
To Completely Remove eslint warnings, what you can do is create a file named .eslintignore add * and save it. You wont see any more warning.
*
To Remove warnings from a particular folder means in the .eslintignore file add that folder name
/folder_name
/folder_name/file_name.js
You can also do this in the file level also. Add the following in the beginning of the file
/* eslint-disable */
To ignore the next line warning in a file
// eslint-disable-next-line
If you want to disable warnings in DevTools
Open the Console Tab.
Default levels/Custom levels -> uncheck Warnings
Set the DISABLE_ESLINT_PLUGIN environment variable:
DISABLE_ESLINT_PLUGIN=true npm start
For anyone looking for a temporary but quick and effective workaround for disabling console warnings from DevTools,
this might do the trick.
Disclaimer - this might not work on versions that are not mine(react-scripts v3.0.1, react-dev-utils#^9.0.1),
so use it at your own risk.
enter this directory
node_modules/react-dev-utils/webpackHotDevClient.js
look for this function(should be around line 114)
function handleWarnings(warnings) {
and add a return statement right after it.
Your code should end up looking like this(if you're using webstorm)
That should shut the webpackHotDevClient.js:{whateverLineIdontCare} right up.
Cheers.
If you're using create-react-app, then you can go into the package.json and edit the eslintConfig value. I just wanted to disable the "eqeqeq" and "no-unused-vars" rules, so mine looks like this:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"rules": {
"eqeqeq": "off",
"no-unused-vars": "off"
}
},
You'll have to re-run npm start for it to take effect.
Add a .eslintignore file and add
src/*
You can read more about this at
https://eslint.org/docs/user-guide/configuring/ignoring-code
https://eslint.org/docs/user-guide/configuring/rules
You can use craco and configure craco.config.js for example
module.exports = {
webpack: {
configure: (webpackConfig) => {
const ignoreWarnings = [{ module: /some module/, message: /some message/ }]
return { ...webpackConfig, ignoreWarnings }
}
}
}
more details here
You can disable the typescript and/or linting errors with setting the environment variables in .env
TSC_COMPILE_ON_ERROR,
ESLINT_NO_DEV_ERRORS, to true
more information on advanced configuration for create react app on
https://create-react-app.dev/docs/advanced-configuration/
This is a simple way I avoid seeing unused variable warnings when debugging:
import someVariable from "./wherever"
// Prevent unused variable warnings
while (false) {
console.log(someVariable)
}
I've got a small problem where google app engine is complaining about my ttf file. This is what it says:
Could not guess mimetype for css/fonts/Pacifico.ttf. Using application/octet-stream.
Now I've followed this link and changed my yaml file appropriately (or so I think):
- url: /css/fonts/(.*\.ttf)
static_files: css/fonts/\1
upload: css/fonts/(.*\.ttf)
mime_type: application/x-font-ttf
But when I do this i get the following:
appcfg.py: error: Error parsing C:\Users\Roberto\Desktop\bootstrap\app.yaml: mapping values are not allowed here
in "C:\Users\Roberto\Desktop\bootstrap\app.yaml", line 25, column 17.
2014-01-16 23:22:16 (Process exited with code 2)
Any help in this matter?
I have done a test with glyphicons-halflings-regular.ttf from the Bootstrap project with the same app.yaml handler that you use (save for the indentation change as per the comments) and can verify that it works as expected:
This leads me to believe that you may using an older version of the GAE SDK (I use 1.8.8) or something else is wrong with your installation.
You can try this: appcfg.py uses python's mimetypes module to guess the type from the file extension so in any case, you should be able to solve the issue by adding the application/x-font-ttf mime type to your OS.
You're on Windows so you need to edit your registry and add a application/x-font-ttf key to HKEY_CLASSES_ROOT\MIME\Database\Content Type and add a string value called Extension with the value .ttf under the new key.
Extended procedure for adding the mimetype to Windows
Open the registry editor: Hit Winkey + R and type regedit, hit Enter
Navigate through the registry to the desired location: open HKEY_CLASSES_ROOT, inside it open MIME, inside that open Database and inside that open Content Type. It's like a folder structure.
Right click on Content Type and select New > Key, give it the name application/x-font-ttf.
Right click on the key you just created and select New > String Value. give it the name Extension.
Double click on the value you just created and assign it the Value data .ttf, hit OK.
Exit regedit and you're done!
Final none: I don't think it can be anything to do with the file itself, because the mimetypes module uses only the file extension to work out the MIME type. Unless there is some crazy unprintable character in the filename. You could try using the glyphicons-halflings-regular font I linked to to eliminate this possibility.