[DOCS] react webpack docs are outdated or incorrect #13873
Description
Invalid config:
The config file posted in your docs references an older version of webpack, preLoaders have since been removed. As such the source-map-loader suggests moving it to a module.rule.
However, the source-map-loader plugin throws the following error (assuming this is because it is running before TS compiler)…
ERROR in ./src/index.tsx
Module parse failed: /Users/thomas.bremer/Desktop/micro-router/src/index.tsx Unexpected token (11:4)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
| <Hello compiler="TypeScript" framework="React" />,
| document.getElementById("example")
| );
Secondary issues:
empty extensions are no longer valid
/* this config portion */
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
/* produces this error */
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.resolve.extensions[0] should not be empty.Possible config that could be used:
this config drops source-map-loader as a devDependency
module.exports = {
entry: './src/index.tsx',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
// Enable sourcemaps for debugging webpack's output.
devtool: 'source-map',
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' }
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
};