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
Related
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.
I am getting the below error in console of IE11 -
SCRIPT5007: Unable to set property 'nextEffect' of undefined or null reference.
I am using 6.26.0 version of babel-polyfill.
I have added babel-polyfill in webpack.config.js.
entry: ['babel-polyfill', './src/index.js']
Please try https://www.jianshu.com/p/3b27dfc6785c:(no more -1 pls)
Global babel-polyfill (do not use useBuiltIns)
Instructions
Method 3.1: (Browser Environment) is introduced separately in the html tag babel-polyfill.js(both CDN or local file)
Method 3.2: package.jsonAdd babel-polyfilldependencies in, webpackadd entries in the configuration file: eg entry: ["babel-polyfill",'./src/app.js'], polyfill will be packaged into this entry file, and placed at the very beginning of the file
Method 3.3: package.jsonAdd babel-polyfilldependencies in, webpackuse the import/requireintroduction at the top of the entry file , such as `import 'babel-polyfill'``
This is my data structure
WEBVTT
00:00:15.000 --> 00:00:17.951
At the left we can see...
00:00:18.166 --> 00:00:20.083
At the right we can see the...
00:00:20.119 --> 00:00:21.962
...the head-snarlers
I am trying to parse a web vtt file. For this I wrote :
var data = require('./captions.en.vtt');
Error
client:47 ./src/captions.en.vtt
Module parse failed: C:\Users\sampr\Desktop\MyVIew\WebVtt\src\captions.en.vtt Invalid number (3:0)
You may need an appropriate loader to handle this file type.
Could someone please help me?
You need a appropriate loader for the file type (.vtt).
Install file-loader (npm install --save-dev file-loader) and you could use it directly like this:
var data = require('file-loader!./captions.en.vtt');
Using Next.js, I ended up using this solution.
...add a file called staticdata.js inside the pages/api folder. This will create a Serverless Function that will load the json data from the file, and return it as a response.
Basically the solution is to return the data from an API endpoint.
How would I get SublimeLinter to lint a file such as .babelrc (json or js). The "lint this view" option is greyed out.
Here's my user config: https://gist.github.com/86355281aca4d4fba941
SublimeLinter linters only work on files that have a defined syntax applied, which is recognized by the linter via the "syntax_map" setting and the syntax variable assigned in the linter's linter.py file. So, for example, SublimeLinter-eslint defines syntax as ('javascript', 'html', 'javascriptnext', 'javascript (babel)', 'javascript (jsx)', 'jsx-real'), meaning it will only work on files whose syntax maps to one of those values. Unfortunately, there is no setting in SublimeLinter that allows you to pass a list of file extensions to be linted; everything works by syntax.
The long and short of it is that you'll need to assign a JavaScript syntax to each file you want to lint. This is pretty straightforward: just open a .babelrc file, change the syntax to JavaScript, then select View -> Syntax -> Open all with current extension as... -> JavaScript -> JavaScript. This will create a file JavaScript.sublime-settings in your Packages/User directory with the following contents:
{
"extensions":
[
"babelrc"
]
}
You can then edit this file and add any other extensions you wish, and when you open them in Sublime they'll automatically be assigned the JavaScript syntax, and you'll be able to lint them.