I am trying to add a wrapper to Styleguidist to wrap my components in a Material UI ThemeProvider, but Styleguidist's parsing of the wrapper file is failing. I used create-react-app for this project.
styleguide.config.js:
const path = require('path');
module.exports = {
components: 'src/components/**/[A-Z]*.js',
styleguideComponents: {
Wrapper: path.join(__dirname, 'StyleguidistMuiThemeWrapper.jsx'),
},
}
StyleguidistMuiThemeWrapper.jsx:
import React from 'react';
import { ThemeProvider } from "#material-ui/core/styles";
import theme from "./src/theme"
// eslint-disable-next-line react/prop-types
const StyleguidistMuiThemeWrapper = ({ children }) => (
<ThemeProvider theme={theme}>
{children}
</ThemeProvider>
);
export default StyleguidistMuiThemeWrapper;
theme.jsx:
import { createMuiTheme, responsiveFontSizes } from "#material-ui/core/styles";
const theme = responsiveFontSizes(
createMuiTheme({
palette: {
primary: {
main: "#FFFFFF", // pure white
dark: "#F9F8F7", // off-white
},
},
})
);
export default theme;
When I try to compile Styleguidist, I get this:
FAIL Failed to compile
./StyleguidistMuiThemeWrapper.jsx 10:2
Module parse failed: Unexpected token (10:2)
File was processed with these loaders:
* ./node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| // eslint-disable-next-line react/prop-types
| const StyleguidistMuiThemeWrapper = ({ children }) => (
> <ThemeProvider theme={theme}>
| {children}
| </ThemeProvider>
# ./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/ReactExample.js 77:0-45 118:60-67
# ./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/index.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Preview/Preview.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Preview/index.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Playground/Playground.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Playground/index.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Examples/Examples.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Examples/index.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Section/Section.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Section/index.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Sections/Sections.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Sections/index.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/StyleGuide/StyleGuide.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/StyleGuide/index.js
# ./node_modules/react-styleguidist/lib/client/utils/renderStyleguide.js
# ./node_modules/react-styleguidist/lib/client/index.js
# multi ./node_modules/#pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/react-styleguidist/lib/client/index ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/react-dev-utils/webpackHotDevClient.js
If I change the wrapper file extension to .jsx (and update the path in styleguide.config.js), I get a different error:
FAIL Failed to compile
./StyleguidistMuiThemeWrapper.js
SyntaxError: /path/to/project/component-library/StyleguidistMuiThemeWrapper.js: Support for the experimental syntax 'jsx' isn't currently enabled (7:3):
5 | // eslint-disable-next-line react/prop-types
6 | const StyleguidistMuiThemeWrapper = ({ children }) => (
> 7 | <ThemeProvider theme={theme}>
| ^
8 | {children}
9 | </ThemeProvider>
10 | );
Add #babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add #babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
# ./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/ReactExample.js 77:0-45 118:60-67
# ./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/index.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Preview/Preview.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Preview/index.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Playground/Playground.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Playground/index.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Examples/Examples.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Examples/index.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Section/Section.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Section/index.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Sections/Sections.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/Sections/index.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/StyleGuide/StyleGuide.js
# ./node_modules/react-styleguidist/lib/client/rsg-components/StyleGuide/index.js
# ./node_modules/react-styleguidist/lib/client/utils/renderStyleguide.js
# ./node_modules/react-styleguidist/lib/client/index.js
# multi ./node_modules/#pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/react-styleguidist/lib/client/index ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/react-dev-utils/webpackHotDevClient.js
I can't modify my Babel config without ejecting from create-react-app, which I want to avoid.
What can I do?
I've been relying on this section of the documentation.
Related
I have a config file that exports some info for my app.
export const config: Config = {
isProd: process.env.NODE_ENV == 'production',
connection: {
port: parseInt(process.env.APP_PORT) || 2000,
},
};
And I want to import it and use inside my e2e jest test.
import {Test, TestingModule} from "#nestjs/testing";
import {INestApplication} from "#nestjs/common";
import * as request from "supertest";
import {AppModule} from "./../src/app.module";
import * as dotenv from "dotenv";
dotenv.config({path: ".env"});
import {config} from "../src/infrastructure/config/config"
console.log(process.env); // available here
console.log(config); // will return default values, not from .env
// ...
How can i make jest use env inside imported module?
Nestjs has great configuration modules that support .env:
https://docs.nestjs.com/techniques/configuration#custom-env-file-path
Makes it really easy to ref your configuration in all of your services as opposed to having to import.
There is such a file. That imports from API and exports at once.
export { extractValue, parse, parseCommand } from './parser'
export { Manager, EVENTS } from './manager'
export { runCLI, runCommand, bootstrapCommandManager } from './cli'
I receive an error:
export { extractValue, parse, parseCommand } from './parser'
^^^^^^
SyntaxError: Unexpected token 'export'
There is my babel.config.js
module.exports = {
presets: [['#babel/preset-env', {targets: {node: 'current'}}]],
plugins: [
['#babel/plugin-transform-modules-commonjs'],
['#babel/plugin-proposal-decorators', {'legacy': true}],
['#babel/plugin-proposal-class-properties'],
['#babel/plugin-proposal-export-default-from']
]
};
#babel/plugin-proposal-export-default-from does not help.
It did not compile files from node_modules directory. An ignore rule had to be set.
It works
Variant A babel-node
npx babel-node --ignore="/node_modules\/(?\!console-command-manager)/" --config-file ./babel.config.js ./src/index.js
I fault to move --ignore argument into ./babel.config.js
Variant B
Node executtion with -r runner.js
Execution
node -r ./runner.js src/index.js
Runner
const config = require('./babel.config.js')
console.log(config)
require("#babel/register")({
extensions: ['.js'],
ignore: [
/node_modules[\\/](?!console-command-manager)/
],
...config
});
I just discovered RollUP and I am stuck with an issue where Babel does not run for imports from node_modules.
Here is an example:
My Javascript Code
import { _map } from "#varunsridharan/js-vars"
const myarray = _map.call([1,2,3,4],(x)=> x * 2);
console.log(myarray);
Rollup Config
import { babel } from '#rollup/plugin-babel';
import { nodeResolve } from '#rollup/plugin-node-resolve';
import { uglify } from 'rollup-plugin-uglify';
import filesize from 'rollup-plugin-filesize';
import visualizer from 'rollup-plugin-visualizer';
export default {
input: './src/index.js',
output: {
file: './dist/myfile.min.js',
format: 'iife',
plugins: [
uglify( { mangle: true } ),
]
},
plugins: [
nodeResolve(),
babel(),
filesize(),
visualizer()
]
};
When I run rollup -c in CLI I get this output:
babelHelpers: 'bundled' option was used by default. It is recommended to configure this option explicitly, read more here: https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers
198 | * Array Related Vars.
199 | */
> 200 | const Arr = Array;
| ^ Unexpected token: keyword «const»
201 | const _Arrayprop = Arr.prototype;
202 | const _filter = _Arrayprop.filter;
203 | const _push = _Arrayprop.push;
[!] (plugin uglify) Error: Unexpected token: keyword «const»
SyntaxError: Unexpected token: keyword «const»
at JS_Parse_Error.get (eval at <anonymous> (E:\localhost\www\javascript\dizzle\node_modules\uglify-js\tools\node.js:18:1), <anonymous>:69:23)
at reportError (E:\localhost\www\javascript\dizzle\node_modules\jest-worker\build\workers\processChild.js:107:11)
at reportClientError (E:\localhost\www\javascript\dizzle\node_modules\jest-worker\build\workers\processChild.js:87:10)
at execFunction (E:\localhost\www\javascript\dizzle\node_modules\jest-worker\build\workers\processChild.js:157:5)
at execHelper (E:\localhost\www\javascript\dizzle\node_modules\jest-worker\build\workers\processChild.js:139:5)
at execMethod (E:\localhost\www\javascript\dizzle\node_modules\jest-worker\build\workers\processChild.js:143:5)
at process.<anonymous> (E:\localhost\www\javascript\dizzle\node_modules\jest-worker\build\workers\processChild.js:64:7)
at process.emit (events.js:315:20)
at emit (internal/child_process.js:876:12)
at processTicksAndRejections (internal/process/task_queues.js:85:21)
Based on the output i was able to understand that babel did not run for the imported modules. so i checking the options provided for rollup babel plugin # (https://github.com/rollup/plugins/tree/master/packages/babel) and found that it has include AND exclude options and i tried with the below config
babel( {
include: [ "node_modules/#varunsridharan/*/**", "./src/**" ],
exclude: "node_modules/**",
} ),
Still, nothing happened so I tried without ./src/** in babel include config and found that babel is not running in my main javascript file which imports the node_modules's file
Node Module Project Link: https://github.com/varunsridharan/js-vars
So I'm experimenting with Roots Static Site generator and I'm having a hell of a time getting it to import Bourbon-neat through the app.coffee file.
My app.coffee looks like this:
js_pipeline = require 'js-pipeline'
css_pipeline = require 'css-pipeline'
browserify = require 'roots-browserify'
sass = require 'node-sass'
module.exports =
ignores: ['readme.md', '**/layout.*', '**/_*', '.gitignore', 'ship.*conf']
extensions: [
browserify(files: 'assets/js/main.coffee', out: 'js/build.js')
js_pipeline(files: 'assets/js/*.coffee'),
css_pipeline(files: 'assets/css/*.scss')
]
'coffee-script':
sourcemap: true
jade:
pretty: true
sass:
// includePaths: require('bourbon-neat').includePaths
// includePaths: [require('bourbon-neat').includePaths]
includePaths: ['node_modules/bourbon-neat/app/assets/stylesheets/']
The commented includePaths are other things I've tried. I've read the bourbon-neat docs that mentioned needing to pass require('bourbone-neat').includePaths but it doesn't seem to work.
The error I get when attempting to #import "neat" in my .scss file is:
Error: File to import not found or unreadable: neat.
Note: There doesn't seem to be a tag for root.
For anyone else looking, I was able to get this working. Here's my app.coffee:
js_pipeline = require 'js-pipeline'
css_pipeline = require 'css-pipeline'
browserify = require 'roots-browserify'
module.exports =
debug:true
ignores: ['readme.md', '**/layout.*', '**/_*', '.gitignore', 'ship.*conf']
extensions: [
browserify(files: 'assets/js/main.coffee', out: 'js/build.js')
js_pipeline(files: 'assets/js/*.coffee')
css_pipeline(files: 'assets/css/*.scss')
]
'coffee-script':
sourcemap: true
jade:
pretty: true
scss:
includePaths: require('bourbon-neat').includePaths
So I'm trying to use Compass and Asset Pack in a Sinatra app. My setup is the following:
require 'sinatra'
require 'bundler'
require 'sinatra/assetpack'
require 'sinatra/support'
require 'compass'
class Application < Sinatra::Base
register Sinatra::AssetPack
register Sinatra::CompassSupport
register Sinatra::SimpleNavigation
set :static, true
set :root, File.dirname(__FILE__)
set :public_folder, File.dirname(__FILE__) + '/public'
set :scss, Compass.sass_engine_options
set :scss, { :load_paths => [ "#{Application.root}/assets/css" ] }
Compass.configuration do |config|
config.sass_dir = "assets/css"
config.project_path = root
config.images_dir = "assets/images"
config.http_generated_images_path = "/images"
config.fonts_dir = "assets/fonts"
end
assets {
serve '/fonts', from: 'assets/fonts'
serve '/js', from: 'assets/js' # Default
serve '/css', from: 'assets/css' # Default
serve '/images', from: 'assets/images' # Default
# The second parameter defines where the compressed version will be served.
# (Note: that parameter is optional, AssetPack will figure it out.)
js :app, '/js/app.js', [
'/js/*',
]
css :application, '/css/application.css', [
'/css/style.css'
]
js_compression :jsmin # :jsmin | :yui | :closure | :uglify
css_compression :sass # :simple | :sass | :yui | :sqwish
}
# Routes and things here
end
With the line set :scss, Compass.sass_engine_options it seems to enable Compass, but this over rides the next line and I then can't use SCSS partials because it doesn't know the load path. Having them on the same line has the same effect.
TL:DR: I can't get Compass and SCSS Partials to work together with the Asset Pack
Try merging the :scss options? It looks like you're overriding with your second set call:
set :scss, Compass.sass_engine_options.merge({ :load_paths => [ "#{Application.root}/assets/css" ] })
Also, the Compass configuration and set calls should be inside a configure block.