I have this line in a .jsx file in my react project:
import React, {Component} from 'react';
However, this is not compiled correctly into a .js file:
Parse Error: Line 1: Illegal import declaration
I looked here import syntax not working with webpack and here http://babeljs.io/docs/setup/#webpack.
So I added this to my .babelrc:
{
"presets": ["es2015"]
}
Also, I added this to my webpack.config.js:
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
However, the error does not go away.
It seems to me that I am using babel and webpack correctly but I don't have much experience with them so I'm not sure what I could be missing.
Related
I need help in connecting the style loader scss-loader
i try include sass-loader in webpack.config.js for
vue-component:
#import '#/styles/mixin.scss';
webpack.config.js:
....
{
test: /\.scss$/,
exclude: /(node_modules)/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
....
but have all times error
Error: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
File to import not found or unreadable: src/styles/mixin.scss.
Any ideas how to cure this?
in vue component imports module have path 'src/name.scss' change it and loader works
I am having an issue adding webpack to an existing React project. Previously, the project was rendered server-side with next.js. However, there seems to be something wrong with my webpack config. Whenever I try to build my project, it fails with seemingly valid ES6 code:
ERROR in ./src/components/shared/menu/component.js
Module build failed: SyntaxError: Unexpected token (8:12)
6 |
7 | export default class Menu extends PureComponent {
> 8 | propTypes = {
| ^
9 | items: PropTypes.arrayOf(PropTypes.shape({
10 | name: PropTypes.string.isRequired,
11 | action: PropTypes.func.isRequired,
My webpack.config.js
const path = require('path');
module.exports = {
entry: './src/pages/index/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}
]
},
devServer: {
contentBase: path.resolve(__dirname, "dist")
}
};
My .babelrc
{ "presets": ["es2015", "react"] }
I've already tried search on SO and google, but cannot find anyone else experiencing the same issue. Please advise! Thanks!
1) run: npm install --save-dev babel-plugin-transform-class-properties
2) Update your .babelrc file:
{ "presets": ["es2015", "react"], "plugins": ["transform-class-properties"] }
That way, babel will also transform class properties as specified in the README: https://www.npmjs.com/package/babel-plugin-transform-class-properties
Also, make sure to use the keyword static when you define propTypes inside a class (so that it will be declared on the class itself, not on its prototype)
Use babel polyfill plugin, and have it included in webpack before your entry points, that means have entry point as array and first elemen is 'babel-polyfill' and second element is your index.js
You could also have require or import babel-polyfill as the first line index.js but only needed to have it once either in webpack or index file.
I'm trying to build my ES7 source code into a single file and have it transpiled down to ES5 but when I run webpack I still notice code like this in the built bundle
t.exports=class extends n(0).Component{title(){return this.constructor.name}}}
The export of the class means that something is not quite working, this is my relevant webpack config
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
},
What am I doing wrong?
In order to save someone else the precious few hours I wasted - I was including libraries that contained ES5+ code from node_modules and as obvious as it is the config is ignoring node_modues, so I just had to remove that line.
I am using webpack2, babel-loader
import something from '../../customPackageOutsideProjectDirectory';
the above line of code gives the following error:
Module build failed: Error: Parse Error: Line 1: Illegal import declaration
at throwError (/Users/sahilsharma/workspace/projectTry/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2823:21)
The error is probably because of lack of .babelrc file outside the project directory.
How to get this package loaded correctly from outside ?
The .babelrc file isn't necessary if you config Babel in webpack using the options:
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
https://github.com/babel/babel-loader
I'm playing with React (#13.3) with babel and webpack.
I have a component that's defined like this:
import BaseComponent from './BaseComponent';
export default class SomeComponent extends BaseComponent {
render() {
return (
<div>
<img src="http://placekitten.com/g/900/600"/>
</div>
);
}
}
But I get the following error:
Uncaught ReferenceError: React is not defined
I understand the error: the JSX bit is compiled into React.createElement(...) but React isn't in the current scope since it's not imported.
My questions is:
What's the clean way to work around this issue? Do I have to somehow expose React globally with webpack?
Solution used:
I followed #salehen-rahman suggestion.
In my webpack.config.js:
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'react-hot!babel?plugins[]=react-require'
}, {
test: /\.css$/,
loader: 'style!css!autoprefixer?browsers=last 2 versions'
}]
},
I also needed to fix my tests, so I added this to the file helper.js:
require('babel-core/register')({
ignore: /node_modules/,
plugins: ['react-require'],
extensions: ['.js']
});
My tests are then launched with the following command:
mocha --require ./test/helper.js 'test/**/*.js'
My questions is : What's the clean way to work around this issue ? Do I have to somehow expose React globally with webpack ?
Add babel-plugin-react-require to your project, and then amend your webpack's Babel config to have settings akin to:
loaders: [
{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
stage: 0,
optional: ['runtime'],
plugins: [
'react-require' // <-- THIS IS YOUR AMENDMENT
]
},
}
]
Now, once you've applied the configuration update, you can initialize React components without manually importing React.
React.render(
<div>Yippee! No <code>import React</code>!</div>,
document.body // <-- Only for demonstration! Do not use document.body!
);
Bear in mind though, babel-plugin-react-require transforms your code to automatically include React imports only in the presence of JSX tag in a specific file, for a specific file. For every other file that don't use JSX, but needs React for whatever reason, you will have to manually import React.
If you have react in your node modules directory you can add import React from 'react'; at the top of your file.
You can use Webpack's ProvidePlugin. To use, update the plugins section in your Webpack config to include the following:
plugins: [
new webpack.ProvidePlugin({
'React': 'react'
})
]
This, however, doesn't solve it for the tests..