Skip to content

Commit

Permalink
fix test-site: CRA/webpack file extension issue (#37)
Browse files Browse the repository at this point in the history
test-site was broken with the following errors:
<img width="1703" alt="Screenshot 2023-08-30 at 3 28 12 PM" src="https://github.com/yext/chat-ui-react/assets/36055303/540c67b8-0358-4069-b7e9-2c0fe52fcb3c">
specifically this error:
```
Module not found: Error: Can't resolve './components' in '/Users/ytruong/chat-ui-react/lib/esm/src'
Did you mean 'index.js'?
BREAKING CHANGE: The request './components' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
```

This is due to CRA 5 (create-react-app v5) internally using webpack 5, which follows the Node.js module resolution algorithm and it requires specifying the file extension. In this case, adding `"type": "module"` in previous CR triggers this rule in webpack https://webpack.js.org/configuration/module/#resolvefullyspecified. This is a known issue in CRA 5: facebook/create-react-app#11865.

For vite/pages, pagesJS get around this using `--experimental-specifier-resolution=node` flag: https://github.com/yext/pages/blob/main/packages/pages/src/bin/spawn.ts#L19-L25

This PR implements a workaround to disable this webpack behavior using `craco` to update the webpack config without ejecting the CRA app.

J=CLIP-450
TEST=manual

see that test-site works again
<img width="1358" alt="Screenshot 2023-08-30 at 3 31 04 PM" src="https://github.com/yext/chat-ui-react/assets/36055303/6a48a76b-23f8-4715-8186-4a28f8961a8d">
  • Loading branch information
yen-tt committed Aug 30, 2023
1 parent be515a9 commit 3639309
Show file tree
Hide file tree
Showing 3 changed files with 275 additions and 6 deletions.
19 changes: 19 additions & 0 deletions test-site/craco.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
module.exports = {
webpack: {
configure: {
module: {
rules: [
//This rule is to escape the error of requiring .mjs/.js extension due
//to origin being strict ESM (package.json contains '"type": "module"')
//https://webpack.js.org/configuration/module/#resolvefullyspecified
{
test: /\.m?js$/,
resolve: {
fullySpecified: false,
},
},
],
},
},
},
};
254 changes: 252 additions & 2 deletions test-site/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 3639309

Please sign in to comment.