Related
after trying several days without success I am writing this post.
I want to add server side rendering (SSR) to my application. I followed this tutorial until the point I have to call npm run build. I always get the following error:
node:internal/modules/cjs/loader:1126
throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /<PATH_HERE>/node_modules/#babel/runtime/helpers/esm/extends.js
require() of ES modules is not supported.
require() of /<PATH_HERE>/node_modules/#babel/runtime/helpers/esm/extends.js from /<PATH_HERE>/dist/main.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename extends.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /<PATH_HERE>/node_modules/#babel/runtime/helpers/esm/package.json.
I think it's something with the webpack.config.js:
const nodeExternals = require("webpack-node-externals");
//import nodeExternals from "webpack-node-externals"
const common = {
devtool: "cheap-module-source-map",
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader", // asks bundler to use babel loader to transpile es2015 code
options: {
presets: ["#babel/preset-env", "#babel/preset-react"],
},
},
exclude: [/node_modules/, /public/],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf)(\?[a-z0-9=.]+)?$/,
use: "url-loader?limit=100000",
},
{
test: /\.svg$/,
use: ["#svgr/webpack"],
},
],
},
};
const clientConfig = {
...common,
entry: "./client/src/index",
output: {
path: `${__dirname}/public`,
},
};
const serverConfig = {
...common,
target: "node",
externals: [nodeExternals()],
entry: "./server.js",
output: {
path: `${__dirname}/dist`,
},
};
module.exports = [clientConfig, serverConfig];
My package.json file:
{
"name": "Website Name",
"version": "1.0.0",
"description": "My Website",
"main": "dist/main.js",
"module": "dist/main.js",
"scripts": {
"client-install": "npm install --prefix client",
"start": "NODE_ENV=production node dist/main.js",
"build": "rm -rf dist public && webpack --mode production --progress",
"server": "nodemon server.js",
"heroku-postbuild": "npm install --prefix client && npm run build",
"dev": "rm -rf dist public && webpack --mode development --progress"
},
"author": "It's me",
"license": "MIT",
"dependencies": {
"#babel/runtime": "^7.14.0",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#material-ui/styles": "^4.11.4",
"#svgr/webpack": "^5.5.0",
"bcrypt": "^5.0.0",
"cjs-loader": "^0.1.0",
"compression": "^1.7.4",
"concurrently": "^5.3.0",
"cors": "^2.8.5",
"css-loader": "^5.2.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"file-loader": "^6.2.0",
"humps": "^2.0.1",
"ignore-styles": "^5.0.1",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21",
"mongoose": "^5.11.8",
"normalizr": "^3.6.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hot-loader": "^4.13.0",
"react-router": "^6.0.0-beta.0",
"redux": "^4.1.0",
"redux-logger": "^3.0.6",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1"
},
"devDependencies": {
"#babel/core": "^7.14.3",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-transform-runtime": "^7.14.3",
"#babel/preset-env": "^7.14.4",
"#babel/preset-react": "^7.13.13",
"babel-loader": "^8.2.2",
"babel-plugin-import": "^1.13.3",
"babel-plugin-transform-assets": "^1.0.2",
"html-webpack-plugin": "^5.3.1",
"nodemon": "^2.0.4",
"npm-run-all": "^4.1.5",
"react-jss": "^10.6.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3",
"webpack-node-externals": "^3.0.0"
}
}
If you need any further information just let me know I will answer as soon as possible. I am really frustrated about the issue :(
I faced a similar problem. The only way out was to add #babel/runtime to the allowlist webpack-node-externals. More details: https://www.npmjs.com/package/webpack-node-externals.
I found the problem for me... It was my fault. I had two directories (./ and ./client). I started developing the frontend with npm in ./client and then went to the server and moved all npm packages to ./ but forgot to delete the #node_modules folder in ./client. Deleting it solved the problem for me
I am trying to make Babel + Webpack transpile my files for IE11 and Safari 10. No matter what I do I cannot make it work.
I have tried uninstalling and reinstalling webpack and babel. I have tried changing just about anything within webpack.config.js and .babelrc. I have tried making a babel.config.js and webpack.config.babel.js.
I tried running
npx babel node_modules/vuetify --plugins=#babel/plugin-transform-spread,#babel/plugin-transform-parameters --presets=#babel/preset-env --no-babelrc
and outputted with spread operators still inside.
I tried compiling with webpack and spread operators are still present.
package.json
{
"name": "aspnetcore-vuejs-typescript-template",
"version": "0.1.0",
"main": "app.js",
"license": "MIT",
"author": "Danijel Hrcek",
"scripts": {
"dev": "./node_modules/.bin/webpack-cli --mode development --watch --progress --config webpack.config.js",
"build:dev": "./node_modules/.bin/webpack-cli --mode development --config webpack.config.js",
"build:prod": "./node_modules/.bin/webpack-cli --mode production --config webpack.config.js",
"publish": "npm install && ./node_modules/.bin/webpack-cli --mode production --config webpack.config.js && dotnet publish --configuration Release",
"test": "jest"
},
"dependencies": {
"acorn": "^7.0.0",
"apexcharts": "^3.8.5",
"axios": "^0.19.0",
"bulma": "0.7.5",
"bulmaswatch": "0.7.2",
"classlist-polyfill": "^1.2.0",
"core-js": "^3.2.1",
"fibers": "^3.1.1",
"portal-vue": "^2.1.6",
"regenerator-runtime": "^0.13.3",
"vue": "2.6.10",
"vue-apexcharts": "^1.4.0",
"vue-flatpickr-component": "8.1.2",
"vue-multiselect": "2.1.6",
"vue-notification": "1.3.16",
"vue-router": "3.0.6",
"vue2-animate": "^2.1.1",
"vuetify": "^2.0.5",
"vuetify-loader": "^1.3.0",
"vuex": "3.1.1"
},
"devDependencies": {
"#babel/cli": "^7.5.5",
"#babel/core": "^7.5.5",
"#babel/plugin-proposal-object-rest-spread": "^7.5.5",
"#babel/plugin-transform-spread": "^7.2.2",
"#babel/preset-env": "^7.5.5",
"#babel/register": "^7.5.5",
"#mdi/font": "^3.9.97",
"#types/jquery": "3.3.29",
"#types/node": "12.0.2",
"#vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"#vue/babel-preset-jsx": "^1.1.0",
"#vue/test-utils": "1.0.0-beta.29",
"aspnet-webpack": "3.0.0",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "2.0.2",
"compression-webpack-plugin": "2.0.0",
"css-loader": "2.1.0",
"deepmerge": "^4.0.0",
"es6-promise-promise": "1.0.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "3.0.1",
"html-webpack-plugin": "3.2.0",
"jest": "24.8.0",
"jest-serializer-vue": "2.0.2",
"node-sass": "4.12.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"resolve-url-loader": "3.1.0",
"sass": "^1.22.9",
"sass-loader": "^7.1.0",
"style-loader": "0.23.1",
"ts-loader": "^6.0.1",
"typescript": "^3.4.5",
"url-loader": "1.1.2",
"vue-class-component": "7.1.0",
"vue-jest": "3.0.4",
"vue-loader": "15.7.0",
"vue-property-decorator": "8.1.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "2.6.10",
"webpack": "^4.39.3",
"webpack-cli": "3.3.2",
"webpack-dev-server": "3.4.1",
"webpack-hot-middleware": "2.25.0"
}
"browserslist": [
"defaults", "safari 10", "not ie <= 10"
]
}
.babelrc
{
"presets": [ "#babel/preset-env" ],
"plugins": [ "#babel/plugin-proposal-object-rest-spread", "#babel/plugin-transform-spread", "#vue/babel-preset-jsx", "#babel/plugin-transform-parameters" ]
}
Within webpack.config.js
{
test: /\.m?js$/,
exclude: /node_modules\/(?!(vuetify|vuetify-loader|vue)\/).*/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ["#babel/plugin-proposal-object-rest-spread", "#babel/plugin-transform-spread"]
}
}
},
{
test: /\.jsx?$/,
include: [
'/node_modules/vuetify/src'
],
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ["#babel/plugin-proposal-object-rest-spread", "#babel/plugin-transform-spread", "#vue/babel-preset-jsx", "#babel/plugin-transform-parameters"]
}
}
},
Expected output:
function mixins() {
//emulates spread operator
}
Actual output:
function mixins(...args) {}
FWIW I think this has been fixed since the question was asked. Create a folder with files as below:
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"author": "RichN",
"license": "MIT",
"devDependencies": {
"#babel/core": "^7.13.15",
"#babel/preset-env": "^7.13.15",
"babel-loader": "^8.2.2",
"webpack": "^5.32.0",
"webpack-cli": "^4.6.0"
}
}
webpack.config.js
module.exports = {
devtool: "source-map",
mode: "development",
target: ["web", "es5"],
entry: "./app.js",
output: {
filename: "bundle.js",
path: __dirname
},
resolve: {
extensions: [".js", ".jsx"]
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: {
presets: [
["#babel/preset-env", {
"targets": "defaults"
}]
],
plugins: [
"#babel/plugin-proposal-object-rest-spread"
]
}
}]
}
]
}
}
app.js
function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
console.log(sum(1, 2, 3));
index.html
<!DOCTYPE html>
<body>
<script src="bundle.js"></script>
</body>
Then issue commands npm i and npx webpack in that folder. The code gets transpiled to the code below in bundle.js:
function sum() {
for (var _len = arguments.length, theArgs = new Array(_len), _key = 0; _key < _len; _key++) {
theArgs[_key] = arguments[_key];
}
return theArgs.reduce(function (previous, current) {
return previous + current;
});
}
console.log(sum(1, 2, 3));
If you now load index.html as a file in Internet Explorer this code runs fine and outputs 6 in the console window
I am getting this error while trying to start the storybook with Webpack#4.17.2 and mini-css-extract-plugin. I am using mini-css-extract-plugin instead of extract-text-webpack-plugin since it is not supporting Webpack > 4.x.x
Any Ideas how to resolve this issue without downgrading to webpack < 4.x.x
Error:
ERROR in ./src/styles/styles.less
Module build failed: TypeError: Cannot read property 'thisCompilation' of undefined
at NodeTemplatePlugin.apply (C:\Users\sbr\Documents\Github\my-app\node_modules\webpack\lib\node\NodeTemplatePlugin.js:19:18)
at Object.pitch (C:\Users\sbr\Documents\Github\my-app\node_modules\mini-css-extract-plugin\dist\loader.js:79:51)
package json contents:
{
"name": "my-app",
"version": "1.0.0",
"description": "my app",
"main": "app.js",
"repository": "https://github.com",
"author": "sbr",
"license": "MIT",
"private": false,
"scripts": {
"start": "webpack-dev-server",
"build": "webpack -p",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"moment": "^2.22.2",
"react": "^16.4.2",
"react-dom": "^16.4.2"
},
"devDependencies": {
"#storybook/addon-actions": "^3.4.10",
"#storybook/addon-links": "^3.4.10",
"#storybook/addons": "^3.4.10",
"#storybook/react": "^3.4.10",
"babel-core": "^6.26.3",
"babel-loader": "7",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-runtime": "^6.26.0",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.2",
"path": "^0.12.7",
"style-loader": "^0.23.0",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
}
}
Storybook webpack.config contents:
const ExtractTextPlugin = require('mini-css-extract-plugin');
const extractTextPlugin = new ExtractTextPlugin('src/styles/styles.less');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader"
}, {
test: /\.jsx?$/,
exclude: /node_modules/,
use: "babel-loader"
},
{
test: /\.less$/,
use: [ExtractTextPlugin.loader, 'css-loader','less-loader']
}
]
}
};
I think the short answer was touched on by SamVK in the comments. As the Storybook issue states, there was work to be done to make storybook Webpack 4 compatible. There are some workarounds, but your mileage may vary.
Your best bet as of Dec 2018 is to make sure you're on the latest version of Webpack 4.x, Storybook 4.x and make sure you include the correct version of babel core and babel loader based on the other things you've included.
https://github.com/storybooks/storybook/issues/3044
https://github.com/storybooks/storybook/pull/3148
I have visited hundred webpages but couldn't find solution which fits me. I'm using webpack babel but have error "Unexpected token import" when i try to import express:
.babelrc:
{
"moduleId": "myModule",
"presets": ["es2015", "stage-0"],
"plugins": ["add-module-exports"]
}
webpack.config.js:
const path = require('path');
const webpack = require("webpack");
const ExtractTextPlugin=require("extract-text-webpack-plugin");
module.exports = {
context:__dirname + '/front',
entry:__dirname + '/front/index.js',
output:{
path:__dirname + '/public/assets',
filename:'bundle.js',
publicPath:'assets'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
plugins:[
new webpack.DefinePlugin({
TEST_ENV:process.env.NODE_ENV === "test"
}),
new ExtractTextPlugin("bundle.css",
{
publicPath: 'assets/core/css',
allChunks: true
})
],
module: {
loaders: [
{
test: /\.js/,
loader: "babel-loader",
exclude: /(node_modules|bower_components)/,
query: {
presets: ['es2015']}
},
{
test: /\.html/,
loader: "raw-loader"},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader?browsers=last 3 version")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader?browsers=last 3 version!sass-loader")
}
]
},
devServer: {
port: 7000,
},
devtool: 'source-map',
}
package.json:
{
"name": "SA-19KV",
"version": "1.0.0",
"description": "Project Boilerplate",
"scripts": {
"ngdev": "webpack-dev-server --content-base public/ --progress --colors ",
"nghot": "webpack-dev-server --content-base public/ --progress --colors --inline --hot",
"test": "set NODE_ENV=test && karma start",
"prod": "webpack -p",
"backdev": "nodemon server.js --watch back/"
},
"dependencies": {
"angular": "1.5.0",
"css-loader": "^0.26.1",
"express": "^4.14.1",
"style-loader": "^0.13.1"
},
"devDependencies": {
"angular-mocks": "^1.6.1",
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-0": "^6.5.0",
"chai": "^3.5.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "1.6.1",
"karma": "^1.4.1",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-html-detailed-reporter": "^1.1.15",
"karma-mocha": "^1.3.0",
"karma-webpack": "^2.0.2",
"mocha": "^3.2.0",
"node-sass": "^4.4.0",
"nodemon": "^1.11.0",
"raw-loader": "^0.5.1",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"webpack-dev-server": "1.14.1"
},
"author": "Me :-)",
"license": "ISC"
}
Your package.json scripts aren't loading your webpack's config. You can load it by adding the --config parameter:
webpack-dev-server --config ./webpack.config.js
I'm desperately trying to get my Webpack config file to transpile ES6 into ES5, but for some reason it doesn't seem to work. I'm still getting the 'const' variable, arrow functions and spread operators in my exported js code. I've attached my webpack config file and my package.json file - any help would be really appreciated.
Package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:dev": "cross-env NODE_ENV=development webpack --mode development",
"build:prod": "cross-env NODE_ENV=production webpack --mode production",
"start": "webpack-dev-server --port 9000 --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.7.7",
"#babel/plugin-transform-runtime": "^7.8.3",
"#babel/preset-env": "^7.7.7",
"#babel/runtime": "^7.8.4",
"autoprefixer": "^9.7.3",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^6.0.3",
"css-loader": "^3.4.0",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^6.0.0",
"imagemin-webpack-plugin": "^2.4.2",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"sass-loader": "^8.0.0",
"typescript": "^3.7.4",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#babel/polyfill": "^7.8.3",
"#glidejs/glide": "^3.4.1",
"aos": "^3.0.0-beta.6",
"axios": "^0.19.2",
"core-js": "2",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"query-string": "5.1.1",
"scrollbooster": "^2.1.0",
"simple-parallax-js": "^5.2.0",
"smooth-scrollbar": "^8.5.1",
"tippy.js": "^5.1.4"
}
}
Webpack config:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const data = require('../pageinfo.json');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: ['#babel/polyfill','./src/scripts/index.js'],
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [{
test: [/.css$|.scss$/],
use: [MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.(jpe?g|png|svg|gif)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/images'
}
}]
},
{
test: /\.m?js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: [["#babel/preset-env", { "useBuiltIns": "usage" }]],
plugins: [
["#babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/fonts'
}
}]
}
]
},
resolve: {
extensions: ['.js']
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css'
}),
new CopyWebpackPlugin([{
from: './src/assets/images',
to: 'assets/images'
}]),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'style.[chunkhash].css'
})
]
};
Go to your package.json file. The babel command takes two arguments: the path to your ES6 code and a path to where you want your ES5 code to go.
If you have all your JavaScript code housed in a directory, then you can add the -d flag to the command to tell Babel for look for directories instead of files. For my example, I have my JavaScript code in my src directory but want my ES5 code to be put in a build directory.
// package.json
...
"scripts": {
"build": "babel src -d build",
},
...
Then just run the Babel command
With your .babelrc file created and your build command ready, just run it in your command line.
npm run build