Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix styled-jsx import error with yarn with PNP enabled; Close: #10149 #21320

Closed
wants to merge 8 commits into from
Closed

Fix styled-jsx import error with yarn with PNP enabled; Close: #10149 #21320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ed31e67
Add failing e2e test for styled-jsx
jordinl Jan 19, 2021
633985c
Use mktemp to generate temp directories for test cases
jordinl Jan 19, 2021
6f4ae59
Only create one temp directory and add trap to clean it up
jordinl Jan 19, 2021
1c9ad4d
Pass styleModule to style-jsx babel preset
jordinl Jan 19, 2021
ea784b4
Revert "Pass styleModule to style-jsx babel preset"
jordinl Jan 20, 2021
f530241
Expose styled-jsx dependency via next/styled-jsx
jordinl Jan 21, 2021
7123455
Merge branch 'canary' into styled-jsx-yarn-2
jordinl83 Jan 26, 2021
5d55232
Merge branch 'canary' into styled-jsx-yarn-2
jordinl83 Jan 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 5 additions & 7 deletions packages/next/build/babel/preset.ts
View file
Open in desktop
Expand Up @@ -14,15 +14,13 @@ type StyledJsxBabelOptions =

// Resolve styled-jsx plugins
function styledJsxOptions(options: StyledJsxBabelOptions) {
if (!options) {
return {}
}
const baseOptions = { styleModule: 'next/styled-jsx/style', ...options }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can just be a require.resolve it seems.

Suggested change
const baseOptions = { styleModule: 'next/styled-jsx/style', ...options }
const baseOptions = { styleModule: require.resolve('styled-jsx/style'), ...options }

Copy link
Contributor

@merceyz merceyz Jan 26, 2021 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree but it needs to be behind a babel-loader check - ref #19538

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@timneutkens tried that 1c9ad4d. But then something else broke, it seems that the change caused CSS from styled-jsx not to be generated. Not sure if this is related to the issue @merceyz mentions

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also note that even if we could use require.resolve('styled-jsx/style'), it would still be necessary to export next/styled-jsx, given that the project that depends on next.js won't be able to import styled-jsx directly.


if (!Array.isArray(options.plugins)) {
return options
if (!Array.isArray(baseOptions.plugins)) {
return baseOptions
}

options.plugins = options.plugins.map(
const plugins = baseOptions.plugins.map(
(plugin: StyledJsxPlugin): StyledJsxPlugin => {
if (Array.isArray(plugin)) {
const [name, pluginOptions] = plugin
Expand All @@ -33,7 +31,7 @@ function styledJsxOptions(options: StyledJsxBabelOptions) {
}
)

return options
return { ...baseOptions, plugins }
}

type NextBabelPresetOptions = {
Expand Down
1 change: 1 addition & 0 deletions packages/next/styled-jsx/css.js
View file
Open in desktop
@@ -0,0 +1 @@
module.exports = require('styled-jsx/css')
1 change: 1 addition & 0 deletions packages/next/styled-jsx/style.js
View file
Open in desktop
@@ -0,0 +1 @@
module.exports = require('styled-jsx/style')
18 changes: 10 additions & 8 deletions test-pnp.sh
View file
Open in desktop
Expand Up @@ -5,31 +5,33 @@ declare -a testCases=(
"with-mdx"
# Tests babel config
"with-styled-components"
"with-styled-jsx"
)

set -e

# Speeds up testing locally
export CI=1

rm -rf ./e2e-tests

initialDir=$(pwd)
nextDir=$(pwd)
tempDir=$(mktemp -d)
trap 'rm -rf -- "$tempDir"' EXIT

for testCase in "${testCases[@]}"
do
cd $initialDir
testTarget="$tempDir/$testCase"

mkdir -p "$testTarget"

echo "--- Testing $testCase ---"
mkdir -p "./e2e-tests/$testCase"
cp -r "./examples/$testCase/." "./e2e-tests/$testCase"
cd "./e2e-tests/$testCase"
cp -r "$nextDir/examples/$testCase/." "$testTarget"
cd "$testTarget"

touch yarn.lock
yarn set version berry
yarn config set pnpFallbackMode none
yarn config set enableGlobalCache true
yarn link --all --private -r ../..
yarn link --all --private -r "$nextDir"

yarn build
done