I have to host a js file on a server to be imported into any html page.
We have written some react components for the same purpose.
When we import the un-minified js file in the html, it works fine.
But, when we use the minified js file, it doesn't work. That means, it doesn't show anything in the browser.
We are using webpack for bundling the react components. yarn build
Babel-loaders to transpile the jsx code to js
I have tried to manually transpile the jsx code and then minify it. In this case the minified file also works.
But, it doesn't work when I transpile it through the my project config.
The difference between the manually minified and the projects minified file was that the manually minified file has the reference of the js files where React components are written.
.babelrc
{
"presets": [
["latest"],
"es2015",
"flow",
"react",
"stage-2",
],
"plugins": [
"syntax-dynamic-import",
],
"env": {
"production": {
"plugins": [
"transform-react-remove-prop-types",
"transform-react-inline-elements"
]
},
"development": {
"plugins": [
"transform-react-jsx-source"
]
},
"test": {
"presets": [
["latest"],
"es2015",
"flow",
"react",
"stage-2",
],
"plugins": [
"syntax-dynamic-import",
"transform-react-jsx-source"
]
}
}
}
webpack.config.js
const path = require('path');
const paths = require('./webpack.paths.js');
const loaders = require('./webpack.loaders.js');
const plugins = require('./webpack.plugins.js');
module.exports = {
entry: [path.resolve(paths.embed, 'index.js')],
output: {
path: paths.productionRoot,
filename: 'filename.js',
},
resolve: {
extensions: ['.js', '.jsx'],
alias: Object.assign({}, {
'react': 'preact-compat',
'react-dom': 'preact-compat',
}),
},
module: {
loaders: [
loaders.eslint,
loaders.iFrameJs,
loaders.css,
],
},
plugins: [
plugins.environmentVariables,
],
};
I guess the problem with .babelrc file configuration.
Would you please give a try using #babel/preset-react as recommended on babeljs site? https://babeljs.io/docs/en/babel-preset-react
Example :
npm install --save-dev #babel/preset-react
.babelrc file (Usage)
{ "presets": ["#babel/preset-react"] }
I changed the webpack config and removed the below piece of code.
alias: Object.assign({}, {
'react': 'preact-compat',
'react-dom': 'preact-compat',
}),
The react and preact version mismatch was causing the problem.
New webpack config
module.exports = {
entry: [path.resolve(paths.embed, 'index.js')],
output: {
path: paths.productionRoot,
filename: 'termly.js',
},
resolve: {
extensions: ['.js'],
},
module: {
loaders: [
loaders.eslint,
loaders.js,
loaders.css,
],
},
plugins: [
plugins.environmentVariables,
],
};
This solved the issue
Related
I add typescript config for paths:
{
//.....
"moduleResolution": "node",
{
"baseUrl": "app",
"paths": {
"#app/*": ["*"],
"#folder/*": ["folder/*"],
//Other paths
},
}
Added configuration to webpack:
resolve: {
extensions: [".tsx", ".ts", ".js", ".jsx", ".css", ".json"],
alias: {
"#app":path.resolve(__dirname + "../", "app"),
"#services":path.resolve(__dirname + "../app", "folder")
},
modules: [
"node_modules", path.resolve(process.cwd(), "app")
],
plugins: [
new TsConfigPathsPlugin({
configFile: "../tsconfig.json"
}),
],
},
And here is my .eslint file:
"settings": {
"import/resolver": {
"node": {
"paths": [
"app"
],
"extensions": [
".ts",
".tsx",
".jest.tsx",
".d.ts"
]
}
}
After that I try import somthing like this:
import {component} from "#folder/component";
Everything is assembled, the compiler generates no errors
But I get error in eslint:
ESLint: Unable to resolve path to module '#folder/component'.(import/no-unresolved)
I've been trying to figure this out for the third day
The customer does not want to install additional plugins
I would be very grateful for your help!
the node resolver doesn't understand TypeScript paths. So it's specifically looking for a node module called #folder/component - which won't exist.
You can use the typescript resolver for the plugin:
https://www.npmjs.com/package/eslint-import-resolver-typescript
Im using gatsby-plugin-root-import package in Gatbsy for using absolute imports. Absolute imports work but Eslint throws an error "import/no-unresolved".
I tried to use this code:
module.exports = {
...
"settings": {
"import/resolver": {
"node": {
"paths": ["src"]
}
},
},
But it doesn't work. Is there any solution for this problem?
gatsby-plugin-root-import config:
{
resolve: "gatsby-plugin-root-import",
options: {
src: path.join(__dirname, "src"),
pages: path.join(__dirname, "src/pages"),
component: path.join(__dirname, "src/component"),
images: path.join(__dirname, "src/assets/images"),
fonts: path.join(__dirname, "src/assets/fonts"),
styles: path.join(__dirname, "src/styles"),
}
}
You can install the eslint-import-resolver-alias plugin as dev dependency like
npm install -D eslint-import-resolver-alias
and then edit your eslint config to specify the alias
module.exports = {
...
"settings": {
"import/resolver": {
"alias": {
"map": [
["src", "./src"],
["pages", "./src/pages"],
["component", "./src/component"],
["images", "./src/images"],
["fonts", "./src/fonts"],
["styles", "./src/styles"],
],
"extensions": [".js", ".jsx"]
}
},
},
Basically you need to provide all the alias as maps to eslint too
In my react project, webpack.config.js brings in proposal-class properties like so:
...
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
query: {
presets: ['#babel/react', '#babel/preset-env'],
plugins: ['#babel/proposal-class-properties']
}
},
}
...
By including #babel/proposal-class-properties I'm able to remove the constructors from my React components, etc.
However, the documentation shows plugin-proposal-class-properties in .babelrc as follows (and doesn't mention webpack.config.js at all):
{
"plugins": ["#babel/plugin-proposal-class-properties"]
}
whereas my .babelrc does not include any plugins at all:
{
"presets": [
["#babel/env", {
"modules": false
},
"#babel/preset-env"]
]
}
Is there any effective difference between including the plugins (such as proposal-class-properties) in webpack.config.js as compared to putting them in .babelrc?
You can configure babel through .babelrc or through the babel-loader configuration in webpack. They both work exactly the same.
However, I recommend only using .babelrc for configuring babel.
That way it can also work when you run your tests, which usually don't go through webpack and will therefore not have the webpack configuration for babel.
.babelrc:
{
"presets": ["#babel/preset-env"]
"plugins": ['#babel/plugin-proposal-class-properties', {'loose': true}]
}
I am trying to use async and await in my react application.
onSubmit = async (model) => {
await this.setState({ data: model });
}
After adding the above code i get an error in my browser console.
ReferenceError: regeneratorRuntime is not defined
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-proposal-class-properties"
],
"sourceMaps": "inline"
}
webpack.config.js
const path = require("path");
const WebpackShellPlugin = require("webpack-shell-plugin");
const nodeExternals = require("webpack-node-externals");
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = [
{
Server config removed
},
{
entry: {
app1: './src/public/app1/index.js',
app2: './src/public/app2/index.js',
app3: './src/public/app3/index.js',
},
devtool: "source-map",
output: {
path: __dirname + '/dist/public/',
publicPath: '/',
filename: '[name]/bundle.js',
devtoolLineToLine: true,
sourceMapFilename: "[name]/bundle.js.map",
},
module: {
rules: [
{
test: /(\.css|.scss)$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{
test: /\.(jsx|js)?$/,
use: [{
loader: "babel-loader",
// options: {
// cacheDirectory: true,
// presets: ['react', 'es2015'] // Transpiles JSX and ES6
// }
}]
}
],
},
"plugins": [
new CopyWebpackPlugin([
{
from: 'src/public/app1/index.html',
to: 'app1'
},
{
from: 'src/public/app2/index.html',
to: 'app2'
},
{
from: 'src/public/app3/index.html',
to: 'app3'
},
]),
]
}
];
I have added my babelrc and webpack config. Please let me know if i am missing something that would cause this error to appear in my browser console.
Import regeneratorRuntime in the component using async/await:
import regeneratorRuntime from "regenerator-runtime";
*** UPDATED ANSWER *** (probably don't use above)
Import babel and #babel/plugin-transform-runtime plugin:
package.json
"devDependencies": {
"#babel/core": "^7.8.7",
"#babel/plugin-transform-runtime": "^7.8.3",
},
.babelrc
{
"plugins": ["#babel/plugin-transform-runtime"]
}
You did not include your package.json file, so it is a bit unclear what you are missing.
Assuming you have #babel/polyfill as a dependency in your package.json file, is it possible that you are not specifying:
import '#babel/polyfill'
in your React file (such as index.js)?
Adding polyfills from create-react-app worked for me.
yarn add --dev react-app-polyfill
Then add the following lines to webpack.config.js
entry: {
app: [
'react-app-polyfill/ie9', // Only if you want to support IE 9
'react-app-polyfill/stable',
'./src/index.jsx',
],
},
See more examples on the react-app-polyfill GitHub page.
i'm using in my react project a library that needs to be compiled using webpack ( the library called storm-react-diagrams)
the problem is , whenever i do some changes in the library , i need to compile it using webpack , then restart the react app using npm start in order for the changes to take effect (the generated bundle.js doesn't get updated untill i use npm start ) .
How can i optomize this and just refresh the page automaticly whenever i edit the app or the library
for info :
I'm using VS code
when changing and saving a file on my react app , the page on the browser reloads and changes take effect with no problem .
unfortuanatly , this doesn't happen when i change a file in node_modules folder
webpack config file
const webpack = require("webpack");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
var path = require("path");
var plugins = [];
const production = process.env.NODE_ENV === "production";
//do we minify it all
if (production) {
console.log("creating production build");
plugins.push(
new webpack.DefinePlugin({
"process.env.NODE_ENV": '"development"'
})
);
}
/**
* #author Dylan Vorster
*/
module.exports =
//for building the umd distribution
{
entry: "./src/main.ts",
output: {
filename: "main.js",
path: __dirname + "/dist",
libraryTarget: "umd",
library: "storm-react-diagrams"
},
externals: {
react: {
root: "React",
commonjs2: "react",
commonjs: "react",
amd: "react"
},
"react-dom": {
root: "ReactDOM",
commonjs2: "react-dom",
commonjs: "react-dom",
amd: "react-dom"
},
lodash: {
commonjs: "lodash",
commonjs2: "lodash",
amd: "_",
root: "_"
}
},
plugins: plugins,
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
},
{
test: /\.tsx?$/,
loader: "ts-loader"
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
devtool: production ? "source-map" : "cheap-module-source-map",
};