I have this code:
"use strict";
import browserSync from "browser-sync";
import httpProxy from "http-proxy";
let proxy = httpProxy.createProxyServer({});
and I have installed babel-core and babel-cli globally via npm. The point is when I try to compile with this on my terminal:
babel proxy.js --out-file proxified.js
The output file gets copied instead of compiled (I mean, it's the same as the source file).
What am I missing here?
Babel is a transformation framework. Pre-6.x, it enabled certain transformations by default, but with the increased usage of Node versions which natively support many ES6 features, it has become much more important that things be configurable. By default, Babel 6.x does not perform any transformations. You need to tell it what transformations to run:
npm install babel-preset-env
and run
babel --presets env proxy.js --out-file proxified.js
or create a .babelrc file containing
{
"presets": [
"env"
]
}
and run it just like you were before.
env in this case is a preset which basically says to compile all standard ES* behavior to ES5. If you are using Node versions that support some ES6, you may want to consider doing
{
"presets": [
["env", { "targets": { "node": "true" } }],
]
}
to tell the preset to only process things that are not supported by your Node version. You can also include browser versions in your targets if you need browser support.
Most of these answers are obsolete. #babel/preset-env and "#babel/preset-react are what you need (as of July 2019).
I had the same problem with a different cause:
The code I was trying to load was not under the package directory, and Babel does not default to transpiling outside the package directory.
I solved it by moving the imported code, but perhaps I could have also used some inclusion statement in the Babel configuration.
First ensure you have the following node modules:
npm i -D webpack babel-core babel-preset-es2015 babel-preset-stage-2 babel-loader
Next, add this to your Webpack config file (webpack.config.js) :
// webpack.config.js
...
module : {
loaders : [
{
test : /\.js$/,
loader : 'babel',
exclude : /node_modules/,
options : {
presets : [ 'es2015', 'stage-2' ] // stage-2 if required
}
}
]
}
...
References:
https://gist.github.com/Couto/6c6164c24ae031bff935
https://github.com/babel/babel-loader/issues/214
Good Luck!
As of 2020, Jan:
STEP 1: Install the Babel presets:
yarn add -D #babel/preset-env #babel/preset-react
STEP 2: Create a file: babelrc.js and add the presets:
module.exports = {
// ...
presets: ["#babel/preset-env", "#babel/preset-react"],
// ...
}
STEP 3:- Install the babel-loader:
yarn add -D babel-loader
STEP 4:- Add the loader config in your webpack.config.js:
{
//...
module: [
rules: [
test: /\.(js|mjs|jsx|ts|tsx)$/,
loader: require.resolve('babel-loader')
]
]
//...
}
Good Luck...
npm install --save-dev babel-preset-node5
npm install --save-dev babel-preset-react
...and then creating a .babelrc with the presets:
{
"presets": [
"node5",
"react"
]
}
...resolved a very similar issue for me, with babel 3.8.6, and node v5.10.1
https://www.npmjs.com/package/babel-preset-node5
https://www.npmjs.com/package/babel-preset-react
Same error, different cause:
Transpiling had worked before and then suddenly stopped working, with files simply being copied as is.
Turns out I opened the .babelrc at some point and Windows decided to append .txt to the filename. Now that .babelrc.txt wasn't recognized by babel. Removing the .txt suffix fixed that.
fix your .babelrc
{
"presets": [
"react",
"ES2015"
]
}
In year 2018:
Install following packages if you haven't yet:
npm install babel-loader babel-preset-react
webpack.config.js
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015','react'] // <--- !`react` must be part of presets!
}
}
],
}
Ultimate solution
I wasted 3 days on this
import react from 'react' unexpected identifier
I tried modifying webpack.config.js and package.json files, and adding .babelrc, installing & updating packages via npm, I've visited many, many pages but nothing has worked.
What worked? Two words: npm start. That's right.
run the
npm start
command in the terminal to launch a local server
...
(mind that it might not work straight away but perhaps only after you do some work on npm because before trying this out I had deleted all the changes in those files and it worked, so after you're really done, treat it as your last resort)
I found that info on this neat page. It's in Polish but feel free to use Google translate on it.
Related
I want the classes in my React.js application to be available for export from .styl-files in the same way as it can be done from CSS Modules, but I can't find any ready-made solution to this problem.
I found a guide to setting up CSS Modules in an application created with Create React App.
I understand that you need to run npm run eject and somehow rewrite configuration files,
but how – I don't understand.
You need to install next npm-packages in your project:
stylus
stylus-loader
css-loader
In webpack.config, in section module you need to add next points:
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader?modules&camelCase&localIdentName=[path]__[name]__[local]--[hash:base64:5]',
'stylus-loader',
],
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
Then you can import your styles from .styl files in your React components like this:
import style from './СomponentStyle.styl';
and you can use style by CSS name for example:
className={style.container}
where container - it is name of CSS but without dot. For complicated names like: .container-btn-green you need write next code: style.containerBtnGreen or style['container-btn-green']
Run-time solution ( without eject )
install react-rewired and customize-cra to have an option to update config on run-time
npm i react-app-rewired
npm i customize-cra
create file config-overrides.js in the package.json folder with content :
const {
override,
addWebpackModuleRule
} = require("customize-cra");
module.exports = override(
addWebpackModuleRule({
test: /\.styl$/,
exclude: /(node_modules)/,
loaders: [
'style-loader',
{
loader: 'css-loader',
options: {url: false}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [require('autoprefixer')()]
}
},
'stylus-loader'
]
}),
addWebpackModuleRule({
test: /\.css$/,
use: [
'style-loader',
'css-loader',
]
})
);
install stylus
npm i stylus
npm i stylus-loader
npm i css-loader
change your start / build scripts to use react-rewired
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
...
Then you can import your styles from .styl files in your React components
require('./style/index.styl');
OR
import style from './СomponentStyle.styl'; --> className={style.container}
This all :) Additional thanks to Denis Bubnov in current topic - you helped me much to implement current solution!
Here is the link to configure stylus with create react app
https://github.com/flexzuu/create-react-app-styl
I like Surya's approach.
install stylus with
npm install stylus --save-dev
Create 2 folders /src/styl and /src/css
Drop some files into /src/styl.
Add the following scripts to your package.json:
"stylus:watch": "stylus -I ./node_modules -w ./src/styl -o ./src/css",
"stylus": "stylus -I ./node_modules ./src/styl -o ./src/css"
Run npm run stylus:watch in a second terminal. It will watch all files in /src/styl and compile them to css in /src/css where they will be picked up by your React dev server.
Before building your react app, make sure to run npm run stylus one last time.
Possible solution
Install stylus globally (just like it is described on their official website)
npm install stylus -g
Modify your build script in package.json
Mac/Ubuntu:
"scripts": {
"build:stylus": "find . -name *.styl -exec stylus {} --out ./build/static/css ;",
"build": "react-scripts build && npm run build:stylus",
}
Windows:
"scripts": {
"build:stylus": "for /r %v in (*.styl) do stylus %v --out ./build/static/css",
"build": "react-scripts build && npm run build:stylus",
}
In the scripts above we are calling the stylus command described below:
stylus <path-to-input-file.styl> --out <path-to-output-file\>
For Babel there is a .babelrc file, which contains all parameters needed for Babel to work, so you can just use babel index.js and this is working like specified in .babelrc, for example:
// .babelrc file
{
"presets": ["react"]
}
smroot#whatever: ~/project $ babel index.js
works the same way as:
smroot#whatever: ~/project $ babel index.js --presets react
Is there something similar to this for Browserify, so:
smroot#whatever: ~/project $ browserify index.js -o bundle/index.js -t [ babelify --presets [ react ] ]
could be replaced with just:
smroot#whatever: ~/project $ browserify index.js
and a config file for this?
#the_cheff 's solution is great, and It's also possible to define the parameters you need directly from package.json file without creating and npm script.
what you need is a new key "browserify" this way
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"#babel/preset-env"
]
}
]
]
}
and through the CLI just run:
browserify script.js > build/bundle.js
As #azium suggests in the comment you could create a npm script to handle this.
Open you package.json file and find (or create) the scripts section.
Then insert the command here with some name you would like.
"scripts": {
"browserify": "browserify index.js -o bundle/index.js -t [ babelify --presets [ react ] ]"
}
You can now run it with npm run browserify
Otherwise you could use a task runner like gulp to handle this. In general if you have multiple tasks like running bable, browserify, sass, less, or need to move files around, an actual task runner might come in handy.
I am stuck with babili.
I need to transpile, then minify the javascript that is written in ES6. So I installed the package using:
npm install babili --save-dev
and made .babelrc file containing a preset:
{"presets": ["es2015"]}
Now I tried the following command
./node_modules/.bin/babili public/js/rt.socket.js --out-file public/test.min.js
It does give a minified but doesn't transpile. What could be the reason for this?
`
Babili does not use .babelrc. Per the README:
Note that, because the babili command uses the default preset with no-babelrc, you cannot set any non-default options in the preset's plugins with this command. To do this, you can use the babel command with the options set in a .babelrc. See the preset docs for more information on how to do this.
The solution is to instead use Babel with the babel-preset-babili preset, as described in the Babel preset section of the README (which assumes that you've already installed Babel):
Install
npm install babel-preset-babili --save-dev
Usage
You'll most likely want to use it only in the production environment.
Check out the env
docs for more help.
Options specific to a certain environment are merged into and overwrite non-env specific options.
.babelrc:
{
"presets": ["es2015"],
"env": {
"production": {
"presets": ["babili"]
}
}
}
Then you'll need to set the env variable which could be something like
BABEL_ENV=production npm run build
I have an npm package with this structure:
--src
--styles
-image.png
-style.scss
The style.scss file is referencing the image like this:
.test {
background-image: url(./image.png);
}
The problem is when I consume the package, CSS is looking the image from the root and not relative to my package, how we can solve this issue?
This is how I'm importing the package:
#import "mypackage/src/styles/style";
I have this issue too and I do not find a elegant way to this issue. Finally I copied the referenced files to the build directory to solve this issue. The "copy-webpack-plugn" plugin was used(https://github.com/kevlened/copy-webpack-plugin)
You may refer to the following issue too(
Include assets from webpack bundled npm package)
All you need just install file loader like this.
npm install file-loader --save-dev
and then add this line to module part in your config :
module: {
rules: [{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}]
}
I have had this issue recently and the information on StackOverflow was outdated (as expected, this is a question that relates to NPM & Web Development and everything moves fast in this space).
Fundamentally, this problem is solved entirely by Webpack 5 as it comes out of the box. Only the webpack.config.js file needs to be updated.
The part of webpack's documentation that relates to this is here: https://webpack.js.org/guides/asset-modules/
What you want to do is Base64 encode your static assets and inline them to your CSS/JavaScript.
Essentially, when you are packing up your source code to distribute it on NPM, and you have some CSS file which refers to static images as such: background-image: url(./image.png) what you need to do is inline your assets to your style file, and then process your style file with the style-loader and css-loader packages.
In short, making my webpack.config.js contain the lines below solved my issue and allowed me to export one single index.js file with my package, which I imported into my other projects.
What really matters here is the type: asset/inline line, when we are testing for images.
webpack.config.js
...
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpg|gif)$/i,
type: "asset/inline",
},
],
},
...
...
I'm new to webpack, and I'm playing around with trying to create my own build from forking another decent build.
One of things that wasn't compiling was the css, so I did the following:
Make sure there were no css loaders currently in the webpack config file (there weren't)
Run npm install css-loader --save-dev
Add loaders
Add import css from './static/css/style.css'; to my entry .js file
Make some arbitrary changes to my css to test
Just for the sake of clarity, my loaders looked like this:
loaders: [
{ ...babel loader... },
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.png$/, loader: "url-loader?limit=100000" },
{ test: /\.jpg$/, loader: "file-loader" }
]
I then ran npm run build, and it was here that my terminal came up with the following error:
ERROR in ./src/app-client.js
Module not found: Error: Cannot resolve module 'style-loader' in /path/to/app/.../src
# ./src/app-client.js 15:13-46
I'm not really sure where I'm going wrong here, any help or pointers would be appreciated.
You probably forgot to install style-loader. So just run:
npm install style-loader --save-dev