METEOR#1.4.2.5
"source-map-support": "^0.4.11",
"stack-trace": "0.0.9"
stacktrace#0.0.9
source-map-support#0.4.11
This config left no change, so I took out source-map-support and added babel-plugin-source-map-support.
.babelrc:
{
"presets": ["react","es2015","stage-0"],
"plugins": [
"transform-class-properties",
"babel-plugin-source-map-support"
]
}
And this gives me The (source-map-support) Babel 5 plugin is being run with Babel 6. even though babel-plugin-source-map-support#0.0.1 says its "for-6".
Ok, I ended up using meteor add peerlibrary:stacktrace without the npm stuff.
Related
I am currently working on migrating an app from CRA to Next.js. Eslint was working beautifully when using CRA (eslint works out-of-the-box).
I want to use the same CRA linting rules in the Next.js app so I installed eslint-config-react-app. I followed the instructions as provided on the NPM page: https://www.npmjs.com/package/eslint-config-react-app:
npm install --save-dev eslint-config-react-app #typescript-eslint/eslint-plugin#^4.0.0 #typescript-eslint/parser#^4.0.0 babel-eslint#^10.0.0 eslint#^7.5.0 eslint-plugin-flowtype#^5.2.0 eslint-plugin-import#^2.22.0 eslint-plugin-jsx-a11y#^6.3.1 eslint-plugin-react#^7.20.3 eslint-plugin-react-hooks#^4.0.8
create the .eslintrc.json file with the following content:
{ "extends": "react-app" }
However, the linting is not showing up neither in the development console nor in the browser console.
Thanks!
Ok so I found the solution.
I wanted the eslint output to show up in the console when saving edits to a file directly (just like with CRA). Initially, I did not realize that Next.js has no eslint plugin/loader specified in their webpack config so I extended theirs by adding my own. Now everything works as expected, just like it did when using CRA.
I actually used (although slightly modified) CRA's config for the eslint-webpack-plugin plugin. If anyone else wants to have an eslint setup in Next.js similar to CRA, add the following to your next.config.js file:
const path = require('path');
const fs = require('fs');
const ESLintPlugin = require('eslint-webpack-plugin')
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
webpack(config) {
config.plugins.push(new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
eslintPath: require.resolve('eslint'),
context: resolveApp('src'),
cache: true,
cacheLocation: path.resolve(
resolveApp('node_modules'),
'.cache/.eslintcache'
),
// ESLint class options
cwd: resolveApp('.'),
resolvePluginsRelativeTo: __dirname,
baseConfig: {
extends: [require.resolve('eslint-config-react-app/base')],
rules: {},
},
}))
return config
}
}
Note, that when using the above you will need to install eslint-config-react-app and its dependencies (see: https://www.npmjs.com/package/eslint-config-react-app).
Finally, note that since Next.js only renders (compiles) a page when it is needed in development, eslint will only run on a page when it is displayed in the browser as pointed out here: https://github.com/vercel/next.js/issues/9904. This makes adding the following script to package.json as suggested by Roman very useful if you want to do a "full-scan" of your project.
"lint": "eslint ."
You can add a command like this in the scripts section of your package.json:
"lint": "eslint ."
And then you can check your eslint results by running:
npm run lint
I seem to be running into the following error,
>$ gatsby build
success open and validate gatsby-configs - 0.065s
success load plugins - 1.222s
success onPreInit - 0.019s
success delete html and css files from previous builds - 0.002s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.029s
success copy gatsby files - 0.039s
ERROR #11321 PLUGIN
"gatsby-plugin-prefetch-google-fonts" threw an error while running the onPreBootstrap lifecycle:
ENOENT: no such file or directory, stat '.cache/google-fonts//fonts'
Error: ENOENT: no such file or directory, stat '.cache/google-fonts//fonts'
not finished onPreBootstrap - 7.272s
My gatsby-config.js looks like this,
{
resolve: `gatsby-plugin-prefetch-google-fonts`,
options: {
fonts: [
{
family: `Poppins`,
variants: [`300`, `400`, `500`, `600`, `700`],
},
{
family: `Fira Sans`,
variants: [`100`, `300`, `400`, `500`, `600`, `700`],
},
],
},
},
package.json
"dependencies": {
"#styled-system/theme-get": "^5.1.2",
"axios": "^0.21.1",
"babel-plugin-styled-components": "^1.12.0",
"disqus-react": "^1.0.10",
"formik": "^2.1.5",
"gatsby": "^2.24.57",
"gatsby-image": "^2.4.17",
"gatsby-plugin-feed": "^2.5.11",
"gatsby-plugin-google-analytics": "^2.3.13",
"gatsby-plugin-lodash": "^3.3.10",
"gatsby-plugin-mailchimp": "^5.2.2",
"gatsby-plugin-manifest": "^2.4.28",
"gatsby-plugin-offline": "^3.2.27",
"gatsby-plugin-prefetch-google-fonts": "^1.4.3",
},
I've tried the following but doesn't seem to work - Gatsby - Adding Google fonts to Gatsby site
According to some GitHub threads (https://github.com/gatsbyjs/gatsby/issues/27607) it seems to be an unresolved bug (that affects versions greater than ^2.25.1) and they suggest using alternative packages, such as:
gatsby-plugin-google-fonts
gatsby-plugin-preload-fonts
After the proper configuration, the issue should be gone.
Keep in mind that if you are using Gatsvy v3, some packages may be deprecated until they are being upgraded to the new version of Gatsby.
I personally use gatsby-plugin-google-fonts-v2 and works perfectly. You can follow the stack of the fonts in the generated <link> to check the loaded fonts from Google, in this case:
{
resolve: `gatsby-plugin-google-fonts-v2`,
options: {
fonts: [
{
family: `Poppins:wght#300;400;500;600;700`,
},
{
family: `Fira Sans:wght#100;300;400;500;600;700`,
}
]
}
},
I an new to webpack, and I have been able to get it to packup my javascript, but the CSS eludes me. I keep getting a:
“You may need an appropriate loader to handle this file type”
One the first line of my css file. The CSS file is simple:
body {
color:red
}
The webpack.config.js looks like this:
module.exports = {
debug: true,
entry: [ './sdocs.js' ],
output: {
filename: './[name].bundle.js'
},
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
],
}
sdocs.js is also simple and looks like this:
require('./sdocs.css');
Finally the result of running webpack look like this:
ERROR in ./sdocs.css
Module parse failed: C:\Users\Tim\PhpstormProjects\xxx\sdocs.css
Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:5)
at Parser.pp.raise (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:923:13)
at Parser.pp.unexpected (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1490:8)
at Parser.pp.semicolon (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1469:73)
at Parser.pp.parseExpressionStatement (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1994:8)
at Parser.pp.parseStatement (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1772:188)
at Parser.pp.parseTopLevel (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1666:21)
at Parser.parse (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1632:17)
at Object.parse (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:885:44)
at Parser.parse (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock.<anonymous> (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack\lib\NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
at nextLoader (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
at C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
at Storage.finished (C:\Users\Tim\PhpstormProjects\xxx\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
at C:\Users\Tim\PhpstormProjects\xxx\node_modules\graceful-fs\graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3) # ./sdocs.js 1:0-22
I have triple checked, css-loader and style-loader are loaded at the local level. I had them installed globally at first, but i removed them globally and reinstalled them locally. BTW, the debug flag did nothing extra, no change in output, which i thought was weird.
I am running on a windows platform is that matters
Ok,
This is what fixed it for me if anyone runs across this. The issue was in the webpack.config.js. The one the finally worked looked like this:
module.exports = {
debug: true,
entry: [ './sdocs.js' ],
output: {
filename: './[name].bundle.js'
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
],
}
}
The piece that was missing was moving the loaders key under a modules key.
I tried specifying 'loaders' in 'module' key. But, it didn't work for me. I think for webpack versions above 2.5.1, adding a rule in 'module' works perfectly.
Add this in your webpack.config.js
module: {
rules:[
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }
]
}
When you add it as a rule you wouldn't have to provide tha loaders key separately!
I was facing this problem for about 10 days. so here's the solution i found to fix this problem. After using create-react-app you created a react app, first run the script npm run eject.
Then, go to the following link https://webpack.js.org/loaders/, click on the val-loader and install it as described there, then install the url-loader file.
It has to work now.
I had met the same issue you meet. Maybe you were in dev environment (hot reload), just press ctrl+c to kill the process on terminal, and reopen dev env (npm run dev).
I'm getting
You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.
I tried to fix it by adding following codes to my webpack config. But it didn't work for Redux. However, following codes did fix a similar warning from React.
plugins: [
...
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': '"production"'
}
}),
...
Did I miss anything?
Got it work after some trial and error
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': '"production"'
}
})
]
Then in my package.json I run npm script "build:webpack" which does the following
"build:webpack": "webpack -p --define process.env.NODE_ENV='\"production\"'"
I am trying to hook up the Karma test runner, using this seed project as a model.
I pull the seed project in, build it, and the test runner works great.
When I edit the karma.conf.js config file to start including the files from my project, and move it to my current setup (outside the seed project), I get this error:
Running "karma:dev" (karma) task
ERROR [config]: Error in config file!
[ReferenceError: JASMINE is not defined]
ReferenceError: JASMINE is not defined
at module.exports (C:\dev_AD_2014.01_PHASE1\config\karma-dev.conf.js:4:7)
...
I think I see what it's complaining about... in the seed project, it's karma config file is of an older format, that must have JASMINE and JASMINE_ADAPTER defined somewhere:
Seed Project karma config snippet
files = [
JASMINE,
JASMINE_ADAPTER,
'../app/lib/angular/angular.js',
'lib/angular/angular-mocks.js',
'../app/js/*.js',
....
];
exclude = ['karma.conf.js'];
...
My newer setup uses all the latest grunt plugins, and wants the config file wrapped in a module definition like so:
My karma config snippet
module.exports = function(config) {
config.set({
files: [
JASMINE,
JASMINE_ADAPTER,
// library and vendor files
'../dev/vendor/**/*.js'
'../dev/app/**/*.js'
],
exclude: ['**/*.e2e.js', '../config/*.js'],
reporters: ['progress'],
...
So it seems the problem is clear: the newer version(s) of some grunt plugins expect the modular definition, but are longer is setting up JASMINE, etc, as variables that are defined. That's my guess, but I'm a little lost on how to resolve this. I don't want to use the version of Karma that comes with the seed project if I can help it... I think it's version 0.4.4. I believe the newest stable version is 0.10.x.
What am I doing wrong?
Thanks!
If you want to use the latest stable Karma version (0.10.9) you should define Jasmine in the frameworks section and be sure to have karma-jasmine in the plugins section, in your karma configuration file.
Here's an example config file:
karma.conf.js
module.exports = function(config){
config.set({
// base path, that will be used to resolve files and exclude
basePath: '',
// list of files / patterns to load in the browser
files: [
{pattern: 'app/**/*.js', watched: true, included: true, served: true}
],
// list of files to exclude
exclude: [
],
preprocessors: {
},
proxies: {
},
// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
autoWatch: true,
// frameworks to use
frameworks: ['jasmine'],
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: [
'Chrome'
],
plugins: [
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-script-launcher',
'karma-jasmine'
],
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000,
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false
});
};
Source: Karma-runner docs
Including JASMINE and JASMINE_ADAPTER in the files array is applicable to Karma versions 0.8.x and down. With newer versions of Karma, that is version 0.13 currently, just remove those 2 lines from the files array since you are already loading Jasmine as the framework(framework=['jamsine']).