I have a project with React and Webpack as build system. My devDependencies
devDependencies
"webpack": "^4.5.0",
webpack.config.js
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
...
And I get this error:
ERROR in ./node_modules/project/components/InfiniteScroller.jsx
Module parse failed: Unexpected token (9:8) You may need an
appropriate loader to handle this file type.
What I am doing wrong?
It looks like you're including uncompiled code from node_modules, your loader specifically excludes compiling node_modules code (exclude: /node_modules/) for efficiency reasons. Usually modules expose a compiled version of the library (usually in /dist, usually pointed to by "main" property in the package.json of the module).
If you want to parse code in node_modules, I recommend you just do it for node_modules/project, rather than all modules for efficiency. Modify your exclude statement accordingly, something like: exclude: /node_modules(?!\/project)/
You'll also need to make sure you use the necessary presets to handle the files (e.g. babel-preset-env, babel-preset-react) and any plugins the file might need (e.g. transform-object-rest-spread etc).
Since I don't have enough points to comment, I'll post as an answer -
I see you're importing a .jsx module - You should try adding
query: {
presets: ['es2015','react']
}
to your rule after use
Related
Say I have following project structure (Well its more complex than below structure):
CommonComponents
CommonComponentA
CommonComponentB
package.json
webpack.config.js
.babelrc
ModuleA
ComponentC //import CommonComponentA
ComponentD
package.json
webpack.config.js
.babelrc
ModuleB
ComponentE //import CommonComponentB
ComponentF
package.json
webpack.config.js
.babelrc
I compile, bundle and utilize ModuleA and ModuleB separately. When I switched to babel 7, importing modules from CommonComponents directory stopped working. Babel ignores files which are outside current working directory and doesn't transpile them so webpack compilation fails complaining 'Unexpected token' at imported component.
From what I have understood so far, they have changed the way .babelrc lookup happens. I really can't wrap my head around the terms 'root', 'babelrcRoots', etc.
Can someone explain what I will need to do in order to compile ModuleA and ModuleB succesfully from their respective working directory ?
Based on the real structure of your project (it is a monorepo setup with a root folder?) and the webpack config you are using, you can have several ways to solve this, one way could be by adding the include key on you babel loader rule on webpack configuration files, you will end up with something like this:
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: path.resolve(__dirname, '../CommonComponents'),
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
}
as stated before, this depends on your real project structure, but you can give it a try and check it works.
I'm creating a javascript project. To create it I'm using gulp and babel.
My problem is that I can't develop my code over multiple file, so I'm search a solution to 'enable' importing. At the moment I'm trying to configure webpack.
The Gulp Task is this:
gulp.task('webpack', () => {
return webpack_stream(webpack_config)
.pipe(rename('webpack_code.js'))
.pipe(gulp.dest('.build/asset/webpack/'));
});
The webpack.config.js is this:
module.exports = {
entry: ['./src/asset/js/main.js'],
output: {
filename: 'bundle.js',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.(js)$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: [
['env', 'stage-0',{ modules: false }],
],
},
},
],
},
resolveLoader: {
modules: ['./node_modules'],
},
resolve: {
modules: ['./node_modules'],
},
target: 'node',
};
My current error is this:
Error in plugin 'webpack-stream'
Message:
multi ./src/asset/js/main.js
Module not found: Error: Can't resolve 'babel-loader' in ...
What's wrong?
Another Question: What's I have to put as value of entry key? Only the entry point js file or the whole files of the project?
Thanks!!
What's wrong?
I'd guess that in your project, your Webpack instance is not finding the babel loader because of your config / environment specific issues.
I've had the exact same issue as you. Here are some troubleshooting steps for to check first:
See if babel-loader is actually installed. I know it is simple, but it can save you time.
Check which Webpack/Babel versions you're dealling with in your package.json file. I'm using Webpack 4 and Babel 8. Sounds like some newer versions doesn't accept this: use: 'babel' in your webpack.config file. You need to ensure that the -loader is being used as it follows: use: 'babel-loader'.
Reinstall your node_modules folder. Sometimes it works.
Another Question:
What's I have to put as value of entry key?
Only the entry point js file or the whole files of the project?
Accordingly to Webpack's docs:
The entry object is where webpack looks to start building the bundle. The context is an absolute string to the directory that contains the entry files. - Webpack Ref
Considering that, you should pass to the entry object, the path of a folder or a file that will be used to generate your final JS file with all your modules in it.
If you have nested files, that you don't import as modules, I think you'll have to head to the docs and see this specific case.
But if this files are nested and are being imported as modules, in your entry file/folder, they will be generated in the output file.
I know it's not much but following these steps, helped me to solve it. :)
Description
I have a nodejs + TypeScript + express project and currently the source *.ts files are being bundled with webpack and node_modules is ignored with webpack-node-externals.
When I deploy bundle.js in Docker, I would need to still run npm i --production on the target image to install the dependencies, which installs all the modules listed in package.json
The Problem:
If I am using only one function from lodash which does not have native parts, the whole lodash module (4.8MB) is installed nonetheless (which is intended).
This results in a huge node_modules folder where functions inside packages aren't always necessarily used in bundle.js. This problem is especially prevalent when containerizing the application with Docker.
Is there any way to bundle non-native modules with Webpack while leaving native modules alone?
This is very similar to https://stackoverflow.com/a/54393299/2234013 - I believe you're looking for nodeExternals({ whitelist }) and babel-loader exclude:
// excerpt from https://stackoverflow.com/a/54393299/2234013
externals: [
nodeExternals({
whitelist: [/lodash/]
})
],
...
module: {
rules: [
{
...
exclude: /node_modules\/(?!(lodash).*/,
use: {
loader: 'babel-loader',
...
}
}
]
}
I'm using a Vue template project that uses ESLint. I'd like to turn it off, so I followed these instructions and made a file with
**/*.js
called .eslintignore inside of my project root. However, I'm still getting the same eslint error messages. What am I doing wrong?
If you're using the vscode-eslint plugin, the .eslintignore file may need to be placed at the root of the workspace folder, in order to be recognized by the vscode plugin.
For my configuration - I needed to add the "ignorePatterns" property in .eslintrc:
"ignorePatterns": "**/*.d.ts"
You should use **/* instead of **/*.js as the first will ignore both .js and .vue files.
Alternatively you can comment this whole block in your build/webpack.base.conf.js
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: "pre",
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
}
I love ESLint but sometimes you want it to completely ignore a whole file. Add this to the top of your file:
/* eslint-disable */
It needs to be in /* this kind */ of comment, not // this kind.
And ESLint won't complain about your file any more!
In using webpack to build my project, I typically require modules in CommonJS from npm modules. I need moment-timezone in my project, however in building the package you must also build all the data from moment-timezone, which can be quite a lot.
Additionally the build is failing with the following error:
ERROR in ./~/moment-timezone/data/packed/latest.json
Module parse failed: /site/node_modules/moment-timezone/data/packed/latest.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "version": "2015a",
| "zones": [
| "Africa/Abidjan|LMT GMT|g.8 0|01|-2ldXH.Q",
# ./~/moment-timezone/index.js 4:15-51
At this point I am not as concerned with the build failing, as I am about the size of the build if it actually succeeds. Though, obviously the failing build will need to be addressed too at some point.
I would appreciate any pointers on how to handle this, especially if any of you have encountered this same issue using webpack (or browserify too, probably).
You can fix this by adding the JSON loader to your webpack configuration.
$npm install json-loader
And add it to your loaders in webpack.config.js. Don't forget to add the extension as well.
{
module: {
loaders: [
{include: /\.json$/, loaders: ["json-loader"]}
]
},
resolve: {
extensions: ['', '.json', '.jsx', '.js']
}
}
If you're using webpack 2.x (currently in beta)
npm install json-loader
then include this in your rules
{
test: /\.json$/,
loader: "json-loader"
}